@zanichelli/albe-web-components 15.1.4-rc1 → 15.1.4-rc2
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/{index-aea908b7.js → index-60a9be0c.js} +2 -2
- package/dist/cjs/{index-aea908b7.js.map → index-60a9be0c.js.map} +1 -1
- package/dist/cjs/{index-f45b4f10.js → index-eb294a4b.js} +2 -2
- package/dist/cjs/{index-f45b4f10.js.map → index-eb294a4b.js.map} +1 -1
- package/dist/cjs/z-table.cjs.entry.js +2 -2
- package/dist/cjs/z-td.cjs.entry.js +1 -1
- package/dist/cjs/z-tr.cjs.entry.js +2 -2
- package/dist/collection/components/table/cells/z-td/index.js +1 -1
- package/dist/collection/components/table/cells/z-td/index.js.map +1 -1
- package/dist/components/z-td.js +1 -1
- package/dist/components/z-td.js.map +1 -1
- package/dist/esm/{index-d584fc39.js → index-12200e65.js} +2 -2
- package/dist/esm/{index-d584fc39.js.map → index-12200e65.js.map} +1 -1
- package/dist/esm/{index-fdf36634.js → index-ec2c92ef.js} +2 -2
- package/dist/esm/{index-fdf36634.js.map → index-ec2c92ef.js.map} +1 -1
- package/dist/esm/z-table.entry.js +2 -2
- package/dist/esm/z-td.entry.js +1 -1
- package/dist/esm/z-tr.entry.js +2 -2
- package/dist/esm-es5/{index-d584fc39.js → index-12200e65.js} +2 -2
- package/dist/esm-es5/{index-fdf36634.js → index-ec2c92ef.js} +2 -2
- package/dist/esm-es5/index-ec2c92ef.js.map +1 -0
- package/dist/esm-es5/z-table.entry.js +1 -1
- package/dist/esm-es5/z-td.entry.js +1 -1
- package/dist/esm-es5/z-tr.entry.js +1 -1
- package/dist/web-components-library/{p-62924c1f.system.entry.js → p-120094fd.system.entry.js} +2 -2
- package/dist/web-components-library/{p-437b4abd.system.entry.js → p-21373a0f.system.entry.js} +2 -2
- package/dist/web-components-library/p-2754a5b6.entry.js +2 -0
- package/dist/web-components-library/{p-852a5dca.entry.js → p-3adbc722.entry.js} +2 -2
- package/dist/web-components-library/{p-37adea1a.js → p-4224a835.js} +2 -2
- package/dist/web-components-library/p-4224a835.js.map +1 -0
- package/dist/web-components-library/{p-a8abbb1c.js → p-66ea91eb.js} +2 -2
- package/dist/web-components-library/{p-b3d09ca4.system.js → p-a189d455.system.js} +2 -2
- package/dist/web-components-library/p-a189d455.system.js.map +1 -0
- package/dist/web-components-library/p-a2831bb6.entry.js +2 -0
- package/{www/build/p-ce684d78.system.js → dist/web-components-library/p-aa60a8ab.system.js} +2 -2
- package/dist/web-components-library/{p-18376e75.system.entry.js → p-c3792f60.system.entry.js} +2 -2
- package/dist/web-components-library/p-f530271b.system.js +1 -1
- package/dist/web-components-library/web-components-library.esm.js +1 -1
- package/package.json +1 -1
- package/www/build/{p-62924c1f.system.entry.js → p-120094fd.system.entry.js} +2 -2
- package/www/build/{p-437b4abd.system.entry.js → p-21373a0f.system.entry.js} +2 -2
- package/www/build/p-2754a5b6.entry.js +2 -0
- package/www/build/{p-852a5dca.entry.js → p-3adbc722.entry.js} +2 -2
- package/www/build/{p-37adea1a.js → p-4224a835.js} +2 -2
- package/www/build/p-4224a835.js.map +1 -0
- package/www/build/{p-a8abbb1c.js → p-66ea91eb.js} +2 -2
- package/www/build/{p-b3d09ca4.system.js → p-a189d455.system.js} +2 -2
- package/www/build/p-a189d455.system.js.map +1 -0
- package/www/build/p-a2831bb6.entry.js +2 -0
- package/{dist/web-components-library/p-ce684d78.system.js → www/build/p-aa60a8ab.system.js} +2 -2
- package/www/build/{p-18376e75.system.entry.js → p-c3792f60.system.entry.js} +2 -2
- package/www/build/{p-a0ca1edd.js → p-e5f46edf.js} +1 -1
- package/www/build/p-f530271b.system.js +1 -1
- package/www/build/web-components-library.esm.js +1 -1
- package/www/index.html +1 -1
- package/dist/esm-es5/index-fdf36634.js.map +0 -1
- package/dist/web-components-library/p-09d7310b.entry.js +0 -2
- package/dist/web-components-library/p-37adea1a.js.map +0 -1
- package/dist/web-components-library/p-b3d09ca4.system.js.map +0 -1
- package/dist/web-components-library/p-d7863cd1.entry.js +0 -2
- package/www/build/p-09d7310b.entry.js +0 -2
- package/www/build/p-37adea1a.js.map +0 -1
- package/www/build/p-b3d09ca4.system.js.map +0 -1
- package/www/build/p-d7863cd1.entry.js +0 -2
- /package/dist/esm-es5/{index-d584fc39.js.map → index-12200e65.js.map} +0 -0
- /package/dist/web-components-library/{p-09d7310b.entry.js.map → p-120094fd.system.entry.js.map} +0 -0
- /package/dist/web-components-library/{p-437b4abd.system.entry.js.map → p-21373a0f.system.entry.js.map} +0 -0
- /package/dist/web-components-library/{p-18376e75.system.entry.js.map → p-2754a5b6.entry.js.map} +0 -0
- /package/dist/web-components-library/{p-852a5dca.entry.js.map → p-3adbc722.entry.js.map} +0 -0
- /package/dist/web-components-library/{p-a8abbb1c.js.map → p-66ea91eb.js.map} +0 -0
- /package/dist/web-components-library/{p-62924c1f.system.entry.js.map → p-a2831bb6.entry.js.map} +0 -0
- /package/dist/web-components-library/{p-ce684d78.system.js.map → p-aa60a8ab.system.js.map} +0 -0
- /package/dist/web-components-library/{p-d7863cd1.entry.js.map → p-c3792f60.system.entry.js.map} +0 -0
- /package/www/build/{p-09d7310b.entry.js.map → p-120094fd.system.entry.js.map} +0 -0
- /package/www/build/{p-437b4abd.system.entry.js.map → p-21373a0f.system.entry.js.map} +0 -0
- /package/www/build/{p-18376e75.system.entry.js.map → p-2754a5b6.entry.js.map} +0 -0
- /package/www/build/{p-852a5dca.entry.js.map → p-3adbc722.entry.js.map} +0 -0
- /package/www/build/{p-a8abbb1c.js.map → p-66ea91eb.js.map} +0 -0
- /package/www/build/{p-62924c1f.system.entry.js.map → p-a2831bb6.entry.js.map} +0 -0
- /package/www/build/{p-ce684d78.system.js.map → p-aa60a8ab.system.js.map} +0 -0
- /package/www/build/{p-d7863cd1.entry.js.map → p-c3792f60.system.entry.js.map} +0 -0
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
const index = require('./index-5dc4a8de.js');
|
|
4
4
|
const utils = require('./utils-1a8655c7.js');
|
|
5
|
-
require('./index-
|
|
5
|
+
require('./index-eb294a4b.js');
|
|
6
6
|
require('./index-a335ba65.js');
|
|
7
7
|
|
|
8
8
|
const stylesCss = ":host{--columns:1;display:grid;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content;-webkit-box-sizing:border-box;box-sizing:border-box;grid-auto-flow:column;grid-template-columns:var(--z-table--expand-button-size, 0) repeat(var(--columns), minmax(128px, 1fr))}*{-webkit-box-sizing:border-box;box-sizing:border-box}.z-tr--expand-button-container,::slotted(*){border-bottom:var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03)}::slotted(*:not(:last-child)){border-right:var(--z-table--cell-left-border, none)}:host([expandable]){--show-expandable-button:visible;cursor:pointer}:host([expandable]) ::slotted(*){grid-row:1}:host([expandable]) ::slotted(:nth-last-child(2)){border-right:none}:host([expandable]) ::slotted(*:last-child){border-left:0;grid-column:1 / span calc(var(--columns) + 1);grid-row:2}:host([expandable]:not([expanded])) ::slotted(*:last-child){display:none}:host([expanded]){margin-bottom:4px;-webkit-box-shadow:0 4px 4px -2px var(--shadow-color-base);box-shadow:0 4px 4px -2px var(--shadow-color-base)}:host([expanded]) .z-tr--expand-button-container,:host([expanded]) ::slotted(*){background-color:var(--color-surface02)}.z-tr--expand-button-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background-color:var(--z-table--cells-background, var(--color-surface01))}.z-tr--expand-button-container button{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:0;border:none;margin:auto;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;cursor:pointer;visibility:var(--show-expandable-button, hidden)}.z-tr--expand-button-container button:focus{-webkit-box-shadow:var(--shadow-focus-primary);box-shadow:var(--shadow-focus-primary);outline:none}.z-tr--expand-button-container button z-icon{--z-icon-width:16px;--z-icon-height:16px}";
|
|
@@ -56,4 +56,4 @@ ZTr.style = ZTrStyle0;
|
|
|
56
56
|
|
|
57
57
|
exports.ZTr = ZTr;
|
|
58
58
|
|
|
59
|
-
//# sourceMappingURL=index-
|
|
59
|
+
//# sourceMappingURL=index-60a9be0c.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"index-
|
|
1
|
+
{"file":"index-60a9be0c.js","mappings":";;;;;;;AAAA,MAAM,SAAS,GAAG,m9DAAm9D,CAAC;AACt+D,kBAAe,SAAS;;MCeX,GAAG;;;;0BAaD,KAAK;wBAMP,KAAK;;;IAeN,aAAa;QACrB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAkC,YAAY,CAAC,CAAC,CAAC;QACpG,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,KAAK,CAAC,GAAG,EAAE,CAAC;SACb;QAED,MAAM,OAAO,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;QAClF,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,WAAW,EAAE,GAAG,OAAO,EAAE,CAAC,CAAC;QAEvD,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,MAAM,iBAAiB,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC;YACtC,iBAAiB,CAAC,EAAE,GAAG,iBAAiB,CAAC,EAAE,IAAI,2BAA2BA,cAAQ,EAAE,EAAE,CAAC;YACvF,IAAI,CAAC,mBAAmB,GAAG,iBAAiB,CAAC,EAAE,CAAC;SACjD;KACF;;;;;IAMO,UAAU,CAAC,KAAiB;QAClC,MAAM,aAAa,GAAI,KAAK,CAAC,MAAsB,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QAC/E,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,aAAa,EAAE;YACrC,OAAO;SACR;QAED,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;QAC/B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAC,CAAC,CAAC;KAC7C;IAED,iBAAiB;QACf,IAAI,CAAC,aAAa,EAAE,CAAC;KACtB;IAED,MAAM;QACJ,QACEC,QAACC,UAAI,qDACH,IAAI,EAAC,KAAK,EACV,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,EACnC,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAEvBD,kEAAK,KAAK,EAAC,+BAA+B,IACvC,IAAI,CAAC,UAAU,KACdA,sFACiB,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,gBACnC,IAAI,CAAC,QAAQ,GAAG,eAAe,GAAG,cAAc,mBAC7C,IAAI,CAAC,mBAAmB,EACvC,IAAI,EAAC,QAAQ,IAEbA,qEAAQ,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAG,eAAe,GAAG,cAAc,GAAW,CAClE,CACV,CACG,EACNA,mEAAM,YAAY,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,GAAS,CACrD,EACP;KACH;;;;;;;;;;","names":["randomId","h","Host"],"sources":["src/components/table/z-tr/styles.css?tag=z-tr&encapsulation=shadow","src/components/table/z-tr/index.tsx"],"sourcesContent":[":host {\n /* number of columns of the row. will be set in component's ts code */\n --columns: 1;\n\n display: grid;\n min-width: max-content;\n box-sizing: border-box;\n grid-auto-flow: column;\n grid-template-columns: var(--z-table--expand-button-size, 0) repeat(var(--columns), minmax(128px, 1fr));\n}\n\n* {\n box-sizing: border-box;\n}\n\n.z-tr--expand-button-container,\n::slotted(*) {\n border-bottom: var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03);\n}\n\n::slotted(*:not(:last-child)) {\n border-right: var(--z-table--cell-left-border, none);\n}\n\n:host([expandable]) {\n --show-expandable-button: visible;\n\n cursor: pointer;\n}\n\n:host([expandable]) ::slotted(*) {\n grid-row: 1;\n}\n\n:host([expandable]) ::slotted(:nth-last-child(2)) {\n border-right: none;\n}\n\n:host([expandable]) ::slotted(*:last-child) {\n border-left: 0;\n grid-column: 1 / span calc(var(--columns) + 1);\n grid-row: 2;\n}\n\n:host([expandable]:not([expanded])) ::slotted(*:last-child) {\n display: none;\n}\n\n:host([expanded]) {\n margin-bottom: 4px; /* prevents shadow to be cut by the next element */\n box-shadow: 0 4px 4px -2px var(--shadow-color-base);\n}\n\n:host([expanded]) .z-tr--expand-button-container,\n:host([expanded]) ::slotted(*) {\n background-color: var(--color-surface02);\n}\n\n.z-tr--expand-button-container {\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--z-table--cells-background, var(--color-surface01));\n}\n\n.z-tr--expand-button-container button {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n border: none;\n margin: auto;\n appearance: none;\n background: transparent;\n cursor: pointer;\n visibility: var(--show-expandable-button, hidden);\n}\n\n.z-tr--expand-button-container button:focus {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n.z-tr--expand-button-container button z-icon {\n --z-icon-width: 16px;\n --z-icon-height: 16px;\n}\n","import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {randomId} from \"../../../utils/utils\";\nimport \"../cells/z-td/index\";\nimport \"../cells/z-th/index\";\n\n/**\n * ZTr component.\n * When the row is `expandable`, you can set the `prevent-expand` css class on an interactive element inside the row\n * to prevent the row from expanding.\n * @slot - ZTr content (`z-td` or `z-th`).\n */\n@Component({\n tag: \"z-tr\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZTr {\n @Element() host: HTMLZTrElement;\n\n /**\n * Whether the row is expandable.\n * Use a `z-td` as the last cell of the row for the additional content.\n * It will show a button to expand/collapse the row.\n * The last cell will be hidden until the button or row is clicked.\n *\n * If some element inside the expandable row contains the `prevent-expand` css class,\n * the row will not expand by clicking that element.\n */\n @Prop({reflect: true})\n expandable = false;\n\n /**\n * Whether the row is currently expanded.\n */\n @State()\n expanded = false;\n\n /**\n * HTML Id of the expandable content.\n * It is used to link the button to the content through the `aria-controls` attribute.\n */\n @State()\n expandableContentId: string;\n\n /** Row has been expanded */\n @Event()\n expand: EventEmitter;\n\n @Watch(\"expandable\")\n @Listen(\"colspanchange\")\n protected updateColumns(): void {\n const cells = Array.from(this.host.querySelectorAll<HTMLZTdElement | HTMLZThElement>(\"z-td, z-th\"));\n if (this.expandable) {\n cells.pop();\n }\n\n const columns = cells.map((cell) => cell.colspan || 1).reduce((a, b) => a + b, 0);\n this.host.style.setProperty(\"--columns\", `${columns}`);\n\n if (this.expandable) {\n const expandableContent = cells.pop();\n expandableContent.id = expandableContent.id || `z-tr-expandable-content-${randomId()}`;\n this.expandableContentId = expandableContent.id;\n }\n }\n\n /**\n * Handle click on row.\n * Skip expansion if the click is on a element with `prevent-expand` css class.\n */\n private onRowClick(event: MouseEvent): void {\n const preventExpand = (event.target as HTMLElement).closest(\".prevent-expand\");\n if (!this.expandable || preventExpand) {\n return;\n }\n\n this.expanded = !this.expanded;\n this.expand.emit({expanded: this.expanded});\n }\n\n componentWillLoad(): void {\n this.updateColumns();\n }\n\n render(): HTMLZTrElement {\n return (\n <Host\n role=\"row\"\n onClick={this.onRowClick.bind(this)}\n expanded={this.expanded}\n >\n <div class=\"z-tr--expand-button-container\">\n {this.expandable && (\n <button\n aria-expanded={this.expanded ? \"true\" : \"false\"}\n aria-label={this.expanded ? \"Comprimi riga\" : \"Espandi riga\"}\n aria-controls={this.expandableContentId}\n type=\"button\"\n >\n <z-icon name={this.expanded ? \"minus-circled\" : \"plus-circled\"}></z-icon>\n </button>\n )}\n </div>\n <slot onSlotchange={this.updateColumns.bind(this)}></slot>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -32,7 +32,7 @@ const ZTd = class {
|
|
|
32
32
|
this.updateColspan();
|
|
33
33
|
}
|
|
34
34
|
render() {
|
|
35
|
-
return (index.h(index.Host, { key: 'c55f76a96674c7d8f7ecb7e0d47674bd57df37d1', role: "cell", "menu-open": this.isMenuOpen }, index.h("slot", { key: '951885f3ea1d35b7faf76b3b42279f70eadcc0b6' }), this.showMenu && (index.h("div", { key: '61954fde77683c2c724e04886613c55ce26ef5b6', class: "cell--menu-container prevent-expand" }, index.h("z-button", { key: '1d0a873ee74d69488113d62ebd6cb6000320bc94', variant: index$1.ButtonVariant.TERTIARY, icon: "contextual-menu", size: index$1.ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: this.onMenuButtonClick.bind(this) }), index.h("z-popover", { key: '
|
|
35
|
+
return (index.h(index.Host, { key: 'c55f76a96674c7d8f7ecb7e0d47674bd57df37d1', role: "cell", "menu-open": this.isMenuOpen }, index.h("slot", { key: '951885f3ea1d35b7faf76b3b42279f70eadcc0b6' }), this.showMenu && (index.h("div", { key: '61954fde77683c2c724e04886613c55ce26ef5b6', class: "cell--menu-container prevent-expand" }, index.h("z-button", { key: '1d0a873ee74d69488113d62ebd6cb6000320bc94', variant: index$1.ButtonVariant.TERTIARY, icon: "contextual-menu", size: index$1.ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: this.onMenuButtonClick.bind(this) }), index.h("z-popover", { key: 'ab8115335857e220dc205147d27cb3d7d6d44344', ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: index$1.PopoverPosition.TOP_LEFT }, index.h("slot", { key: '928e2e6e4e4628f9aa8f065506839e87a8017da0', name: "contextual-menu" }))))));
|
|
36
36
|
}
|
|
37
37
|
get host() { return index.getElement(this); }
|
|
38
38
|
static get watchers() { return {
|
|
@@ -43,4 +43,4 @@ ZTd.style = ZTdStyle0;
|
|
|
43
43
|
|
|
44
44
|
exports.ZTd = ZTd;
|
|
45
45
|
|
|
46
|
-
//# sourceMappingURL=index-
|
|
46
|
+
//# sourceMappingURL=index-eb294a4b.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"index-
|
|
1
|
+
{"file":"index-eb294a4b.js","mappings":";;;;;AAAA,MAAM,SAAS,GAAG,gvCAAgvC,CAAC;AACnwC,kBAAe,SAAS;;MCWX,GAAG;;;;;sBAaL,KAAK;wBAQkB,IAAI;0BAMvB,KAAK;;IAgBR,aAAa;QACrB,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,IAAI,CAAC,OAAO,EAAE,CAAC;SACrD;aAAM;YACL,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC;SAC/C;QAED,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC;KAC5C;IAEO,iBAAiB,CAAC,EAAc;QACtC,EAAE,CAAC,eAAe,EAAE,CAAC;QACrB,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;KAC5C;IAED,iBAAiB;QACf,IAAI,CAAC,aAAa,EAAE,CAAC;KACtB;IAED,MAAM;QACJ,QACEA,QAACC,UAAI,qDACH,IAAI,EAAC,MAAM,eACA,IAAI,CAAC,UAAU,IAE1BD,oEAAa,EACZ,IAAI,CAAC,QAAQ,KACZA,kEAAK,KAAK,EAAC,qCAAqC,IAC9CA,uEACE,OAAO,EAAEE,qBAAa,CAAC,QAAQ,EAC/B,IAAI,EAAC,iBAAiB,EACtB,IAAI,EAAEC,mBAAW,CAAC,OAAO,EACzB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,WAAW,GAAG,EAAwB,CAAC,EAC1D,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,GAC1C,EACFH,wEACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,SAAS,GAAG,EAAyB,CAAC,EACzD,MAAM,EAAE,IAAI,CAAC,WAA0B,EACvC,YAAY,EAAE,CAAC,KAAK,MAAM,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAC9D,QAAQ,EAAEI,uBAAe,CAAC,QAAQ,IAElCJ,mEAAM,IAAI,EAAC,iBAAiB,GAAQ,CAC1B,CACR,CACP,CACI,EACP;KACH;;;;;;;;;;","names":["h","Host","ButtonVariant","ControlSize","PopoverPosition"],"sources":["src/components/table/cells/z-td/styles.css?tag=z-td&encapsulation=shadow","src/components/table/cells/z-td/index.tsx"],"sourcesContent":["@import \"../z-table-cells.css\";\n","import {Component, Element, Event, EventEmitter, Host, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ButtonVariant, ControlSize, PopoverPosition, VisibilityCondition} from \"../../../../beans\";\n\n/**\n * ZTd component.\n * @slot - ZTd content.\n */\n@Component({\n tag: \"z-td\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZTd {\n @Element() host: HTMLZTdElement;\n\n /**\n * Number of columns that the cell should span.\n */\n @Prop()\n colspan: number;\n\n /**\n * Whether the cell should stick.\n */\n @Prop({reflect: true})\n sticky = false;\n\n /**\n * Enables the contextual menu.\n * Can be set to \"hover\" or \"always\" to show the button only on cell hover or always.\n * Set a nullish value to hide the menu button.\n */\n @Prop({reflect: true})\n showMenu: VisibilityCondition = null;\n\n /**\n * Store the open state of the menu.\n */\n @State()\n isMenuOpen = false;\n\n private menuTrigger: HTMLZButtonElement;\n\n private popoverEl: HTMLZPopoverElement;\n\n /**\n * Emitted when the value of the `colspan` changes.\n */\n @Event({\n bubbles: true,\n cancelable: false,\n })\n colspanChange: EventEmitter<number>;\n\n @Watch(\"colspan\")\n protected updateColspan(): void {\n if (this.colspan) {\n this.host.style.gridColumn = `span ${this.colspan}`;\n } else {\n this.host.style.removeProperty(\"grid-column\");\n }\n\n this.colspanChange.emit(this.colspan || 1);\n }\n\n private onMenuButtonClick(ev: MouseEvent): void {\n ev.stopPropagation();\n this.popoverEl.open = !this.popoverEl.open;\n }\n\n componentWillLoad(): void {\n this.updateColspan();\n }\n\n render(): HTMLZTdElement {\n return (\n <Host\n role=\"cell\"\n menu-open={this.isMenuOpen}\n >\n <slot></slot>\n {this.showMenu && (\n <div class=\"cell--menu-container prevent-expand\">\n <z-button\n variant={ButtonVariant.TERTIARY}\n icon=\"contextual-menu\"\n size={ControlSize.X_SMALL}\n ref={(el) => (this.menuTrigger = el as HTMLZButtonElement)}\n onClick={this.onMenuButtonClick.bind(this)}\n />\n <z-popover\n ref={(el) => (this.popoverEl = el as HTMLZPopoverElement)}\n bindTo={this.menuTrigger as HTMLElement}\n onOpenChange={(event) => (this.isMenuOpen = event.detail.open)}\n position={PopoverPosition.TOP_LEFT}\n >\n <slot name=\"contextual-menu\"></slot>\n </z-popover>\n </div>\n )}\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -6,11 +6,11 @@ const index = require('./index-5dc4a8de.js');
|
|
|
6
6
|
require('./index-8eb6b556.js');
|
|
7
7
|
require('./index-593b4622.js');
|
|
8
8
|
require('./index-1d6878f3.js');
|
|
9
|
-
require('./index-
|
|
9
|
+
require('./index-60a9be0c.js');
|
|
10
10
|
require('./utils-1a8655c7.js');
|
|
11
11
|
require('./index-e3835c94.js');
|
|
12
12
|
require('./breakpoints-5c22092a.js');
|
|
13
|
-
require('./index-
|
|
13
|
+
require('./index-eb294a4b.js');
|
|
14
14
|
require('./index-a335ba65.js');
|
|
15
15
|
|
|
16
16
|
const stylesCss = ":host{--z-table--cells-padding:calc(var(--space-unit) * 2);position:relative;display:block;overflow:auto;max-width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:var(--color-surface01)}:host([expandable]){--z-table--expand-button-size:40px}:host([bordered]){--z-table--cell-left-border:1px solid var(--color-surface03)}.table{min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content}";
|
|
@@ -2,12 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-60a9be0c.js');
|
|
6
6
|
require('./index-5dc4a8de.js');
|
|
7
7
|
require('./utils-1a8655c7.js');
|
|
8
8
|
require('./index-e3835c94.js');
|
|
9
9
|
require('./breakpoints-5c22092a.js');
|
|
10
|
-
require('./index-
|
|
10
|
+
require('./index-eb294a4b.js');
|
|
11
11
|
require('./index-a335ba65.js');
|
|
12
12
|
|
|
13
13
|
|
|
@@ -28,7 +28,7 @@ export class ZTd {
|
|
|
28
28
|
this.updateColspan();
|
|
29
29
|
}
|
|
30
30
|
render() {
|
|
31
|
-
return (h(Host, { key: 'c55f76a96674c7d8f7ecb7e0d47674bd57df37d1', role: "cell", "menu-open": this.isMenuOpen }, h("slot", { key: '951885f3ea1d35b7faf76b3b42279f70eadcc0b6' }), this.showMenu && (h("div", { key: '61954fde77683c2c724e04886613c55ce26ef5b6', class: "cell--menu-container prevent-expand" }, h("z-button", { key: '1d0a873ee74d69488113d62ebd6cb6000320bc94', variant: ButtonVariant.TERTIARY, icon: "contextual-menu", size: ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: this.onMenuButtonClick.bind(this) }), h("z-popover", { key: '
|
|
31
|
+
return (h(Host, { key: 'c55f76a96674c7d8f7ecb7e0d47674bd57df37d1', role: "cell", "menu-open": this.isMenuOpen }, h("slot", { key: '951885f3ea1d35b7faf76b3b42279f70eadcc0b6' }), this.showMenu && (h("div", { key: '61954fde77683c2c724e04886613c55ce26ef5b6', class: "cell--menu-container prevent-expand" }, h("z-button", { key: '1d0a873ee74d69488113d62ebd6cb6000320bc94', variant: ButtonVariant.TERTIARY, icon: "contextual-menu", size: ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: this.onMenuButtonClick.bind(this) }), h("z-popover", { key: 'ab8115335857e220dc205147d27cb3d7d6d44344', ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: PopoverPosition.TOP_LEFT }, h("slot", { key: '928e2e6e4e4628f9aa8f065506839e87a8017da0', name: "contextual-menu" }))))));
|
|
32
32
|
}
|
|
33
33
|
static get is() { return "z-td"; }
|
|
34
34
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/components/table/cells/z-td/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AACnG,OAAO,EAAC,aAAa,EAAE,WAAW,EAAE,eAAe,EAAE,mBAAmB,EAAC,MAAM,mBAAmB,CAAC;AAEnG;;;GAGG;AAMH,MAAM,OAAO,GAAG;;;sBAaL,KAAK;wBAQkB,IAAI;0BAMvB,KAAK;;IAgBR,aAAa;QACrB,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,IAAI,CAAC,OAAO,EAAE,CAAC;QACtD,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC;QAChD,CAAC;QAED,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC;IAC7C,CAAC;IAEO,iBAAiB,CAAC,EAAc;QACtC,EAAE,CAAC,eAAe,EAAE,CAAC;QACrB,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;IAC7C,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,IAAI,EAAC,MAAM,eACA,IAAI,CAAC,UAAU;YAE1B,8DAAa;YACZ,IAAI,CAAC,QAAQ,IAAI,CAChB,4DAAK,KAAK,EAAC,qCAAqC;gBAC9C,iEACE,OAAO,EAAE,aAAa,CAAC,QAAQ,EAC/B,IAAI,EAAC,iBAAiB,EACtB,IAAI,EAAE,WAAW,CAAC,OAAO,EACzB,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,EAAwB,CAAC,EAC1D,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,GAC1C;gBACF,kEACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,EAAyB,CAAC,EACzD,MAAM,EAAE,IAAI,CAAC,WAA0B,EACvC,YAAY,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAC9D,QAAQ,EAAE,eAAe,CAAC,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/components/table/cells/z-td/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AACnG,OAAO,EAAC,aAAa,EAAE,WAAW,EAAE,eAAe,EAAE,mBAAmB,EAAC,MAAM,mBAAmB,CAAC;AAEnG;;;GAGG;AAMH,MAAM,OAAO,GAAG;;;sBAaL,KAAK;wBAQkB,IAAI;0BAMvB,KAAK;;IAgBR,aAAa;QACrB,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,IAAI,CAAC,OAAO,EAAE,CAAC;QACtD,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC;QAChD,CAAC;QAED,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC;IAC7C,CAAC;IAEO,iBAAiB,CAAC,EAAc;QACtC,EAAE,CAAC,eAAe,EAAE,CAAC;QACrB,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;IAC7C,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,IAAI,EAAC,MAAM,eACA,IAAI,CAAC,UAAU;YAE1B,8DAAa;YACZ,IAAI,CAAC,QAAQ,IAAI,CAChB,4DAAK,KAAK,EAAC,qCAAqC;gBAC9C,iEACE,OAAO,EAAE,aAAa,CAAC,QAAQ,EAC/B,IAAI,EAAC,iBAAiB,EACtB,IAAI,EAAE,WAAW,CAAC,OAAO,EACzB,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,EAAwB,CAAC,EAC1D,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,GAC1C;gBACF,kEACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,EAAyB,CAAC,EACzD,MAAM,EAAE,IAAI,CAAC,WAA0B,EACvC,YAAY,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAC9D,QAAQ,EAAE,eAAe,CAAC,QAAQ;oBAElC,6DAAM,IAAI,EAAC,iBAAiB,GAAQ,CAC1B,CACR,CACP,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Element, Event, EventEmitter, Host, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ButtonVariant, ControlSize, PopoverPosition, VisibilityCondition} from \"../../../../beans\";\n\n/**\n * ZTd component.\n * @slot - ZTd content.\n */\n@Component({\n tag: \"z-td\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZTd {\n @Element() host: HTMLZTdElement;\n\n /**\n * Number of columns that the cell should span.\n */\n @Prop()\n colspan: number;\n\n /**\n * Whether the cell should stick.\n */\n @Prop({reflect: true})\n sticky = false;\n\n /**\n * Enables the contextual menu.\n * Can be set to \"hover\" or \"always\" to show the button only on cell hover or always.\n * Set a nullish value to hide the menu button.\n */\n @Prop({reflect: true})\n showMenu: VisibilityCondition = null;\n\n /**\n * Store the open state of the menu.\n */\n @State()\n isMenuOpen = false;\n\n private menuTrigger: HTMLZButtonElement;\n\n private popoverEl: HTMLZPopoverElement;\n\n /**\n * Emitted when the value of the `colspan` changes.\n */\n @Event({\n bubbles: true,\n cancelable: false,\n })\n colspanChange: EventEmitter<number>;\n\n @Watch(\"colspan\")\n protected updateColspan(): void {\n if (this.colspan) {\n this.host.style.gridColumn = `span ${this.colspan}`;\n } else {\n this.host.style.removeProperty(\"grid-column\");\n }\n\n this.colspanChange.emit(this.colspan || 1);\n }\n\n private onMenuButtonClick(ev: MouseEvent): void {\n ev.stopPropagation();\n this.popoverEl.open = !this.popoverEl.open;\n }\n\n componentWillLoad(): void {\n this.updateColspan();\n }\n\n render(): HTMLZTdElement {\n return (\n <Host\n role=\"cell\"\n menu-open={this.isMenuOpen}\n >\n <slot></slot>\n {this.showMenu && (\n <div class=\"cell--menu-container prevent-expand\">\n <z-button\n variant={ButtonVariant.TERTIARY}\n icon=\"contextual-menu\"\n size={ControlSize.X_SMALL}\n ref={(el) => (this.menuTrigger = el as HTMLZButtonElement)}\n onClick={this.onMenuButtonClick.bind(this)}\n />\n <z-popover\n ref={(el) => (this.popoverEl = el as HTMLZPopoverElement)}\n bindTo={this.menuTrigger as HTMLElement}\n onOpenChange={(event) => (this.isMenuOpen = event.detail.open)}\n position={PopoverPosition.TOP_LEFT}\n >\n <slot name=\"contextual-menu\"></slot>\n </z-popover>\n </div>\n )}\n </Host>\n );\n }\n}\n"]}
|
package/dist/components/z-td.js
CHANGED
|
@@ -35,7 +35,7 @@ const ZTd$1 = /*@__PURE__*/ proxyCustomElement(class ZTd extends HTMLElement {
|
|
|
35
35
|
this.updateColspan();
|
|
36
36
|
}
|
|
37
37
|
render() {
|
|
38
|
-
return (h(Host, { key: 'c55f76a96674c7d8f7ecb7e0d47674bd57df37d1', role: "cell", "menu-open": this.isMenuOpen }, h("slot", { key: '951885f3ea1d35b7faf76b3b42279f70eadcc0b6' }), this.showMenu && (h("div", { key: '61954fde77683c2c724e04886613c55ce26ef5b6', class: "cell--menu-container prevent-expand" }, h("z-button", { key: '1d0a873ee74d69488113d62ebd6cb6000320bc94', variant: ButtonVariant.TERTIARY, icon: "contextual-menu", size: ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: this.onMenuButtonClick.bind(this) }), h("z-popover", { key: '
|
|
38
|
+
return (h(Host, { key: 'c55f76a96674c7d8f7ecb7e0d47674bd57df37d1', role: "cell", "menu-open": this.isMenuOpen }, h("slot", { key: '951885f3ea1d35b7faf76b3b42279f70eadcc0b6' }), this.showMenu && (h("div", { key: '61954fde77683c2c724e04886613c55ce26ef5b6', class: "cell--menu-container prevent-expand" }, h("z-button", { key: '1d0a873ee74d69488113d62ebd6cb6000320bc94', variant: ButtonVariant.TERTIARY, icon: "contextual-menu", size: ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: this.onMenuButtonClick.bind(this) }), h("z-popover", { key: 'ab8115335857e220dc205147d27cb3d7d6d44344', ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: PopoverPosition.TOP_LEFT }, h("slot", { key: '928e2e6e4e4628f9aa8f065506839e87a8017da0', name: "contextual-menu" }))))));
|
|
39
39
|
}
|
|
40
40
|
get host() { return this; }
|
|
41
41
|
static get watchers() { return {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"z-td.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,gvCAAgvC,CAAC;AACnwC,kBAAe,SAAS;;MCWXA,KAAG;;;;;;;sBAaL,KAAK;wBAQkB,IAAI;0BAMvB,KAAK;;IAgBR,aAAa;QACrB,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,IAAI,CAAC,OAAO,EAAE,CAAC;SACrD;aAAM;YACL,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC;SAC/C;QAED,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC;KAC5C;IAEO,iBAAiB,CAAC,EAAc;QACtC,EAAE,CAAC,eAAe,EAAE,CAAC;QACrB,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;KAC5C;IAED,iBAAiB;QACf,IAAI,CAAC,aAAa,EAAE,CAAC;KACtB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,IAAI,EAAC,MAAM,eACA,IAAI,CAAC,UAAU,IAE1B,8DAAa,EACZ,IAAI,CAAC,QAAQ,KACZ,4DAAK,KAAK,EAAC,qCAAqC,IAC9C,iEACE,OAAO,EAAE,aAAa,CAAC,QAAQ,EAC/B,IAAI,EAAC,iBAAiB,EACtB,IAAI,EAAE,WAAW,CAAC,OAAO,EACzB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,WAAW,GAAG,EAAwB,CAAC,EAC1D,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,GAC1C,EACF,kEACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,SAAS,GAAG,EAAyB,CAAC,EACzD,MAAM,EAAE,IAAI,CAAC,WAA0B,EACvC,YAAY,EAAE,CAAC,KAAK,MAAM,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAC9D,QAAQ,EAAE,eAAe,CAAC,
|
|
1
|
+
{"file":"z-td.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,gvCAAgvC,CAAC;AACnwC,kBAAe,SAAS;;MCWXA,KAAG;;;;;;;sBAaL,KAAK;wBAQkB,IAAI;0BAMvB,KAAK;;IAgBR,aAAa;QACrB,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,IAAI,CAAC,OAAO,EAAE,CAAC;SACrD;aAAM;YACL,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC;SAC/C;QAED,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC;KAC5C;IAEO,iBAAiB,CAAC,EAAc;QACtC,EAAE,CAAC,eAAe,EAAE,CAAC;QACrB,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;KAC5C;IAED,iBAAiB;QACf,IAAI,CAAC,aAAa,EAAE,CAAC;KACtB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,IAAI,EAAC,MAAM,eACA,IAAI,CAAC,UAAU,IAE1B,8DAAa,EACZ,IAAI,CAAC,QAAQ,KACZ,4DAAK,KAAK,EAAC,qCAAqC,IAC9C,iEACE,OAAO,EAAE,aAAa,CAAC,QAAQ,EAC/B,IAAI,EAAC,iBAAiB,EACtB,IAAI,EAAE,WAAW,CAAC,OAAO,EACzB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,WAAW,GAAG,EAAwB,CAAC,EAC1D,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,GAC1C,EACF,kEACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,SAAS,GAAG,EAAyB,CAAC,EACzD,MAAM,EAAE,IAAI,CAAC,WAA0B,EACvC,YAAY,EAAE,CAAC,KAAK,MAAM,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAC9D,QAAQ,EAAE,eAAe,CAAC,QAAQ,IAElC,6DAAM,IAAI,EAAC,iBAAiB,GAAQ,CAC1B,CACR,CACP,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZTd"],"sources":["src/components/table/cells/z-td/styles.css?tag=z-td&encapsulation=shadow","src/components/table/cells/z-td/index.tsx"],"sourcesContent":["@import \"../z-table-cells.css\";\n","import {Component, Element, Event, EventEmitter, Host, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ButtonVariant, ControlSize, PopoverPosition, VisibilityCondition} from \"../../../../beans\";\n\n/**\n * ZTd component.\n * @slot - ZTd content.\n */\n@Component({\n tag: \"z-td\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZTd {\n @Element() host: HTMLZTdElement;\n\n /**\n * Number of columns that the cell should span.\n */\n @Prop()\n colspan: number;\n\n /**\n * Whether the cell should stick.\n */\n @Prop({reflect: true})\n sticky = false;\n\n /**\n * Enables the contextual menu.\n * Can be set to \"hover\" or \"always\" to show the button only on cell hover or always.\n * Set a nullish value to hide the menu button.\n */\n @Prop({reflect: true})\n showMenu: VisibilityCondition = null;\n\n /**\n * Store the open state of the menu.\n */\n @State()\n isMenuOpen = false;\n\n private menuTrigger: HTMLZButtonElement;\n\n private popoverEl: HTMLZPopoverElement;\n\n /**\n * Emitted when the value of the `colspan` changes.\n */\n @Event({\n bubbles: true,\n cancelable: false,\n })\n colspanChange: EventEmitter<number>;\n\n @Watch(\"colspan\")\n protected updateColspan(): void {\n if (this.colspan) {\n this.host.style.gridColumn = `span ${this.colspan}`;\n } else {\n this.host.style.removeProperty(\"grid-column\");\n }\n\n this.colspanChange.emit(this.colspan || 1);\n }\n\n private onMenuButtonClick(ev: MouseEvent): void {\n ev.stopPropagation();\n this.popoverEl.open = !this.popoverEl.open;\n }\n\n componentWillLoad(): void {\n this.updateColspan();\n }\n\n render(): HTMLZTdElement {\n return (\n <Host\n role=\"cell\"\n menu-open={this.isMenuOpen}\n >\n <slot></slot>\n {this.showMenu && (\n <div class=\"cell--menu-container prevent-expand\">\n <z-button\n variant={ButtonVariant.TERTIARY}\n icon=\"contextual-menu\"\n size={ControlSize.X_SMALL}\n ref={(el) => (this.menuTrigger = el as HTMLZButtonElement)}\n onClick={this.onMenuButtonClick.bind(this)}\n />\n <z-popover\n ref={(el) => (this.popoverEl = el as HTMLZPopoverElement)}\n bindTo={this.menuTrigger as HTMLElement}\n onOpenChange={(event) => (this.isMenuOpen = event.detail.open)}\n position={PopoverPosition.TOP_LEFT}\n >\n <slot name=\"contextual-menu\"></slot>\n </z-popover>\n </div>\n )}\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-ab5f1eaa.js';
|
|
2
2
|
import { r as randomId } from './utils-0ce33738.js';
|
|
3
|
-
import './index-
|
|
3
|
+
import './index-ec2c92ef.js';
|
|
4
4
|
import './index-13b9f20d.js';
|
|
5
5
|
|
|
6
6
|
const stylesCss = ":host{--columns:1;display:grid;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content;-webkit-box-sizing:border-box;box-sizing:border-box;grid-auto-flow:column;grid-template-columns:var(--z-table--expand-button-size, 0) repeat(var(--columns), minmax(128px, 1fr))}*{-webkit-box-sizing:border-box;box-sizing:border-box}.z-tr--expand-button-container,::slotted(*){border-bottom:var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03)}::slotted(*:not(:last-child)){border-right:var(--z-table--cell-left-border, none)}:host([expandable]){--show-expandable-button:visible;cursor:pointer}:host([expandable]) ::slotted(*){grid-row:1}:host([expandable]) ::slotted(:nth-last-child(2)){border-right:none}:host([expandable]) ::slotted(*:last-child){border-left:0;grid-column:1 / span calc(var(--columns) + 1);grid-row:2}:host([expandable]:not([expanded])) ::slotted(*:last-child){display:none}:host([expanded]){margin-bottom:4px;-webkit-box-shadow:0 4px 4px -2px var(--shadow-color-base);box-shadow:0 4px 4px -2px var(--shadow-color-base)}:host([expanded]) .z-tr--expand-button-container,:host([expanded]) ::slotted(*){background-color:var(--color-surface02)}.z-tr--expand-button-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background-color:var(--z-table--cells-background, var(--color-surface01))}.z-tr--expand-button-container button{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:0;border:none;margin:auto;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;cursor:pointer;visibility:var(--show-expandable-button, hidden)}.z-tr--expand-button-container button:focus{-webkit-box-shadow:var(--shadow-focus-primary);box-shadow:var(--shadow-focus-primary);outline:none}.z-tr--expand-button-container button z-icon{--z-icon-width:16px;--z-icon-height:16px}";
|
|
@@ -54,4 +54,4 @@ ZTr.style = ZTrStyle0;
|
|
|
54
54
|
|
|
55
55
|
export { ZTr as Z };
|
|
56
56
|
|
|
57
|
-
//# sourceMappingURL=index-
|
|
57
|
+
//# sourceMappingURL=index-12200e65.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"index-
|
|
1
|
+
{"file":"index-12200e65.js","mappings":";;;;;AAAA,MAAM,SAAS,GAAG,m9DAAm9D,CAAC;AACt+D,kBAAe,SAAS;;MCeX,GAAG;;;;0BAaD,KAAK;wBAMP,KAAK;;;IAeN,aAAa;QACrB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAkC,YAAY,CAAC,CAAC,CAAC;QACpG,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,KAAK,CAAC,GAAG,EAAE,CAAC;SACb;QAED,MAAM,OAAO,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;QAClF,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,WAAW,EAAE,GAAG,OAAO,EAAE,CAAC,CAAC;QAEvD,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,MAAM,iBAAiB,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC;YACtC,iBAAiB,CAAC,EAAE,GAAG,iBAAiB,CAAC,EAAE,IAAI,2BAA2B,QAAQ,EAAE,EAAE,CAAC;YACvF,IAAI,CAAC,mBAAmB,GAAG,iBAAiB,CAAC,EAAE,CAAC;SACjD;KACF;;;;;IAMO,UAAU,CAAC,KAAiB;QAClC,MAAM,aAAa,GAAI,KAAK,CAAC,MAAsB,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QAC/E,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,aAAa,EAAE;YACrC,OAAO;SACR;QAED,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;QAC/B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAC,CAAC,CAAC;KAC7C;IAED,iBAAiB;QACf,IAAI,CAAC,aAAa,EAAE,CAAC;KACtB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,IAAI,EAAC,KAAK,EACV,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,EACnC,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAEvB,4DAAK,KAAK,EAAC,+BAA+B,IACvC,IAAI,CAAC,UAAU,KACd,gFACiB,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,gBACnC,IAAI,CAAC,QAAQ,GAAG,eAAe,GAAG,cAAc,mBAC7C,IAAI,CAAC,mBAAmB,EACvC,IAAI,EAAC,QAAQ,IAEb,+DAAQ,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAG,eAAe,GAAG,cAAc,GAAW,CAClE,CACV,CACG,EACN,6DAAM,YAAY,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,GAAS,CACrD,EACP;KACH;;;;;;;;;;","names":[],"sources":["src/components/table/z-tr/styles.css?tag=z-tr&encapsulation=shadow","src/components/table/z-tr/index.tsx"],"sourcesContent":[":host {\n /* number of columns of the row. will be set in component's ts code */\n --columns: 1;\n\n display: grid;\n min-width: max-content;\n box-sizing: border-box;\n grid-auto-flow: column;\n grid-template-columns: var(--z-table--expand-button-size, 0) repeat(var(--columns), minmax(128px, 1fr));\n}\n\n* {\n box-sizing: border-box;\n}\n\n.z-tr--expand-button-container,\n::slotted(*) {\n border-bottom: var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03);\n}\n\n::slotted(*:not(:last-child)) {\n border-right: var(--z-table--cell-left-border, none);\n}\n\n:host([expandable]) {\n --show-expandable-button: visible;\n\n cursor: pointer;\n}\n\n:host([expandable]) ::slotted(*) {\n grid-row: 1;\n}\n\n:host([expandable]) ::slotted(:nth-last-child(2)) {\n border-right: none;\n}\n\n:host([expandable]) ::slotted(*:last-child) {\n border-left: 0;\n grid-column: 1 / span calc(var(--columns) + 1);\n grid-row: 2;\n}\n\n:host([expandable]:not([expanded])) ::slotted(*:last-child) {\n display: none;\n}\n\n:host([expanded]) {\n margin-bottom: 4px; /* prevents shadow to be cut by the next element */\n box-shadow: 0 4px 4px -2px var(--shadow-color-base);\n}\n\n:host([expanded]) .z-tr--expand-button-container,\n:host([expanded]) ::slotted(*) {\n background-color: var(--color-surface02);\n}\n\n.z-tr--expand-button-container {\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--z-table--cells-background, var(--color-surface01));\n}\n\n.z-tr--expand-button-container button {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n border: none;\n margin: auto;\n appearance: none;\n background: transparent;\n cursor: pointer;\n visibility: var(--show-expandable-button, hidden);\n}\n\n.z-tr--expand-button-container button:focus {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n.z-tr--expand-button-container button z-icon {\n --z-icon-width: 16px;\n --z-icon-height: 16px;\n}\n","import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {randomId} from \"../../../utils/utils\";\nimport \"../cells/z-td/index\";\nimport \"../cells/z-th/index\";\n\n/**\n * ZTr component.\n * When the row is `expandable`, you can set the `prevent-expand` css class on an interactive element inside the row\n * to prevent the row from expanding.\n * @slot - ZTr content (`z-td` or `z-th`).\n */\n@Component({\n tag: \"z-tr\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZTr {\n @Element() host: HTMLZTrElement;\n\n /**\n * Whether the row is expandable.\n * Use a `z-td` as the last cell of the row for the additional content.\n * It will show a button to expand/collapse the row.\n * The last cell will be hidden until the button or row is clicked.\n *\n * If some element inside the expandable row contains the `prevent-expand` css class,\n * the row will not expand by clicking that element.\n */\n @Prop({reflect: true})\n expandable = false;\n\n /**\n * Whether the row is currently expanded.\n */\n @State()\n expanded = false;\n\n /**\n * HTML Id of the expandable content.\n * It is used to link the button to the content through the `aria-controls` attribute.\n */\n @State()\n expandableContentId: string;\n\n /** Row has been expanded */\n @Event()\n expand: EventEmitter;\n\n @Watch(\"expandable\")\n @Listen(\"colspanchange\")\n protected updateColumns(): void {\n const cells = Array.from(this.host.querySelectorAll<HTMLZTdElement | HTMLZThElement>(\"z-td, z-th\"));\n if (this.expandable) {\n cells.pop();\n }\n\n const columns = cells.map((cell) => cell.colspan || 1).reduce((a, b) => a + b, 0);\n this.host.style.setProperty(\"--columns\", `${columns}`);\n\n if (this.expandable) {\n const expandableContent = cells.pop();\n expandableContent.id = expandableContent.id || `z-tr-expandable-content-${randomId()}`;\n this.expandableContentId = expandableContent.id;\n }\n }\n\n /**\n * Handle click on row.\n * Skip expansion if the click is on a element with `prevent-expand` css class.\n */\n private onRowClick(event: MouseEvent): void {\n const preventExpand = (event.target as HTMLElement).closest(\".prevent-expand\");\n if (!this.expandable || preventExpand) {\n return;\n }\n\n this.expanded = !this.expanded;\n this.expand.emit({expanded: this.expanded});\n }\n\n componentWillLoad(): void {\n this.updateColumns();\n }\n\n render(): HTMLZTrElement {\n return (\n <Host\n role=\"row\"\n onClick={this.onRowClick.bind(this)}\n expanded={this.expanded}\n >\n <div class=\"z-tr--expand-button-container\">\n {this.expandable && (\n <button\n aria-expanded={this.expanded ? \"true\" : \"false\"}\n aria-label={this.expanded ? \"Comprimi riga\" : \"Espandi riga\"}\n aria-controls={this.expandableContentId}\n type=\"button\"\n >\n <z-icon name={this.expanded ? \"minus-circled\" : \"plus-circled\"}></z-icon>\n </button>\n )}\n </div>\n <slot onSlotchange={this.updateColumns.bind(this)}></slot>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -30,7 +30,7 @@ const ZTd = class {
|
|
|
30
30
|
this.updateColspan();
|
|
31
31
|
}
|
|
32
32
|
render() {
|
|
33
|
-
return (h(Host, { key: 'c55f76a96674c7d8f7ecb7e0d47674bd57df37d1', role: "cell", "menu-open": this.isMenuOpen }, h("slot", { key: '951885f3ea1d35b7faf76b3b42279f70eadcc0b6' }), this.showMenu && (h("div", { key: '61954fde77683c2c724e04886613c55ce26ef5b6', class: "cell--menu-container prevent-expand" }, h("z-button", { key: '1d0a873ee74d69488113d62ebd6cb6000320bc94', variant: ButtonVariant.TERTIARY, icon: "contextual-menu", size: ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: this.onMenuButtonClick.bind(this) }), h("z-popover", { key: '
|
|
33
|
+
return (h(Host, { key: 'c55f76a96674c7d8f7ecb7e0d47674bd57df37d1', role: "cell", "menu-open": this.isMenuOpen }, h("slot", { key: '951885f3ea1d35b7faf76b3b42279f70eadcc0b6' }), this.showMenu && (h("div", { key: '61954fde77683c2c724e04886613c55ce26ef5b6', class: "cell--menu-container prevent-expand" }, h("z-button", { key: '1d0a873ee74d69488113d62ebd6cb6000320bc94', variant: ButtonVariant.TERTIARY, icon: "contextual-menu", size: ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: this.onMenuButtonClick.bind(this) }), h("z-popover", { key: 'ab8115335857e220dc205147d27cb3d7d6d44344', ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: PopoverPosition.TOP_LEFT }, h("slot", { key: '928e2e6e4e4628f9aa8f065506839e87a8017da0', name: "contextual-menu" }))))));
|
|
34
34
|
}
|
|
35
35
|
get host() { return getElement(this); }
|
|
36
36
|
static get watchers() { return {
|
|
@@ -41,4 +41,4 @@ ZTd.style = ZTdStyle0;
|
|
|
41
41
|
|
|
42
42
|
export { ZTd as Z };
|
|
43
43
|
|
|
44
|
-
//# sourceMappingURL=index-
|
|
44
|
+
//# sourceMappingURL=index-ec2c92ef.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"index-
|
|
1
|
+
{"file":"index-ec2c92ef.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,gvCAAgvC,CAAC;AACnwC,kBAAe,SAAS;;MCWX,GAAG;;;;;sBAaL,KAAK;wBAQkB,IAAI;0BAMvB,KAAK;;IAgBR,aAAa;QACrB,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,IAAI,CAAC,OAAO,EAAE,CAAC;SACrD;aAAM;YACL,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC;SAC/C;QAED,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC;KAC5C;IAEO,iBAAiB,CAAC,EAAc;QACtC,EAAE,CAAC,eAAe,EAAE,CAAC;QACrB,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;KAC5C;IAED,iBAAiB;QACf,IAAI,CAAC,aAAa,EAAE,CAAC;KACtB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,IAAI,EAAC,MAAM,eACA,IAAI,CAAC,UAAU,IAE1B,8DAAa,EACZ,IAAI,CAAC,QAAQ,KACZ,4DAAK,KAAK,EAAC,qCAAqC,IAC9C,iEACE,OAAO,EAAE,aAAa,CAAC,QAAQ,EAC/B,IAAI,EAAC,iBAAiB,EACtB,IAAI,EAAE,WAAW,CAAC,OAAO,EACzB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,WAAW,GAAG,EAAwB,CAAC,EAC1D,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,GAC1C,EACF,kEACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,SAAS,GAAG,EAAyB,CAAC,EACzD,MAAM,EAAE,IAAI,CAAC,WAA0B,EACvC,YAAY,EAAE,CAAC,KAAK,MAAM,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAC9D,QAAQ,EAAE,eAAe,CAAC,QAAQ,IAElC,6DAAM,IAAI,EAAC,iBAAiB,GAAQ,CAC1B,CACR,CACP,CACI,EACP;KACH;;;;;;;;;;","names":[],"sources":["src/components/table/cells/z-td/styles.css?tag=z-td&encapsulation=shadow","src/components/table/cells/z-td/index.tsx"],"sourcesContent":["@import \"../z-table-cells.css\";\n","import {Component, Element, Event, EventEmitter, Host, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ButtonVariant, ControlSize, PopoverPosition, VisibilityCondition} from \"../../../../beans\";\n\n/**\n * ZTd component.\n * @slot - ZTd content.\n */\n@Component({\n tag: \"z-td\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZTd {\n @Element() host: HTMLZTdElement;\n\n /**\n * Number of columns that the cell should span.\n */\n @Prop()\n colspan: number;\n\n /**\n * Whether the cell should stick.\n */\n @Prop({reflect: true})\n sticky = false;\n\n /**\n * Enables the contextual menu.\n * Can be set to \"hover\" or \"always\" to show the button only on cell hover or always.\n * Set a nullish value to hide the menu button.\n */\n @Prop({reflect: true})\n showMenu: VisibilityCondition = null;\n\n /**\n * Store the open state of the menu.\n */\n @State()\n isMenuOpen = false;\n\n private menuTrigger: HTMLZButtonElement;\n\n private popoverEl: HTMLZPopoverElement;\n\n /**\n * Emitted when the value of the `colspan` changes.\n */\n @Event({\n bubbles: true,\n cancelable: false,\n })\n colspanChange: EventEmitter<number>;\n\n @Watch(\"colspan\")\n protected updateColspan(): void {\n if (this.colspan) {\n this.host.style.gridColumn = `span ${this.colspan}`;\n } else {\n this.host.style.removeProperty(\"grid-column\");\n }\n\n this.colspanChange.emit(this.colspan || 1);\n }\n\n private onMenuButtonClick(ev: MouseEvent): void {\n ev.stopPropagation();\n this.popoverEl.open = !this.popoverEl.open;\n }\n\n componentWillLoad(): void {\n this.updateColspan();\n }\n\n render(): HTMLZTdElement {\n return (\n <Host\n role=\"cell\"\n menu-open={this.isMenuOpen}\n >\n <slot></slot>\n {this.showMenu && (\n <div class=\"cell--menu-container prevent-expand\">\n <z-button\n variant={ButtonVariant.TERTIARY}\n icon=\"contextual-menu\"\n size={ControlSize.X_SMALL}\n ref={(el) => (this.menuTrigger = el as HTMLZButtonElement)}\n onClick={this.onMenuButtonClick.bind(this)}\n />\n <z-popover\n ref={(el) => (this.popoverEl = el as HTMLZPopoverElement)}\n bindTo={this.menuTrigger as HTMLElement}\n onOpenChange={(event) => (this.isMenuOpen = event.detail.open)}\n position={PopoverPosition.TOP_LEFT}\n >\n <slot name=\"contextual-menu\"></slot>\n </z-popover>\n </div>\n )}\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -2,11 +2,11 @@ import { r as registerInstance, h, a as Host, g as getElement } from './index-ab
|
|
|
2
2
|
import './index-62dc7ee8.js';
|
|
3
3
|
import './index-b5bcd90e.js';
|
|
4
4
|
import './index-dc52118c.js';
|
|
5
|
-
import './index-
|
|
5
|
+
import './index-12200e65.js';
|
|
6
6
|
import './utils-0ce33738.js';
|
|
7
7
|
import './index-a7f69d42.js';
|
|
8
8
|
import './breakpoints-680e0e56.js';
|
|
9
|
-
import './index-
|
|
9
|
+
import './index-ec2c92ef.js';
|
|
10
10
|
import './index-13b9f20d.js';
|
|
11
11
|
|
|
12
12
|
const stylesCss = ":host{--z-table--cells-padding:calc(var(--space-unit) * 2);position:relative;display:block;overflow:auto;max-width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:var(--color-surface01)}:host([expandable]){--z-table--expand-button-size:40px}:host([bordered]){--z-table--cell-left-border:1px solid var(--color-surface03)}.table{min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content}";
|
package/dist/esm/z-td.entry.js
CHANGED
package/dist/esm/z-tr.entry.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
export { Z as z_tr } from './index-
|
|
1
|
+
export { Z as z_tr } from './index-12200e65.js';
|
|
2
2
|
import './index-ab5f1eaa.js';
|
|
3
3
|
import './utils-0ce33738.js';
|
|
4
4
|
import './index-a7f69d42.js';
|
|
5
5
|
import './breakpoints-680e0e56.js';
|
|
6
|
-
import './index-
|
|
6
|
+
import './index-ec2c92ef.js';
|
|
7
7
|
import './index-13b9f20d.js';
|
|
8
8
|
|
|
9
9
|
//# sourceMappingURL=z-tr.entry.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as registerInstance,c as createEvent,h,a as Host,g as getElement}from"./index-ab5f1eaa.js";import{r as randomId}from"./utils-0ce33738.js";import"./index-
|
|
2
|
-
//# sourceMappingURL=index-
|
|
1
|
+
import{r as registerInstance,c as createEvent,h,a as Host,g as getElement}from"./index-ab5f1eaa.js";import{r as randomId}from"./utils-0ce33738.js";import"./index-ec2c92ef.js";import"./index-13b9f20d.js";var stylesCss=":host{--columns:1;display:grid;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content;-webkit-box-sizing:border-box;box-sizing:border-box;grid-auto-flow:column;grid-template-columns:var(--z-table--expand-button-size, 0) repeat(var(--columns), minmax(128px, 1fr))}*{-webkit-box-sizing:border-box;box-sizing:border-box}.z-tr--expand-button-container,::slotted(*){border-bottom:var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03)}::slotted(*:not(:last-child)){border-right:var(--z-table--cell-left-border, none)}:host([expandable]){--show-expandable-button:visible;cursor:pointer}:host([expandable]) ::slotted(*){grid-row:1}:host([expandable]) ::slotted(:nth-last-child(2)){border-right:none}:host([expandable]) ::slotted(*:last-child){border-left:0;grid-column:1 / span calc(var(--columns) + 1);grid-row:2}:host([expandable]:not([expanded])) ::slotted(*:last-child){display:none}:host([expanded]){margin-bottom:4px;-webkit-box-shadow:0 4px 4px -2px var(--shadow-color-base);box-shadow:0 4px 4px -2px var(--shadow-color-base)}:host([expanded]) .z-tr--expand-button-container,:host([expanded]) ::slotted(*){background-color:var(--color-surface02)}.z-tr--expand-button-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background-color:var(--z-table--cells-background, var(--color-surface01))}.z-tr--expand-button-container button{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:0;border:none;margin:auto;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;cursor:pointer;visibility:var(--show-expandable-button, hidden)}.z-tr--expand-button-container button:focus{-webkit-box-shadow:var(--shadow-focus-primary);box-shadow:var(--shadow-focus-primary);outline:none}.z-tr--expand-button-container button z-icon{--z-icon-width:16px;--z-icon-height:16px}";var ZTrStyle0=stylesCss;var ZTr=function(){function e(e){registerInstance(this,e);this.expand=createEvent(this,"expand",7);this.expandable=false;this.expanded=false;this.expandableContentId=undefined}e.prototype.updateColumns=function(){var e=Array.from(this.host.querySelectorAll("z-td, z-th"));if(this.expandable){e.pop()}var t=e.map((function(e){return e.colspan||1})).reduce((function(e,t){return e+t}),0);this.host.style.setProperty("--columns","".concat(t));if(this.expandable){var n=e.pop();n.id=n.id||"z-tr-expandable-content-".concat(randomId());this.expandableContentId=n.id}};e.prototype.onRowClick=function(e){var t=e.target.closest(".prevent-expand");if(!this.expandable||t){return}this.expanded=!this.expanded;this.expand.emit({expanded:this.expanded})};e.prototype.componentWillLoad=function(){this.updateColumns()};e.prototype.render=function(){return h(Host,{key:"a7834f72abcf18e74ff16ff9dbbcb4e987f673df",role:"row",onClick:this.onRowClick.bind(this),expanded:this.expanded},h("div",{key:"badaec159c7abf449da9c7015fb2fa240ce14377",class:"z-tr--expand-button-container"},this.expandable&&h("button",{key:"6e312e5e8f907d05968b636f6368cda6397214eb","aria-expanded":this.expanded?"true":"false","aria-label":this.expanded?"Comprimi riga":"Espandi riga","aria-controls":this.expandableContentId,type:"button"},h("z-icon",{key:"e054cb205c4a81e1e88509300976133c21f27d0f",name:this.expanded?"minus-circled":"plus-circled"}))),h("slot",{key:"95b75f93a1c27d6245e8993dcdfeef3f614c1843",onSlotchange:this.updateColumns.bind(this)}))};Object.defineProperty(e.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{expandable:["updateColumns"]}},enumerable:false,configurable:true});return e}();ZTr.style=ZTrStyle0;export{ZTr as Z};
|
|
2
|
+
//# sourceMappingURL=index-12200e65.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as registerInstance,c as createEvent,h,a as Host,g as getElement}from"./index-ab5f1eaa.js";import{B as ButtonVariant,e as ControlSize,P as PopoverPosition}from"./index-a7f69d42.js";var stylesCss=':host{position:relative;display:-ms-flexbox;display:flex;min-width:128px;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-align:center;align-items:center;padding:var(--z-table--cells-padding, calc(var(--space-unit) * 2));background-color:var(--color-surface01);gap:calc(var(--space-unit) * 2) var(--space-unit)}:host([sticky]){position:-webkit-sticky;position:sticky;z-index:1;top:0;left:0;-webkit-box-shadow:8px 0 16px -8px var(--shadow-color-base);box-shadow:8px 0 16px -8px var(--shadow-color-base)}:host([show-menu])::after{display:inline-block;height:100%;margin-right:calc(var(--space-unit) * 4);background:transparent;content:"";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cell--menu-container{position:absolute;z-index:1;top:var(--space-unit);right:var(--space-unit)}:host(:not([show-menu])) .cell--menu-container{opacity:0;pointer-events:none}:host(:is([show-menu],[menu-open])) .cell--menu-container,:host([show-menu]) .cell--menu-container:focus-within{opacity:1;pointer-events:all}@media (min-width: 768px) and (hover: hover){:host([show-menu="hover"]) .cell--menu-container{opacity:0;pointer-events:none}:host([show-menu="hover"]:hover) .cell--menu-container{opacity:1;pointer-events:all}}';var ZTdStyle0=stylesCss;var ZTd=function(){function e(e){registerInstance(this,e);this.colspanChange=createEvent(this,"colspanChange",6);this.colspan=undefined;this.sticky=false;this.showMenu=null;this.isMenuOpen=false}e.prototype.updateColspan=function(){if(this.colspan){this.host.style.gridColumn="span ".concat(this.colspan)}else{this.host.style.removeProperty("grid-column")}this.colspanChange.emit(this.colspan||1)};e.prototype.onMenuButtonClick=function(e){e.stopPropagation();this.popoverEl.open=!this.popoverEl.open};e.prototype.componentWillLoad=function(){this.updateColspan()};e.prototype.render=function(){var e=this;return h(Host,{key:"c55f76a96674c7d8f7ecb7e0d47674bd57df37d1",role:"cell","menu-open":this.isMenuOpen},h("slot",{key:"951885f3ea1d35b7faf76b3b42279f70eadcc0b6"}),this.showMenu&&h("div",{key:"61954fde77683c2c724e04886613c55ce26ef5b6",class:"cell--menu-container prevent-expand"},h("z-button",{key:"1d0a873ee74d69488113d62ebd6cb6000320bc94",variant:ButtonVariant.TERTIARY,icon:"contextual-menu",size:ControlSize.X_SMALL,ref:function(n){return e.menuTrigger=n},onClick:this.onMenuButtonClick.bind(this)}),h("z-popover",{key:"
|
|
2
|
-
//# sourceMappingURL=index-
|
|
1
|
+
import{r as registerInstance,c as createEvent,h,a as Host,g as getElement}from"./index-ab5f1eaa.js";import{B as ButtonVariant,e as ControlSize,P as PopoverPosition}from"./index-a7f69d42.js";var stylesCss=':host{position:relative;display:-ms-flexbox;display:flex;min-width:128px;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-align:center;align-items:center;padding:var(--z-table--cells-padding, calc(var(--space-unit) * 2));background-color:var(--color-surface01);gap:calc(var(--space-unit) * 2) var(--space-unit)}:host([sticky]){position:-webkit-sticky;position:sticky;z-index:1;top:0;left:0;-webkit-box-shadow:8px 0 16px -8px var(--shadow-color-base);box-shadow:8px 0 16px -8px var(--shadow-color-base)}:host([show-menu])::after{display:inline-block;height:100%;margin-right:calc(var(--space-unit) * 4);background:transparent;content:"";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cell--menu-container{position:absolute;z-index:1;top:var(--space-unit);right:var(--space-unit)}:host(:not([show-menu])) .cell--menu-container{opacity:0;pointer-events:none}:host(:is([show-menu],[menu-open])) .cell--menu-container,:host([show-menu]) .cell--menu-container:focus-within{opacity:1;pointer-events:all}@media (min-width: 768px) and (hover: hover){:host([show-menu="hover"]) .cell--menu-container{opacity:0;pointer-events:none}:host([show-menu="hover"]:hover) .cell--menu-container{opacity:1;pointer-events:all}}';var ZTdStyle0=stylesCss;var ZTd=function(){function e(e){registerInstance(this,e);this.colspanChange=createEvent(this,"colspanChange",6);this.colspan=undefined;this.sticky=false;this.showMenu=null;this.isMenuOpen=false}e.prototype.updateColspan=function(){if(this.colspan){this.host.style.gridColumn="span ".concat(this.colspan)}else{this.host.style.removeProperty("grid-column")}this.colspanChange.emit(this.colspan||1)};e.prototype.onMenuButtonClick=function(e){e.stopPropagation();this.popoverEl.open=!this.popoverEl.open};e.prototype.componentWillLoad=function(){this.updateColspan()};e.prototype.render=function(){var e=this;return h(Host,{key:"c55f76a96674c7d8f7ecb7e0d47674bd57df37d1",role:"cell","menu-open":this.isMenuOpen},h("slot",{key:"951885f3ea1d35b7faf76b3b42279f70eadcc0b6"}),this.showMenu&&h("div",{key:"61954fde77683c2c724e04886613c55ce26ef5b6",class:"cell--menu-container prevent-expand"},h("z-button",{key:"1d0a873ee74d69488113d62ebd6cb6000320bc94",variant:ButtonVariant.TERTIARY,icon:"contextual-menu",size:ControlSize.X_SMALL,ref:function(n){return e.menuTrigger=n},onClick:this.onMenuButtonClick.bind(this)}),h("z-popover",{key:"ab8115335857e220dc205147d27cb3d7d6d44344",ref:function(n){return e.popoverEl=n},bindTo:this.menuTrigger,onOpenChange:function(n){return e.isMenuOpen=n.detail.open},position:PopoverPosition.TOP_LEFT},h("slot",{key:"928e2e6e4e4628f9aa8f065506839e87a8017da0",name:"contextual-menu"}))))};Object.defineProperty(e.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{colspan:["updateColspan"]}},enumerable:false,configurable:true});return e}();ZTd.style=ZTdStyle0;export{ZTd as Z};
|
|
2
|
+
//# sourceMappingURL=index-ec2c92ef.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["stylesCss","ZTdStyle0","ZTd","prototype","updateColspan","this","colspan","host","style","gridColumn","concat","removeProperty","colspanChange","emit","onMenuButtonClick","ev","stopPropagation","popoverEl","open","componentWillLoad","render","_this","h","Host","key","role","isMenuOpen","showMenu","class","variant","ButtonVariant","TERTIARY","icon","size","ControlSize","X_SMALL","ref","el","menuTrigger","onClick","bind","bindTo","onOpenChange","event","detail","position","PopoverPosition","TOP_LEFT","name"],"sources":["src/components/table/cells/z-td/styles.css?tag=z-td&encapsulation=shadow","src/components/table/cells/z-td/index.tsx"],"sourcesContent":["@import \"../z-table-cells.css\";\n","import {Component, Element, Event, EventEmitter, Host, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ButtonVariant, ControlSize, PopoverPosition, VisibilityCondition} from \"../../../../beans\";\n\n/**\n * ZTd component.\n * @slot - ZTd content.\n */\n@Component({\n tag: \"z-td\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZTd {\n @Element() host: HTMLZTdElement;\n\n /**\n * Number of columns that the cell should span.\n */\n @Prop()\n colspan: number;\n\n /**\n * Whether the cell should stick.\n */\n @Prop({reflect: true})\n sticky = false;\n\n /**\n * Enables the contextual menu.\n * Can be set to \"hover\" or \"always\" to show the button only on cell hover or always.\n * Set a nullish value to hide the menu button.\n */\n @Prop({reflect: true})\n showMenu: VisibilityCondition = null;\n\n /**\n * Store the open state of the menu.\n */\n @State()\n isMenuOpen = false;\n\n private menuTrigger: HTMLZButtonElement;\n\n private popoverEl: HTMLZPopoverElement;\n\n /**\n * Emitted when the value of the `colspan` changes.\n */\n @Event({\n bubbles: true,\n cancelable: false,\n })\n colspanChange: EventEmitter<number>;\n\n @Watch(\"colspan\")\n protected updateColspan(): void {\n if (this.colspan) {\n this.host.style.gridColumn = `span ${this.colspan}`;\n } else {\n this.host.style.removeProperty(\"grid-column\");\n }\n\n this.colspanChange.emit(this.colspan || 1);\n }\n\n private onMenuButtonClick(ev: MouseEvent): void {\n ev.stopPropagation();\n this.popoverEl.open = !this.popoverEl.open;\n }\n\n componentWillLoad(): void {\n this.updateColspan();\n }\n\n render(): HTMLZTdElement {\n return (\n <Host\n role=\"cell\"\n menu-open={this.isMenuOpen}\n >\n <slot></slot>\n {this.showMenu && (\n <div class=\"cell--menu-container prevent-expand\">\n <z-button\n variant={ButtonVariant.TERTIARY}\n icon=\"contextual-menu\"\n size={ControlSize.X_SMALL}\n ref={(el) => (this.menuTrigger = el as HTMLZButtonElement)}\n onClick={this.onMenuButtonClick.bind(this)}\n />\n <z-popover\n ref={(el) => (this.popoverEl = el as HTMLZPopoverElement)}\n bindTo={this.menuTrigger as HTMLElement}\n onOpenChange={(event) => (this.isMenuOpen = event.detail.open)}\n position={PopoverPosition.TOP_LEFT}\n >\n <slot name=\"contextual-menu\"></slot>\n </z-popover>\n </div>\n )}\n </Host>\n );\n }\n}\n"],"mappings":"8LAAA,IAAMA,UAAY,2uCAClB,IAAAC,UAAeD,U,ICWFE,IAAG,W,iIAaL,M,cAQuB,K,gBAMnB,K,CAgBHA,EAAAC,UAAAC,cAAA,WACR,GAAIC,KAAKC,QAAS,CAChBD,KAAKE,KAAKC,MAAMC,WAAa,QAAAC,OAAQL,KAAKC,Q,KACrC,CACLD,KAAKE,KAAKC,MAAMG,eAAe,c,CAGjCN,KAAKO,cAAcC,KAAKR,KAAKC,SAAW,E,EAGlCJ,EAAAC,UAAAW,kBAAA,SAAkBC,GACxBA,EAAGC,kBACHX,KAAKY,UAAUC,MAAQb,KAAKY,UAAUC,I,EAGxChB,EAAAC,UAAAgB,kBAAA,WACEd,KAAKD,e,EAGPF,EAAAC,UAAAiB,OAAA,eAAAC,EAAAhB,KACE,OACEiB,EAACC,KAAI,CAAAC,IAAA,2CACHC,KAAK,OAAM,YACApB,KAAKqB,YAEhBJ,EAAA,QAAAE,IAAA,6CACCnB,KAAKsB,UACJL,EAAA,OAAAE,IAAA,2CAAKI,MAAM,uCACTN,EAAA,YAAAE,IAAA,2CACEK,QAASC,cAAcC,SACvBC,KAAK,kBACLC,KAAMC,YAAYC,QAClBC,IAAK,SAACC,GAAE,OAAMhB,EAAKiB,YAAcD,CAAzB,EACRE,QAASlC,KAAKS,kBAAkB0B,KAAKnC,QAEvCiB,EAAA,aAAAE,IAAA,2CACEY,IAAK,SAACC,GAAE,OAAMhB,EAAKJ,UAAYoB,CAAvB,EACRI,OAAQpC,KAAKiC,YACbI,aAAc,SAACC,GAAK,OAAMtB,EAAKK,WAAaiB,EAAMC,OAAO1B,IAArC,EACpB2B,SAAUC,gBAAgBC,UAE1BzB,EAAA,QAAAE,IAAA,2CAAMwB,KAAK,sB,6PApFT,G","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as registerInstance,h,a as Host,g as getElement}from"./index-ab5f1eaa.js";import"./index-62dc7ee8.js";import"./index-b5bcd90e.js";import"./index-dc52118c.js";import"./index-
|
|
1
|
+
import{r as registerInstance,h,a as Host,g as getElement}from"./index-ab5f1eaa.js";import"./index-62dc7ee8.js";import"./index-b5bcd90e.js";import"./index-dc52118c.js";import"./index-12200e65.js";import"./utils-0ce33738.js";import"./index-a7f69d42.js";import"./breakpoints-680e0e56.js";import"./index-ec2c92ef.js";import"./index-13b9f20d.js";var stylesCss=":host{--z-table--cells-padding:calc(var(--space-unit) * 2);position:relative;display:block;overflow:auto;max-width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:var(--color-surface01)}:host([expandable]){--z-table--expand-button-size:40px}:host([bordered]){--z-table--cell-left-border:1px solid var(--color-surface03)}.table{min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content}";var ZTableStyle0=stylesCss;var ZTable=function(){function e(e){registerInstance(this,e);this.bordered=false;this.expandable=false}e.prototype.updateExpandable=function(){this.expandable=this.host.querySelectorAll("z-tr[expandable]").length>0};e.prototype.componentWillLoad=function(){var e=this;this.expandableMutationObserver=new MutationObserver((function(){e.updateExpandable()}));this.expandableMutationObserver.observe(this.host,{childList:true,subtree:true,attributes:true,attributeFilter:["expandable"],attributeOldValue:false})};e.prototype.disconnectedCallback=function(){var e;(e=this.expandableMutationObserver)===null||e===void 0?void 0:e.disconnect()};e.prototype.render=function(){return h(Host,{key:"5f7370afd7912583561ac67baf5b70921c49eea2",expandable:this.expandable},h("div",{key:"8cbf774ffe599cf49ed9377c2ff3c1e0e8d14e85",class:"table",role:"table"},h("slot",{key:"318eceb0c4e486a49faab1fe7027acfa76456352"})))};Object.defineProperty(e.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});return e}();ZTable.style=ZTableStyle0;export{ZTable as z_table};
|
|
2
2
|
//# sourceMappingURL=z-table.entry.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export{Z as z_td}from"./index-
|
|
1
|
+
export{Z as z_td}from"./index-ec2c92ef.js";import"./index-ab5f1eaa.js";import"./index-a7f69d42.js";
|
|
2
2
|
//# sourceMappingURL=z-td.entry.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export{Z as z_tr}from"./index-
|
|
1
|
+
export{Z as z_tr}from"./index-12200e65.js";import"./index-ab5f1eaa.js";import"./utils-0ce33738.js";import"./index-a7f69d42.js";import"./breakpoints-680e0e56.js";import"./index-ec2c92ef.js";import"./index-13b9f20d.js";
|
|
2
2
|
//# sourceMappingURL=z-tr.entry.js.map
|
package/dist/web-components-library/{p-62924c1f.system.entry.js → p-120094fd.system.entry.js}
RENAMED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
System.register(["./p-
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
System.register(["./p-aa60a8ab.system.js","./p-d8fcaf1f.system.js","./p-b7c12f65.system.js","./p-5c2716b2.system.js","./p-ad6b3f77.system.js","./p-a189d455.system.js","./p-3910b56f.system.js"],(function(s){"use strict";return{setters:[function(t){s("z_tr",t.Z)},function(){},function(){},function(){},function(){},function(){},function(){}],execute:function(){}}}));
|
|
2
|
+
//# sourceMappingURL=p-120094fd.system.entry.js.map
|
package/dist/web-components-library/{p-437b4abd.system.entry.js → p-21373a0f.system.entry.js}
RENAMED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
System.register(["./p-d8fcaf1f.system.js","./p-5377560b.system.js","./p-78e791de.system.js","./p-fcfc9ec7.system.js","./p-
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
System.register(["./p-d8fcaf1f.system.js","./p-5377560b.system.js","./p-78e791de.system.js","./p-fcfc9ec7.system.js","./p-aa60a8ab.system.js","./p-b7c12f65.system.js","./p-5c2716b2.system.js","./p-ad6b3f77.system.js","./p-a189d455.system.js","./p-3910b56f.system.js"],(function(t){"use strict";var e,s,n,a;return{setters:[function(t){e=t.r;s=t.h;n=t.a;a=t.g},function(){},function(){},function(){},function(){},function(){},function(){},function(){},function(){},function(){}],execute:function(){var i=":host{--z-table--cells-padding:calc(var(--space-unit) * 2);position:relative;display:block;overflow:auto;max-width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:var(--color-surface01)}:host([expandable]){--z-table--expand-button-size:40px}:host([bordered]){--z-table--cell-left-border:1px solid var(--color-surface03)}.table{min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content}";var o=i;var c=t("z_table",function(){function t(t){e(this,t);this.bordered=false;this.expandable=false}t.prototype.updateExpandable=function(){this.expandable=this.host.querySelectorAll("z-tr[expandable]").length>0};t.prototype.componentWillLoad=function(){var t=this;this.expandableMutationObserver=new MutationObserver((function(){t.updateExpandable()}));this.expandableMutationObserver.observe(this.host,{childList:true,subtree:true,attributes:true,attributeFilter:["expandable"],attributeOldValue:false})};t.prototype.disconnectedCallback=function(){var t;(t=this.expandableMutationObserver)===null||t===void 0?void 0:t.disconnect()};t.prototype.render=function(){return s(n,{key:"5f7370afd7912583561ac67baf5b70921c49eea2",expandable:this.expandable},s("div",{key:"8cbf774ffe599cf49ed9377c2ff3c1e0e8d14e85",class:"table",role:"table"},s("slot",{key:"318eceb0c4e486a49faab1fe7027acfa76456352"})))};Object.defineProperty(t.prototype,"host",{get:function(){return a(this)},enumerable:false,configurable:true});return t}());c.style=o}}}));
|
|
2
|
+
//# sourceMappingURL=p-21373a0f.system.entry.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as e,h as t,a,g as o}from"./p-cc3c02fe.js";import"./p-1329313c.js";import"./p-6ea22865.js";import"./p-1011353e.js";import"./p-
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as e,h as t,a,g as o}from"./p-cc3c02fe.js";import"./p-1329313c.js";import"./p-6ea22865.js";import"./p-1011353e.js";import"./p-66ea91eb.js";import"./p-66d70fb4.js";import"./p-3de034cf.js";import"./p-2c886e8b.js";import"./p-4224a835.js";import"./p-983722fb.js";const s=":host{--z-table--cells-padding:calc(var(--space-unit) * 2);position:relative;display:block;overflow:auto;max-width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:var(--color-surface01)}:host([expandable]){--z-table--expand-button-size:40px}:host([bordered]){--z-table--cell-left-border:1px solid var(--color-surface03)}.table{min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content}";const i=s;const r=class{constructor(t){e(this,t);this.bordered=false;this.expandable=false}updateExpandable(){this.expandable=this.host.querySelectorAll("z-tr[expandable]").length>0}componentWillLoad(){this.expandableMutationObserver=new MutationObserver((()=>{this.updateExpandable()}));this.expandableMutationObserver.observe(this.host,{childList:true,subtree:true,attributes:true,attributeFilter:["expandable"],attributeOldValue:false})}disconnectedCallback(){var e;(e=this.expandableMutationObserver)===null||e===void 0?void 0:e.disconnect()}render(){return t(a,{key:"5f7370afd7912583561ac67baf5b70921c49eea2",expandable:this.expandable},t("div",{key:"8cbf774ffe599cf49ed9377c2ff3c1e0e8d14e85",class:"table",role:"table"},t("slot",{key:"318eceb0c4e486a49faab1fe7027acfa76456352"})))}get host(){return o(this)}};r.style=i;export{r as z_table};
|
|
2
|
+
//# sourceMappingURL=p-3adbc722.entry.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as e,c as t,h as n,a as s,g as o}from"./p-cc3c02fe.js";import{B as i,e as a,P as c}from"./p-3de034cf.js";const r=':host{position:relative;display:-ms-flexbox;display:flex;min-width:128px;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-align:center;align-items:center;padding:var(--z-table--cells-padding, calc(var(--space-unit) * 2));background-color:var(--color-surface01);gap:calc(var(--space-unit) * 2) var(--space-unit)}:host([sticky]){position:-webkit-sticky;position:sticky;z-index:1;top:0;left:0;-webkit-box-shadow:8px 0 16px -8px var(--shadow-color-base);box-shadow:8px 0 16px -8px var(--shadow-color-base)}:host([show-menu])::after{display:inline-block;height:100%;margin-right:calc(var(--space-unit) * 4);background:transparent;content:"";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cell--menu-container{position:absolute;z-index:1;top:var(--space-unit);right:var(--space-unit)}:host(:not([show-menu])) .cell--menu-container{opacity:0;pointer-events:none}:host(:is([show-menu],[menu-open])) .cell--menu-container,:host([show-menu]) .cell--menu-container:focus-within{opacity:1;pointer-events:all}@media (min-width: 768px) and (hover: hover){:host([show-menu="hover"]) .cell--menu-container{opacity:0;pointer-events:none}:host([show-menu="hover"]:hover) .cell--menu-container{opacity:1;pointer-events:all}}';const l=r;const h=class{constructor(n){e(this,n);this.colspanChange=t(this,"colspanChange",6);this.colspan=undefined;this.sticky=false;this.showMenu=null;this.isMenuOpen=false}updateColspan(){if(this.colspan){this.host.style.gridColumn=`span ${this.colspan}`}else{this.host.style.removeProperty("grid-column")}this.colspanChange.emit(this.colspan||1)}onMenuButtonClick(e){e.stopPropagation();this.popoverEl.open=!this.popoverEl.open}componentWillLoad(){this.updateColspan()}render(){return n(s,{key:"c55f76a96674c7d8f7ecb7e0d47674bd57df37d1",role:"cell","menu-open":this.isMenuOpen},n("slot",{key:"951885f3ea1d35b7faf76b3b42279f70eadcc0b6"}),this.showMenu&&n("div",{key:"61954fde77683c2c724e04886613c55ce26ef5b6",class:"cell--menu-container prevent-expand"},n("z-button",{key:"1d0a873ee74d69488113d62ebd6cb6000320bc94",variant:i.TERTIARY,icon:"contextual-menu",size:a.X_SMALL,ref:e=>this.menuTrigger=e,onClick:this.onMenuButtonClick.bind(this)}),n("z-popover",{key:"
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as e,c as t,h as n,a as s,g as o}from"./p-cc3c02fe.js";import{B as i,e as a,P as c}from"./p-3de034cf.js";const r=':host{position:relative;display:-ms-flexbox;display:flex;min-width:128px;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-align:center;align-items:center;padding:var(--z-table--cells-padding, calc(var(--space-unit) * 2));background-color:var(--color-surface01);gap:calc(var(--space-unit) * 2) var(--space-unit)}:host([sticky]){position:-webkit-sticky;position:sticky;z-index:1;top:0;left:0;-webkit-box-shadow:8px 0 16px -8px var(--shadow-color-base);box-shadow:8px 0 16px -8px var(--shadow-color-base)}:host([show-menu])::after{display:inline-block;height:100%;margin-right:calc(var(--space-unit) * 4);background:transparent;content:"";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cell--menu-container{position:absolute;z-index:1;top:var(--space-unit);right:var(--space-unit)}:host(:not([show-menu])) .cell--menu-container{opacity:0;pointer-events:none}:host(:is([show-menu],[menu-open])) .cell--menu-container,:host([show-menu]) .cell--menu-container:focus-within{opacity:1;pointer-events:all}@media (min-width: 768px) and (hover: hover){:host([show-menu="hover"]) .cell--menu-container{opacity:0;pointer-events:none}:host([show-menu="hover"]:hover) .cell--menu-container{opacity:1;pointer-events:all}}';const l=r;const h=class{constructor(n){e(this,n);this.colspanChange=t(this,"colspanChange",6);this.colspan=undefined;this.sticky=false;this.showMenu=null;this.isMenuOpen=false}updateColspan(){if(this.colspan){this.host.style.gridColumn=`span ${this.colspan}`}else{this.host.style.removeProperty("grid-column")}this.colspanChange.emit(this.colspan||1)}onMenuButtonClick(e){e.stopPropagation();this.popoverEl.open=!this.popoverEl.open}componentWillLoad(){this.updateColspan()}render(){return n(s,{key:"c55f76a96674c7d8f7ecb7e0d47674bd57df37d1",role:"cell","menu-open":this.isMenuOpen},n("slot",{key:"951885f3ea1d35b7faf76b3b42279f70eadcc0b6"}),this.showMenu&&n("div",{key:"61954fde77683c2c724e04886613c55ce26ef5b6",class:"cell--menu-container prevent-expand"},n("z-button",{key:"1d0a873ee74d69488113d62ebd6cb6000320bc94",variant:i.TERTIARY,icon:"contextual-menu",size:a.X_SMALL,ref:e=>this.menuTrigger=e,onClick:this.onMenuButtonClick.bind(this)}),n("z-popover",{key:"ab8115335857e220dc205147d27cb3d7d6d44344",ref:e=>this.popoverEl=e,bindTo:this.menuTrigger,onOpenChange:e=>this.isMenuOpen=e.detail.open,position:c.TOP_LEFT},n("slot",{key:"928e2e6e4e4628f9aa8f065506839e87a8017da0",name:"contextual-menu"}))))}get host(){return o(this)}static get watchers(){return{colspan:["updateColspan"]}}};h.style=l;export{h as Z};
|
|
2
|
+
//# sourceMappingURL=p-4224a835.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["stylesCss","ZTdStyle0","ZTd","updateColspan","this","colspan","host","style","gridColumn","removeProperty","colspanChange","emit","onMenuButtonClick","ev","stopPropagation","popoverEl","open","componentWillLoad","render","h","Host","key","role","isMenuOpen","showMenu","class","variant","ButtonVariant","TERTIARY","icon","size","ControlSize","X_SMALL","ref","el","menuTrigger","onClick","bind","bindTo","onOpenChange","event","detail","position","PopoverPosition","TOP_LEFT","name"],"sources":["src/components/table/cells/z-td/styles.css?tag=z-td&encapsulation=shadow","src/components/table/cells/z-td/index.tsx"],"sourcesContent":["@import \"../z-table-cells.css\";\n","import {Component, Element, Event, EventEmitter, Host, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ButtonVariant, ControlSize, PopoverPosition, VisibilityCondition} from \"../../../../beans\";\n\n/**\n * ZTd component.\n * @slot - ZTd content.\n */\n@Component({\n tag: \"z-td\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZTd {\n @Element() host: HTMLZTdElement;\n\n /**\n * Number of columns that the cell should span.\n */\n @Prop()\n colspan: number;\n\n /**\n * Whether the cell should stick.\n */\n @Prop({reflect: true})\n sticky = false;\n\n /**\n * Enables the contextual menu.\n * Can be set to \"hover\" or \"always\" to show the button only on cell hover or always.\n * Set a nullish value to hide the menu button.\n */\n @Prop({reflect: true})\n showMenu: VisibilityCondition = null;\n\n /**\n * Store the open state of the menu.\n */\n @State()\n isMenuOpen = false;\n\n private menuTrigger: HTMLZButtonElement;\n\n private popoverEl: HTMLZPopoverElement;\n\n /**\n * Emitted when the value of the `colspan` changes.\n */\n @Event({\n bubbles: true,\n cancelable: false,\n })\n colspanChange: EventEmitter<number>;\n\n @Watch(\"colspan\")\n protected updateColspan(): void {\n if (this.colspan) {\n this.host.style.gridColumn = `span ${this.colspan}`;\n } else {\n this.host.style.removeProperty(\"grid-column\");\n }\n\n this.colspanChange.emit(this.colspan || 1);\n }\n\n private onMenuButtonClick(ev: MouseEvent): void {\n ev.stopPropagation();\n this.popoverEl.open = !this.popoverEl.open;\n }\n\n componentWillLoad(): void {\n this.updateColspan();\n }\n\n render(): HTMLZTdElement {\n return (\n <Host\n role=\"cell\"\n menu-open={this.isMenuOpen}\n >\n <slot></slot>\n {this.showMenu && (\n <div class=\"cell--menu-container prevent-expand\">\n <z-button\n variant={ButtonVariant.TERTIARY}\n icon=\"contextual-menu\"\n size={ControlSize.X_SMALL}\n ref={(el) => (this.menuTrigger = el as HTMLZButtonElement)}\n onClick={this.onMenuButtonClick.bind(this)}\n />\n <z-popover\n ref={(el) => (this.popoverEl = el as HTMLZPopoverElement)}\n bindTo={this.menuTrigger as HTMLElement}\n onOpenChange={(event) => (this.isMenuOpen = event.detail.open)}\n position={PopoverPosition.TOP_LEFT}\n >\n <slot name=\"contextual-menu\"></slot>\n </z-popover>\n </div>\n )}\n </Host>\n );\n }\n}\n"],"mappings":"kHAAA,MAAMA,EAAY,2uCAClB,MAAAC,EAAeD,E,MCWFE,EAAG,M,yGAaL,M,cAQuB,K,gBAMnB,K,CAgBH,aAAAC,GACR,GAAIC,KAAKC,QAAS,CAChBD,KAAKE,KAAKC,MAAMC,WAAa,QAAQJ,KAAKC,S,KACrC,CACLD,KAAKE,KAAKC,MAAME,eAAe,c,CAGjCL,KAAKM,cAAcC,KAAKP,KAAKC,SAAW,E,CAGlC,iBAAAO,CAAkBC,GACxBA,EAAGC,kBACHV,KAAKW,UAAUC,MAAQZ,KAAKW,UAAUC,I,CAGxC,iBAAAC,GACEb,KAAKD,e,CAGP,MAAAe,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,KAAK,OAAM,YACAlB,KAAKmB,YAEhBJ,EAAA,QAAAE,IAAA,6CACCjB,KAAKoB,UACJL,EAAA,OAAAE,IAAA,2CAAKI,MAAM,uCACTN,EAAA,YAAAE,IAAA,2CACEK,QAASC,EAAcC,SACvBC,KAAK,kBACLC,KAAMC,EAAYC,QAClBC,IAAMC,GAAQ9B,KAAK+B,YAAcD,EACjCE,QAAShC,KAAKQ,kBAAkByB,KAAKjC,QAEvCe,EAAA,aAAAE,IAAA,2CACEY,IAAMC,GAAQ9B,KAAKW,UAAYmB,EAC/BI,OAAQlC,KAAK+B,YACbI,aAAeC,GAAWpC,KAAKmB,WAAaiB,EAAMC,OAAOzB,KACzD0B,SAAUC,EAAgBC,UAE1BzB,EAAA,QAAAE,IAAA,2CAAMwB,KAAK,sB","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as t,c as e,h as o,a,g as n}from"./p-cc3c02fe.js";import{r}from"./p-66d70fb4.js";import"./p-
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as t,c as e,h as o,a,g as n}from"./p-cc3c02fe.js";import{r}from"./p-66d70fb4.js";import"./p-4224a835.js";import"./p-983722fb.js";const s=":host{--columns:1;display:grid;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content;-webkit-box-sizing:border-box;box-sizing:border-box;grid-auto-flow:column;grid-template-columns:var(--z-table--expand-button-size, 0) repeat(var(--columns), minmax(128px, 1fr))}*{-webkit-box-sizing:border-box;box-sizing:border-box}.z-tr--expand-button-container,::slotted(*){border-bottom:var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03)}::slotted(*:not(:last-child)){border-right:var(--z-table--cell-left-border, none)}:host([expandable]){--show-expandable-button:visible;cursor:pointer}:host([expandable]) ::slotted(*){grid-row:1}:host([expandable]) ::slotted(:nth-last-child(2)){border-right:none}:host([expandable]) ::slotted(*:last-child){border-left:0;grid-column:1 / span calc(var(--columns) + 1);grid-row:2}:host([expandable]:not([expanded])) ::slotted(*:last-child){display:none}:host([expanded]){margin-bottom:4px;-webkit-box-shadow:0 4px 4px -2px var(--shadow-color-base);box-shadow:0 4px 4px -2px var(--shadow-color-base)}:host([expanded]) .z-tr--expand-button-container,:host([expanded]) ::slotted(*){background-color:var(--color-surface02)}.z-tr--expand-button-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background-color:var(--z-table--cells-background, var(--color-surface01))}.z-tr--expand-button-container button{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:0;border:none;margin:auto;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;cursor:pointer;visibility:var(--show-expandable-button, hidden)}.z-tr--expand-button-container button:focus{-webkit-box-shadow:var(--shadow-focus-primary);box-shadow:var(--shadow-focus-primary);outline:none}.z-tr--expand-button-container button z-icon{--z-icon-width:16px;--z-icon-height:16px}";const i=s;const d=class{constructor(o){t(this,o);this.expand=e(this,"expand",7);this.expandable=false;this.expanded=false;this.expandableContentId=undefined}updateColumns(){const t=Array.from(this.host.querySelectorAll("z-td, z-th"));if(this.expandable){t.pop()}const e=t.map((t=>t.colspan||1)).reduce(((t,e)=>t+e),0);this.host.style.setProperty("--columns",`${e}`);if(this.expandable){const e=t.pop();e.id=e.id||`z-tr-expandable-content-${r()}`;this.expandableContentId=e.id}}onRowClick(t){const e=t.target.closest(".prevent-expand");if(!this.expandable||e){return}this.expanded=!this.expanded;this.expand.emit({expanded:this.expanded})}componentWillLoad(){this.updateColumns()}render(){return o(a,{key:"a7834f72abcf18e74ff16ff9dbbcb4e987f673df",role:"row",onClick:this.onRowClick.bind(this),expanded:this.expanded},o("div",{key:"badaec159c7abf449da9c7015fb2fa240ce14377",class:"z-tr--expand-button-container"},this.expandable&&o("button",{key:"6e312e5e8f907d05968b636f6368cda6397214eb","aria-expanded":this.expanded?"true":"false","aria-label":this.expanded?"Comprimi riga":"Espandi riga","aria-controls":this.expandableContentId,type:"button"},o("z-icon",{key:"e054cb205c4a81e1e88509300976133c21f27d0f",name:this.expanded?"minus-circled":"plus-circled"}))),o("slot",{key:"95b75f93a1c27d6245e8993dcdfeef3f614c1843",onSlotchange:this.updateColumns.bind(this)}))}get host(){return n(this)}static get watchers(){return{expandable:["updateColumns"]}}};d.style=i;export{d as Z};
|
|
2
|
+
//# sourceMappingURL=p-66ea91eb.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
System.register(["./p-d8fcaf1f.system.js","./p-5c2716b2.system.js"],(function(e){"use strict";var n,t,i,o,s,c,
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
System.register(["./p-d8fcaf1f.system.js","./p-5c2716b2.system.js"],(function(e){"use strict";var n,t,i,o,s,a,c,r;return{setters:[function(e){n=e.r;t=e.c;i=e.h;o=e.a;s=e.g},function(e){a=e.B;c=e.e;r=e.P}],execute:function(){var u=':host{position:relative;display:-ms-flexbox;display:flex;min-width:128px;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-align:center;align-items:center;padding:var(--z-table--cells-padding, calc(var(--space-unit) * 2));background-color:var(--color-surface01);gap:calc(var(--space-unit) * 2) var(--space-unit)}:host([sticky]){position:-webkit-sticky;position:sticky;z-index:1;top:0;left:0;-webkit-box-shadow:8px 0 16px -8px var(--shadow-color-base);box-shadow:8px 0 16px -8px var(--shadow-color-base)}:host([show-menu])::after{display:inline-block;height:100%;margin-right:calc(var(--space-unit) * 4);background:transparent;content:"";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cell--menu-container{position:absolute;z-index:1;top:var(--space-unit);right:var(--space-unit)}:host(:not([show-menu])) .cell--menu-container{opacity:0;pointer-events:none}:host(:is([show-menu],[menu-open])) .cell--menu-container,:host([show-menu]) .cell--menu-container:focus-within{opacity:1;pointer-events:all}@media (min-width: 768px) and (hover: hover){:host([show-menu="hover"]) .cell--menu-container{opacity:0;pointer-events:none}:host([show-menu="hover"]:hover) .cell--menu-container{opacity:1;pointer-events:all}}';var l=u;var h=e("Z",function(){function e(e){n(this,e);this.colspanChange=t(this,"colspanChange",6);this.colspan=undefined;this.sticky=false;this.showMenu=null;this.isMenuOpen=false}e.prototype.updateColspan=function(){if(this.colspan){this.host.style.gridColumn="span ".concat(this.colspan)}else{this.host.style.removeProperty("grid-column")}this.colspanChange.emit(this.colspan||1)};e.prototype.onMenuButtonClick=function(e){e.stopPropagation();this.popoverEl.open=!this.popoverEl.open};e.prototype.componentWillLoad=function(){this.updateColspan()};e.prototype.render=function(){var e=this;return i(o,{key:"c55f76a96674c7d8f7ecb7e0d47674bd57df37d1",role:"cell","menu-open":this.isMenuOpen},i("slot",{key:"951885f3ea1d35b7faf76b3b42279f70eadcc0b6"}),this.showMenu&&i("div",{key:"61954fde77683c2c724e04886613c55ce26ef5b6",class:"cell--menu-container prevent-expand"},i("z-button",{key:"1d0a873ee74d69488113d62ebd6cb6000320bc94",variant:a.TERTIARY,icon:"contextual-menu",size:c.X_SMALL,ref:function(n){return e.menuTrigger=n},onClick:this.onMenuButtonClick.bind(this)}),i("z-popover",{key:"ab8115335857e220dc205147d27cb3d7d6d44344",ref:function(n){return e.popoverEl=n},bindTo:this.menuTrigger,onOpenChange:function(n){return e.isMenuOpen=n.detail.open},position:r.TOP_LEFT},i("slot",{key:"928e2e6e4e4628f9aa8f065506839e87a8017da0",name:"contextual-menu"}))))};Object.defineProperty(e.prototype,"host",{get:function(){return s(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{colspan:["updateColspan"]}},enumerable:false,configurable:true});return e}());h.style=l}}}));
|
|
2
|
+
//# sourceMappingURL=p-a189d455.system.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["stylesCss","ZTdStyle0","ZTd","exports","class_1","prototype","updateColspan","this","colspan","host","style","gridColumn","concat","removeProperty","colspanChange","emit","onMenuButtonClick","ev","stopPropagation","popoverEl","open","componentWillLoad","render","_this","h","Host","key","role","isMenuOpen","showMenu","class","variant","ButtonVariant","TERTIARY","icon","size","ControlSize","X_SMALL","ref","el","menuTrigger","onClick","bind","bindTo","onOpenChange","event","detail","position","PopoverPosition","TOP_LEFT","name"],"sources":["src/components/table/cells/z-td/styles.css?tag=z-td&encapsulation=shadow","src/components/table/cells/z-td/index.tsx"],"sourcesContent":["@import \"../z-table-cells.css\";\n","import {Component, Element, Event, EventEmitter, Host, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ButtonVariant, ControlSize, PopoverPosition, VisibilityCondition} from \"../../../../beans\";\n\n/**\n * ZTd component.\n * @slot - ZTd content.\n */\n@Component({\n tag: \"z-td\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZTd {\n @Element() host: HTMLZTdElement;\n\n /**\n * Number of columns that the cell should span.\n */\n @Prop()\n colspan: number;\n\n /**\n * Whether the cell should stick.\n */\n @Prop({reflect: true})\n sticky = false;\n\n /**\n * Enables the contextual menu.\n * Can be set to \"hover\" or \"always\" to show the button only on cell hover or always.\n * Set a nullish value to hide the menu button.\n */\n @Prop({reflect: true})\n showMenu: VisibilityCondition = null;\n\n /**\n * Store the open state of the menu.\n */\n @State()\n isMenuOpen = false;\n\n private menuTrigger: HTMLZButtonElement;\n\n private popoverEl: HTMLZPopoverElement;\n\n /**\n * Emitted when the value of the `colspan` changes.\n */\n @Event({\n bubbles: true,\n cancelable: false,\n })\n colspanChange: EventEmitter<number>;\n\n @Watch(\"colspan\")\n protected updateColspan(): void {\n if (this.colspan) {\n this.host.style.gridColumn = `span ${this.colspan}`;\n } else {\n this.host.style.removeProperty(\"grid-column\");\n }\n\n this.colspanChange.emit(this.colspan || 1);\n }\n\n private onMenuButtonClick(ev: MouseEvent): void {\n ev.stopPropagation();\n this.popoverEl.open = !this.popoverEl.open;\n }\n\n componentWillLoad(): void {\n this.updateColspan();\n }\n\n render(): HTMLZTdElement {\n return (\n <Host\n role=\"cell\"\n menu-open={this.isMenuOpen}\n >\n <slot></slot>\n {this.showMenu && (\n <div class=\"cell--menu-container prevent-expand\">\n <z-button\n variant={ButtonVariant.TERTIARY}\n icon=\"contextual-menu\"\n size={ControlSize.X_SMALL}\n ref={(el) => (this.menuTrigger = el as HTMLZButtonElement)}\n onClick={this.onMenuButtonClick.bind(this)}\n />\n <z-popover\n ref={(el) => (this.popoverEl = el as HTMLZPopoverElement)}\n bindTo={this.menuTrigger as HTMLElement}\n onOpenChange={(event) => (this.isMenuOpen = event.detail.open)}\n position={PopoverPosition.TOP_LEFT}\n >\n <slot name=\"contextual-menu\"></slot>\n </z-popover>\n </div>\n )}\n </Host>\n );\n }\n}\n"],"mappings":"gOAAA,IAAMA,EAAY,2uCAClB,IAAAC,EAAeD,E,ICWFE,EAAGC,EAAA,e,wGAaL,M,cAQuB,K,gBAMnB,K,CAgBHC,EAAAC,UAAAC,cAAA,WACR,GAAIC,KAAKC,QAAS,CAChBD,KAAKE,KAAKC,MAAMC,WAAa,QAAAC,OAAQL,KAAKC,Q,KACrC,CACLD,KAAKE,KAAKC,MAAMG,eAAe,c,CAGjCN,KAAKO,cAAcC,KAAKR,KAAKC,SAAW,E,EAGlCJ,EAAAC,UAAAW,kBAAA,SAAkBC,GACxBA,EAAGC,kBACHX,KAAKY,UAAUC,MAAQb,KAAKY,UAAUC,I,EAGxChB,EAAAC,UAAAgB,kBAAA,WACEd,KAAKD,e,EAGPF,EAAAC,UAAAiB,OAAA,eAAAC,EAAAhB,KACE,OACEiB,EAACC,EAAI,CAAAC,IAAA,2CACHC,KAAK,OAAM,YACApB,KAAKqB,YAEhBJ,EAAA,QAAAE,IAAA,6CACCnB,KAAKsB,UACJL,EAAA,OAAAE,IAAA,2CAAKI,MAAM,uCACTN,EAAA,YAAAE,IAAA,2CACEK,QAASC,EAAcC,SACvBC,KAAK,kBACLC,KAAMC,EAAYC,QAClBC,IAAK,SAACC,GAAE,OAAMhB,EAAKiB,YAAcD,CAAzB,EACRE,QAASlC,KAAKS,kBAAkB0B,KAAKnC,QAEvCiB,EAAA,aAAAE,IAAA,2CACEY,IAAK,SAACC,GAAE,OAAMhB,EAAKJ,UAAYoB,CAAvB,EACRI,OAAQpC,KAAKiC,YACbI,aAAc,SAACC,GAAK,OAAMtB,EAAKK,WAAaiB,EAAMC,OAAO1B,IAArC,EACpB2B,SAAUC,EAAgBC,UAE1BzB,EAAA,QAAAE,IAAA,2CAAMwB,KAAK,sB,oPApFT,I","ignoreList":[]}
|