smoothly 0.2.4 → 0.2.5
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/loader.cjs.js +1 -1
- package/dist/cjs/smoothly-accordion_51.cjs.entry.js +12 -12
- package/dist/cjs/smoothly.cjs.js +1 -1
- package/dist/collection/components/tab/style.css +7 -11
- package/dist/collection/components/tab-switch/style.css +2 -1
- package/dist/collection/components/table/cell/style.css +2 -2
- package/dist/collection/components/table/demo/index.js +11 -9
- package/dist/collection/components/table/expandable/cell/index.js +3 -2
- package/dist/collection/components/table/expandable/cell/style.css +22 -26
- package/dist/collection/components/table/expandable/row/index.js +1 -1
- package/dist/collection/components/table/expandable/row/style.css +26 -25
- package/dist/collection/components/table/header/style.css +0 -1
- package/dist/collection/components/table/row/style.css +1 -1
- package/dist/collection/components/table/style.css +3 -8
- package/dist/custom-elements/index.js +12 -12
- package/dist/esm/loader.js +1 -1
- package/dist/esm/smoothly-accordion_51.entry.js +12 -12
- package/dist/esm/smoothly.js +1 -1
- package/dist/smoothly/{p-a302008c.entry.js → p-332b1c90.entry.js} +1 -1
- package/dist/smoothly/smoothly.esm.js +1 -1
- package/package.json +1 -1
package/dist/cjs/loader.cjs.js
CHANGED
|
@@ -14,7 +14,7 @@ const patchEsm = () => {
|
|
|
14
14
|
const defineCustomElements = (win, options) => {
|
|
15
15
|
if (typeof window === 'undefined') return Promise.resolve();
|
|
16
16
|
return patchEsm().then(() => {
|
|
17
|
-
return index.bootstrapLazy([["smoothly-google-font.cjs",[[2,"smoothly-google-font",{"value":[1]}]]],["smoothly-radio-group.cjs",[[4,"smoothly-radio-group",{"orientation":[513]}]]],["smoothly-reorder.cjs",[[0,"smoothly-reorder"]]],["smoothly-trigger-sink.cjs",[[6,"smoothly-trigger-sink",{"context":[16],"destination":[1],"filter":[1]},[[0,"trigger","TriggerListener"]]]]],["smoothly-trigger-source.cjs",[[6,"smoothly-trigger-source",{"listen":[1]}]]],["smoothly-accordion_51.cjs",[[0,"smoothly-app-demo",{"baseUrl":[1,"base-url"]}],[0,"smoothly-input-demo"],[2,"smoothly-select-demo",null,[[0,"selectionChanged","handleSelectionChanged"]]],[0,"smoothly-display-demo"],[2,"smoothly-table-demo"],[4,"smoothly-app",{"color":[1]}],[0,"smoothly-dialog-demo"],[2,"smoothly-icon-demo"],[6,"smoothly-button",{"color":[513],"expand":[513],"fill":[513],"disabled":[516],"type":[513],"link":[1],"download":[4]}],[4,"smoothly-room",{"label":[1],"icon":[1],"path":[1],"to":[1]}],[2,"smoothly-input-date-range",{"value":[1025],"start":[1025],"end":[1025],"max":[1025],"min":[1025],"open":[1028],"showLabel":[516,"show-label"]},[[0,"startChanged","onStartChanged"],[0,"endChanged","onEndChanged"],[0,"dateRangeSet","onDateRangeSet"]]],[6,"smoothly-notifier",{"notices":[32]},[[0,"notice","onNotice"],[0,"remove","onRemove"]]],[1,"smoothly-picker",{"maxMenuHeight":[1,"max-menu-height"],"maxHeight":[1,"max-height"],"emptyMenuLabel":[1025,"empty-menu-label"],"multiple":[516],"mutable":[4],"optionStyle":[8,"option-style"],"options":[16],"labelSetting":[513,"label-setting"],"label":[513],"selections":[1040],"selectNoneName":[1025,"select-none-name"],"selectAllName":[1025,"select-all-name"],"selectionName":[1025,"selection-name"],"newOptionLabel":[1025,"new-option-label"],"valueValidator":[16],"isOpen":[32],"empty":[32]},[[0,"optionSelect","optionSelectHandler"],[0,"optionAdd","optionAddHandler"],[0,"menuEmpty","emptyHandler"]]],[6,"smoothly-dialog",{"color":[513],"open":[1540],"closable":[516],"header":[513]},[[0,"trigger","TriggerListener"]]],[
|
|
17
|
+
return index.bootstrapLazy([["smoothly-google-font.cjs",[[2,"smoothly-google-font",{"value":[1]}]]],["smoothly-radio-group.cjs",[[4,"smoothly-radio-group",{"orientation":[513]}]]],["smoothly-reorder.cjs",[[0,"smoothly-reorder"]]],["smoothly-trigger-sink.cjs",[[6,"smoothly-trigger-sink",{"context":[16],"destination":[1],"filter":[1]},[[0,"trigger","TriggerListener"]]]]],["smoothly-trigger-source.cjs",[[6,"smoothly-trigger-source",{"listen":[1]}]]],["smoothly-accordion_51.cjs",[[0,"smoothly-app-demo",{"baseUrl":[1,"base-url"]}],[0,"smoothly-input-demo"],[2,"smoothly-select-demo",null,[[0,"selectionChanged","handleSelectionChanged"]]],[0,"smoothly-display-demo"],[2,"smoothly-table-demo"],[4,"smoothly-app",{"color":[1]}],[0,"smoothly-dialog-demo"],[2,"smoothly-icon-demo"],[6,"smoothly-button",{"color":[513],"expand":[513],"fill":[513],"disabled":[516],"type":[513],"link":[1],"download":[4]}],[4,"smoothly-room",{"label":[1],"icon":[1],"path":[1],"to":[1]}],[2,"smoothly-input-date-range",{"value":[1025],"start":[1025],"end":[1025],"max":[1025],"min":[1025],"open":[1028],"showLabel":[516,"show-label"]},[[0,"startChanged","onStartChanged"],[0,"endChanged","onEndChanged"],[0,"dateRangeSet","onDateRangeSet"]]],[6,"smoothly-notifier",{"notices":[32]},[[0,"notice","onNotice"],[0,"remove","onRemove"]]],[1,"smoothly-picker",{"maxMenuHeight":[1,"max-menu-height"],"maxHeight":[1,"max-height"],"emptyMenuLabel":[1025,"empty-menu-label"],"multiple":[516],"mutable":[4],"optionStyle":[8,"option-style"],"options":[16],"labelSetting":[513,"label-setting"],"label":[513],"selections":[1040],"selectNoneName":[1025,"select-none-name"],"selectAllName":[1025,"select-all-name"],"selectionName":[1025,"selection-name"],"newOptionLabel":[1025,"new-option-label"],"valueValidator":[16],"isOpen":[32],"empty":[32]},[[0,"optionSelect","optionSelectHandler"],[0,"optionAdd","optionAddHandler"],[0,"menuEmpty","emptyHandler"]]],[6,"smoothly-dialog",{"color":[513],"open":[1540],"closable":[516],"header":[513]},[[0,"trigger","TriggerListener"]]],[2,"smoothly-backtotop",{"opacity":[1],"bottom":[1],"right":[1],"visible":[32]}],[2,"smoothly-checkbox",{"selectAll":[4,"select-all"],"size":[1],"intermediate":[1540],"selected":[1540],"disabled":[1540],"t":[32]}],[6,"smoothly-submit",{"processing":[1540],"color":[513],"expand":[513],"fill":[513],"disabled":[516],"prevent":[4],"submit":[64]},[[0,"click","handleSubmit"]]],[6,"smoothly-table-expandable-cell",{"align":[1],"open":[1540]},[[0,"click","onClick"]]],[6,"smoothly-table-expandable-row",{"align":[1],"open":[1540]},[[0,"click","onClick"]]],[0,"smoothly-urlencoded",{"data":[1]}],[6,"smoothly-accordion",{"value":[1025]},[[0,"smoothlyOpen","handleOpenClose"],[0,"smoothlyClose","handleOpenClose"],[0,"smoothlyAccordionItemDidLoad","onAccordionItemDidLoad"],[0,"smoothlyAccordionItemDidUnload","onAccordionItemDidUnload"]]],[6,"smoothly-accordion-item",{"name":[1],"brand":[1],"open":[1540]}],[2,"smoothly-display",{"type":[1],"value":[8],"currency":[1],"country":[1]}],[2,"smoothly-display-amount",{"amount":[8],"currency":[1]}],[2,"smoothly-frame",{"url":[1],"name":[1],"origin":[1],"send":[64]}],[6,"smoothly-popup",{"visible":[1540],"direction":[1537],"cssVariables":[32]}],[6,"smoothly-quiet",{"color":[1]}],[6,"smoothly-radio",{"name":[1],"value":[1],"checked":[1540],"tabIndex":[2,"tab-index"]}],[6,"smoothly-select",{"identifier":[1],"background":[513],"value":[1025]}],[2,"smoothly-skeleton",{"widths":[16],"width":[1],"color":[1],"period":[2],"distance":[1],"align":[513]}],[2,"smoothly-svg",{"url":[513],"size":[513],"color":[1]}],[6,"smoothly-table",null,[[0,"expansionLoad","handleEvents"],[0,"expansionOpen","handleEvents"]]],[6,"smoothly-table-cell"],[6,"smoothly-table-header",{"name":[1]}],[6,"smoothly-table-row",null,[[0,"expansionLoad","onExpansionLoad"],[0,"expansionOpen","onExpansionOpen"]]],[6,"smoothly-input-date",{"value":[1025],"open":[1028],"max":[1025],"min":[1025],"disabled":[1028]},[[0,"dateSet","dateSetHandler"]]],[1,"smoothly-menu-options",{"emptyMenuLabel":[1025,"empty-menu-label"],"newOptionLabel":[1,"new-option-label"],"maxMenuHeight":[1,"max-menu-height"],"order":[4],"optionStyle":[8,"option-style"],"options":[1040],"resetHighlightOnOptionsChange":[1028,"reset-highlight-on-options-change"],"mutable":[4],"filteredOptions":[32],"highlightIndex":[32],"keyword":[32],"moveHighlight":[64],"setHighlight":[64],"getHighlighted":[64],"filterOptions":[64]},[[0,"optionHover","optionHoverHandler"]]],[2,"smoothly-notification",{"notice":[16],"tick":[32]},[[0,"trigger","onTrigger"]]],[2,"smoothly-display-date-time",{"datetime":[1]}],[6,"smoothly-tab",{"label":[1],"open":[1540]},[[0,"click","onClick"]]],[6,"smoothly-tab-switch",{"selectedElement":[32]},[[0,"expansionOpen","openChanged"]]],[0,"smoothly-tuple",{"tuple":[16]}],[1,"smoothly-option",{"aliases":[513],"dataHighlight":[1540,"data-highlight"],"name":[1537],"value":[1537],"divider":[1540],"new":[4]}],[2,"smoothly-spinner",{"active":[516],"size":[513]}],[2,"smoothly-calendar",{"month":[1025],"value":[1025],"start":[1025],"end":[1025],"max":[1025],"min":[1025],"doubleInput":[516,"double-input"],"firstSelected":[32]}],[6,"smoothly-input",{"name":[513],"value":[1032],"type":[513],"required":[1540],"minLength":[1026,"min-length"],"showLabel":[516,"show-label"],"maxLength":[1026,"max-length"],"autocomplete":[1028],"pattern":[1040],"placeholder":[1025],"disabled":[1028],"readonly":[1028],"currency":[513],"initialValue":[32],"getFormData":[64],"setKeepFocusOnReRender":[64],"setSelectionRange":[64]}],[2,"smoothly-input-month",{"value":[1025]}],[6,"smoothly-selector",{"opened":[32],"selectedElement":[32],"missing":[32],"filter":[32]},[[0,"click","onClick"],[0,"itemSelected","onItemSelected"],[0,"keydown","onKeyDown"]]],[6,"smoothly-item",{"value":[8],"selected":[1540],"filter":[64]},[[0,"click","onClick"]]],[6,"smoothly-trigger",{"color":[513],"expand":[513],"fill":[513],"disabled":[516],"type":[513],"name":[1],"value":[8]},[[0,"click","onClick"]]],[2,"smoothly-icon",{"color":[513],"fill":[513],"name":[1],"size":[513],"toolTip":[1,"tool-tip"],"document":[32]}]]]], options);
|
|
18
18
|
});
|
|
19
19
|
};
|
|
20
20
|
|
|
@@ -47061,7 +47061,7 @@ const SmoothlySvg = class {
|
|
|
47061
47061
|
};
|
|
47062
47062
|
SmoothlySvg.style = styleCss$a;
|
|
47063
47063
|
|
|
47064
|
-
const styleCss$9 = "
|
|
47064
|
+
const styleCss$9 = "[open].sc-smoothly-tab-h{border-bottom:3px solid rgb(var(--smoothly-primary-color));box-sizing:border-box;margin-bottom:-3px}.hide.sc-smoothly-tab{display:none}label.sc-smoothly-tab{display:block;padding:.5rem;background-color:transparent;width:auto}";
|
|
47065
47065
|
|
|
47066
47066
|
const SmoothlyTab = class {
|
|
47067
47067
|
constructor(hostRef) {
|
|
@@ -47091,7 +47091,7 @@ const SmoothlyTab = class {
|
|
|
47091
47091
|
};
|
|
47092
47092
|
SmoothlyTab.style = styleCss$9;
|
|
47093
47093
|
|
|
47094
|
-
const styleCss$8 = ".sc-smoothly-tab-switch-h{display:flex;flex-direction:row;
|
|
47094
|
+
const styleCss$8 = ".sc-smoothly-tab-switch-h{display:flex;flex-direction:row;justify-content:space-around;border-bottom:3px solid rgb(var(--smoothly-default-shade))}";
|
|
47095
47095
|
|
|
47096
47096
|
const SmoothlyTabSwitch = class {
|
|
47097
47097
|
constructor(hostRef) {
|
|
@@ -47117,7 +47117,7 @@ const SmoothlyTabSwitch = class {
|
|
|
47117
47117
|
};
|
|
47118
47118
|
SmoothlyTabSwitch.style = styleCss$8;
|
|
47119
47119
|
|
|
47120
|
-
const styleCss$7 = ".sc-smoothly-table-h{display:table;
|
|
47120
|
+
const styleCss$7 = ".sc-smoothly-table-h{display:table;border-collapse:collapse;border:1px solid rgb(var(--smoothly-dark-color));width:var(--table-width, 80%);box-sizing:border-box;background-color:rgb(var(--smoothly-default-color));margin:auto}";
|
|
47121
47121
|
|
|
47122
47122
|
const Table = class {
|
|
47123
47123
|
constructor(hostRef) {
|
|
@@ -47134,7 +47134,7 @@ const Table = class {
|
|
|
47134
47134
|
};
|
|
47135
47135
|
Table.style = styleCss$7;
|
|
47136
47136
|
|
|
47137
|
-
const styleCss$6 = ".sc-smoothly-table-cell-h{display:table-cell;
|
|
47137
|
+
const styleCss$6 = ".sc-smoothly-table-cell-h{display:table-cell;line-height:1.5rem;white-space:nowrap;padding:0.3rem 0 0.3rem 1rem}";
|
|
47138
47138
|
|
|
47139
47139
|
const TableCell = class {
|
|
47140
47140
|
constructor(hostRef) {
|
|
@@ -47154,14 +47154,14 @@ const TableDemo = class {
|
|
|
47154
47154
|
}
|
|
47155
47155
|
render() {
|
|
47156
47156
|
return [
|
|
47157
|
-
index.h("smoothly-table", null, index.h("smoothly-table-row", null, index.h("smoothly-table-header", null, "Header A"), index.h("smoothly-table-header", null, "Header B"), index.h("smoothly-table-header", null, "Header C"), index.h("smoothly-table-header", null, "Header D")
|
|
47158
|
-
index.h("smoothly-table", null, index.h("smoothly-table-row", null, index.h("smoothly-table-header", null, "Header A"), index.h("smoothly-table-
|
|
47157
|
+
index.h("smoothly-table", null, index.h("smoothly-table-row", null, index.h("smoothly-table-header", null, "Header A"), index.h("smoothly-table-header", null, "Header B"), index.h("smoothly-table-header", null, "Header C"), index.h("smoothly-table-header", null, "Header D")), index.h("smoothly-table-row", null, index.h("smoothly-table-expandable-cell", null, "normal row (exp.cell)", index.h("div", { slot: "detail" }, "expandable cell 1 content")), index.h("smoothly-table-expandable-cell", null, "expandable cell", index.h("div", { slot: "detail" }, "expandable cell 2 content")), index.h("smoothly-table-expandable-cell", null, "expandable cell", index.h("div", { slot: "detail" }, "expandable cell 3 content")), index.h("smoothly-table-expandable-cell", null, "expandable cell", index.h("div", { slot: "detail" }, "expandable cell 4 content"))), index.h("smoothly-table-row", null, index.h("smoothly-table-cell", null, "normal row (nor.cell)\""), index.h("smoothly-table-cell", null, "normal cell"), index.h("smoothly-table-expandable-cell", null, "expandable cell", index.h("div", { slot: "detail" }, "expandable cell details.")), index.h("smoothly-table-expandable-cell", null, "expandable cell", index.h("div", { slot: "detail" }, "expandable cell details."))), index.h("smoothly-table-expandable-row", null, index.h("smoothly-table-cell", null, "expandable row (nor.cell)"), index.h("smoothly-table-cell", null, "Normal cell"), index.h("smoothly-table-cell", null, "normal cell"), index.h("smoothly-table-cell", null, "Normal cell"), index.h("div", { slot: "detail" }, "expandable row content"))),
|
|
47158
|
+
index.h("smoothly-table", null, index.h("smoothly-table-row", null, index.h("smoothly-table-header", null, "Header A")), index.h("smoothly-table-expandable-row", null, index.h("smoothly-table-cell", null, "A Content"), index.h("div", { slot: "detail" }, index.h("smoothly-tab-switch", null, index.h("smoothly-tab", { label: "innertable 1", open: true }, index.h("smoothly-table", null, index.h("smoothly-table-row", null, index.h("smoothly-table-header", null, "Header B")), index.h("smoothly-table-expandable-row", null, "B Content"))), index.h("smoothly-tab", { label: "innertable 2" }, index.h("smoothly-table", null, index.h("smoothly-table-row", null, index.h("smoothly-table-header", null, "Header C")), index.h("smoothly-table-expandable-row", null, index.h("smoothly-table-cell", null, "C Content")))))))),
|
|
47159
47159
|
];
|
|
47160
47160
|
}
|
|
47161
47161
|
};
|
|
47162
47162
|
TableDemo.style = styleCss$5;
|
|
47163
47163
|
|
|
47164
|
-
const styleCss$4 = ".sc-smoothly-table-expandable-cell-h{display:table-cell;
|
|
47164
|
+
const styleCss$4 = ".sc-smoothly-table-expandable-cell-h{display:table-cell;padding:0.3rem 0 0.3rem 0;cursor:pointer;line-height:1.5rem}[open].sc-smoothly-table-expandable-cell-h{position:relative;z-index:3;background-color:rgb(var(--smoothly-default-color));border:2px solid rgb(var(--smoothly-dark-color));border-bottom:none}.sc-smoothly-table-expandable-cell-h smoothly-icon.sc-smoothly-table-expandable-cell{width:0.6rem;float:left;padding:0 0.3rem;transition:transform 0.2s}[open].sc-smoothly-table-expandable-cell-h smoothly-icon.sc-smoothly-table-expandable-cell{transform:rotate(90deg)}aside.sc-smoothly-table-expandable-cell{display:flex}.hide.sc-smoothly-table-expandable-cell{display:none}.slot-detail.sc-smoothly-table-expandable-cell{position:relative;background-color:rgb(var(--smoothly-default-color));width:104%;left:-2%;border-left:2px solid rgb(var(--smoothly-tertiary-color));box-shadow:0px 0px 5px 4px rgb(var(--smoothly-dark-color), 0.5);box-sizing:border-box;padding:0.5rem 2%}";
|
|
47165
47165
|
|
|
47166
47166
|
const TableExpandableCell = class {
|
|
47167
47167
|
constructor(hostRef) {
|
|
@@ -47190,7 +47190,7 @@ const TableExpandableCell = class {
|
|
|
47190
47190
|
}
|
|
47191
47191
|
}
|
|
47192
47192
|
render() {
|
|
47193
|
-
return (index.h(index.Host, { style: { textAlign: this.align } }, index.h("
|
|
47193
|
+
return (index.h(index.Host, { style: { textAlign: this.align } }, index.h("aside", null, index.h("smoothly-icon", { name: "chevron-forward", size: "tiny" }), index.h("slot", null)), index.h("tr", { ref: e => (this.expansionElement = e) }, index.h("td", { colSpan: 999, class: !this.open ? "hide" : "" }, index.h("div", { class: "slot-detail" }, index.h("slot", { name: "detail" }))))));
|
|
47194
47194
|
}
|
|
47195
47195
|
get element() { return index.getElement(this); }
|
|
47196
47196
|
static get watchers() { return {
|
|
@@ -47199,7 +47199,7 @@ const TableExpandableCell = class {
|
|
|
47199
47199
|
};
|
|
47200
47200
|
TableExpandableCell.style = styleCss$4;
|
|
47201
47201
|
|
|
47202
|
-
const styleCss$3 = ".sc-smoothly-table-expandable-row-h{display:table-row
|
|
47202
|
+
const styleCss$3 = ".sc-smoothly-table-expandable-row-h{display:table-row-group;cursor:pointer;line-height:1.5rem}[open].sc-smoothly-table-expandable-row-h{position:relative;z-index:3;background-color:rgb(var(--smoothly-default-color));border:2px solid rgb(var(--smoothly-dark-color));border-bottom:none}.sc-smoothly-table-expandable-row-h smoothly-icon.sc-smoothly-table-expandable-row{width:0.6rem;height:1rem;position:absolute;right:1rem;top:-1.8rem;transition:transform 0.2s}[open].sc-smoothly-table-expandable-row-h smoothly-icon.sc-smoothly-table-expandable-row{transform:rotate(90deg)}aside.sc-smoothly-table-expandable-row{display:table-row;position:relative}.hide.sc-smoothly-table-expandable-row{display:none}.slot-detail.sc-smoothly-table-expandable-row{position:relative;background-color:rgb(var(--smoothly-default-color));width:104%;left:-2%;border-left-style:solid;border-left-color:rgb(var(--smoothly-tertiary-color));box-shadow:0px 0px 4px 2px rgb(var(--smoothly-dark-color));box-sizing:border-box;padding:0.5rem 2%}";
|
|
47203
47203
|
|
|
47204
47204
|
const TableExpandableRow = class {
|
|
47205
47205
|
constructor(hostRef) {
|
|
@@ -47221,7 +47221,7 @@ const TableExpandableRow = class {
|
|
|
47221
47221
|
this.element.after(this.expansionElement);
|
|
47222
47222
|
}
|
|
47223
47223
|
render() {
|
|
47224
|
-
return (index.h(index.Host, { style: { textAlign: this.align } }, index.h("slot", null), index.h("
|
|
47224
|
+
return (index.h(index.Host, { style: { textAlign: this.align } }, index.h("slot", null), index.h("aside", null, index.h("smoothly-icon", { name: "chevron-forward", size: "tiny" })), index.h("tr", { ref: e => (this.expansionElement = e) }, index.h("td", { colSpan: 999, class: !this.open ? "hide" : "" }, index.h("div", { class: "slot-detail" }, index.h("slot", { name: "detail" }))))));
|
|
47225
47225
|
}
|
|
47226
47226
|
get element() { return index.getElement(this); }
|
|
47227
47227
|
static get watchers() { return {
|
|
@@ -47230,7 +47230,7 @@ const TableExpandableRow = class {
|
|
|
47230
47230
|
};
|
|
47231
47231
|
TableExpandableRow.style = styleCss$3;
|
|
47232
47232
|
|
|
47233
|
-
const styleCss$2 = ".sc-smoothly-table-header-h{display:table-cell;line-height:2.5rem;background-color:rgb(var(--smoothly-color-shade));border-bottom:1px solid rgb(var(--smoothly-dark-color));padding-left:1rem;font-weight:bold
|
|
47233
|
+
const styleCss$2 = ".sc-smoothly-table-header-h{display:table-cell;line-height:2.5rem;background-color:rgb(var(--smoothly-color-shade));border-bottom:1px solid rgb(var(--smoothly-dark-color));padding-left:1rem;font-weight:bold}";
|
|
47234
47234
|
|
|
47235
47235
|
const TableHeader = class {
|
|
47236
47236
|
constructor(hostRef) {
|
|
@@ -47242,7 +47242,7 @@ const TableHeader = class {
|
|
|
47242
47242
|
};
|
|
47243
47243
|
TableHeader.style = styleCss$2;
|
|
47244
47244
|
|
|
47245
|
-
const styleCss$1 = ".sc-smoothly-table-row-h{display:table-row;
|
|
47245
|
+
const styleCss$1 = ".sc-smoothly-table-row-h{display:table-row;cursor:default;line-height:1.5rem}.hide.sc-smoothly-table-row{display:none}";
|
|
47246
47246
|
|
|
47247
47247
|
const TableRow = class {
|
|
47248
47248
|
constructor(hostRef) {
|
package/dist/cjs/smoothly.cjs.js
CHANGED
|
@@ -15,5 +15,5 @@ const patchBrowser = () => {
|
|
|
15
15
|
};
|
|
16
16
|
|
|
17
17
|
patchBrowser().then(options => {
|
|
18
|
-
return index.bootstrapLazy([["smoothly-google-font.cjs",[[2,"smoothly-google-font",{"value":[1]}]]],["smoothly-radio-group.cjs",[[4,"smoothly-radio-group",{"orientation":[513]}]]],["smoothly-reorder.cjs",[[0,"smoothly-reorder"]]],["smoothly-trigger-sink.cjs",[[6,"smoothly-trigger-sink",{"context":[16],"destination":[1],"filter":[1]},[[0,"trigger","TriggerListener"]]]]],["smoothly-trigger-source.cjs",[[6,"smoothly-trigger-source",{"listen":[1]}]]],["smoothly-accordion_51.cjs",[[0,"smoothly-app-demo",{"baseUrl":[1,"base-url"]}],[0,"smoothly-input-demo"],[2,"smoothly-select-demo",null,[[0,"selectionChanged","handleSelectionChanged"]]],[0,"smoothly-display-demo"],[2,"smoothly-table-demo"],[4,"smoothly-app",{"color":[1]}],[0,"smoothly-dialog-demo"],[2,"smoothly-icon-demo"],[6,"smoothly-button",{"color":[513],"expand":[513],"fill":[513],"disabled":[516],"type":[513],"link":[1],"download":[4]}],[4,"smoothly-room",{"label":[1],"icon":[1],"path":[1],"to":[1]}],[2,"smoothly-input-date-range",{"value":[1025],"start":[1025],"end":[1025],"max":[1025],"min":[1025],"open":[1028],"showLabel":[516,"show-label"]},[[0,"startChanged","onStartChanged"],[0,"endChanged","onEndChanged"],[0,"dateRangeSet","onDateRangeSet"]]],[6,"smoothly-notifier",{"notices":[32]},[[0,"notice","onNotice"],[0,"remove","onRemove"]]],[1,"smoothly-picker",{"maxMenuHeight":[1,"max-menu-height"],"maxHeight":[1,"max-height"],"emptyMenuLabel":[1025,"empty-menu-label"],"multiple":[516],"mutable":[4],"optionStyle":[8,"option-style"],"options":[16],"labelSetting":[513,"label-setting"],"label":[513],"selections":[1040],"selectNoneName":[1025,"select-none-name"],"selectAllName":[1025,"select-all-name"],"selectionName":[1025,"selection-name"],"newOptionLabel":[1025,"new-option-label"],"valueValidator":[16],"isOpen":[32],"empty":[32]},[[0,"optionSelect","optionSelectHandler"],[0,"optionAdd","optionAddHandler"],[0,"menuEmpty","emptyHandler"]]],[6,"smoothly-dialog",{"color":[513],"open":[1540],"closable":[516],"header":[513]},[[0,"trigger","TriggerListener"]]],[
|
|
18
|
+
return index.bootstrapLazy([["smoothly-google-font.cjs",[[2,"smoothly-google-font",{"value":[1]}]]],["smoothly-radio-group.cjs",[[4,"smoothly-radio-group",{"orientation":[513]}]]],["smoothly-reorder.cjs",[[0,"smoothly-reorder"]]],["smoothly-trigger-sink.cjs",[[6,"smoothly-trigger-sink",{"context":[16],"destination":[1],"filter":[1]},[[0,"trigger","TriggerListener"]]]]],["smoothly-trigger-source.cjs",[[6,"smoothly-trigger-source",{"listen":[1]}]]],["smoothly-accordion_51.cjs",[[0,"smoothly-app-demo",{"baseUrl":[1,"base-url"]}],[0,"smoothly-input-demo"],[2,"smoothly-select-demo",null,[[0,"selectionChanged","handleSelectionChanged"]]],[0,"smoothly-display-demo"],[2,"smoothly-table-demo"],[4,"smoothly-app",{"color":[1]}],[0,"smoothly-dialog-demo"],[2,"smoothly-icon-demo"],[6,"smoothly-button",{"color":[513],"expand":[513],"fill":[513],"disabled":[516],"type":[513],"link":[1],"download":[4]}],[4,"smoothly-room",{"label":[1],"icon":[1],"path":[1],"to":[1]}],[2,"smoothly-input-date-range",{"value":[1025],"start":[1025],"end":[1025],"max":[1025],"min":[1025],"open":[1028],"showLabel":[516,"show-label"]},[[0,"startChanged","onStartChanged"],[0,"endChanged","onEndChanged"],[0,"dateRangeSet","onDateRangeSet"]]],[6,"smoothly-notifier",{"notices":[32]},[[0,"notice","onNotice"],[0,"remove","onRemove"]]],[1,"smoothly-picker",{"maxMenuHeight":[1,"max-menu-height"],"maxHeight":[1,"max-height"],"emptyMenuLabel":[1025,"empty-menu-label"],"multiple":[516],"mutable":[4],"optionStyle":[8,"option-style"],"options":[16],"labelSetting":[513,"label-setting"],"label":[513],"selections":[1040],"selectNoneName":[1025,"select-none-name"],"selectAllName":[1025,"select-all-name"],"selectionName":[1025,"selection-name"],"newOptionLabel":[1025,"new-option-label"],"valueValidator":[16],"isOpen":[32],"empty":[32]},[[0,"optionSelect","optionSelectHandler"],[0,"optionAdd","optionAddHandler"],[0,"menuEmpty","emptyHandler"]]],[6,"smoothly-dialog",{"color":[513],"open":[1540],"closable":[516],"header":[513]},[[0,"trigger","TriggerListener"]]],[2,"smoothly-backtotop",{"opacity":[1],"bottom":[1],"right":[1],"visible":[32]}],[2,"smoothly-checkbox",{"selectAll":[4,"select-all"],"size":[1],"intermediate":[1540],"selected":[1540],"disabled":[1540],"t":[32]}],[6,"smoothly-submit",{"processing":[1540],"color":[513],"expand":[513],"fill":[513],"disabled":[516],"prevent":[4],"submit":[64]},[[0,"click","handleSubmit"]]],[6,"smoothly-table-expandable-cell",{"align":[1],"open":[1540]},[[0,"click","onClick"]]],[6,"smoothly-table-expandable-row",{"align":[1],"open":[1540]},[[0,"click","onClick"]]],[0,"smoothly-urlencoded",{"data":[1]}],[6,"smoothly-accordion",{"value":[1025]},[[0,"smoothlyOpen","handleOpenClose"],[0,"smoothlyClose","handleOpenClose"],[0,"smoothlyAccordionItemDidLoad","onAccordionItemDidLoad"],[0,"smoothlyAccordionItemDidUnload","onAccordionItemDidUnload"]]],[6,"smoothly-accordion-item",{"name":[1],"brand":[1],"open":[1540]}],[2,"smoothly-display",{"type":[1],"value":[8],"currency":[1],"country":[1]}],[2,"smoothly-display-amount",{"amount":[8],"currency":[1]}],[2,"smoothly-frame",{"url":[1],"name":[1],"origin":[1],"send":[64]}],[6,"smoothly-popup",{"visible":[1540],"direction":[1537],"cssVariables":[32]}],[6,"smoothly-quiet",{"color":[1]}],[6,"smoothly-radio",{"name":[1],"value":[1],"checked":[1540],"tabIndex":[2,"tab-index"]}],[6,"smoothly-select",{"identifier":[1],"background":[513],"value":[1025]}],[2,"smoothly-skeleton",{"widths":[16],"width":[1],"color":[1],"period":[2],"distance":[1],"align":[513]}],[2,"smoothly-svg",{"url":[513],"size":[513],"color":[1]}],[6,"smoothly-table",null,[[0,"expansionLoad","handleEvents"],[0,"expansionOpen","handleEvents"]]],[6,"smoothly-table-cell"],[6,"smoothly-table-header",{"name":[1]}],[6,"smoothly-table-row",null,[[0,"expansionLoad","onExpansionLoad"],[0,"expansionOpen","onExpansionOpen"]]],[6,"smoothly-input-date",{"value":[1025],"open":[1028],"max":[1025],"min":[1025],"disabled":[1028]},[[0,"dateSet","dateSetHandler"]]],[1,"smoothly-menu-options",{"emptyMenuLabel":[1025,"empty-menu-label"],"newOptionLabel":[1,"new-option-label"],"maxMenuHeight":[1,"max-menu-height"],"order":[4],"optionStyle":[8,"option-style"],"options":[1040],"resetHighlightOnOptionsChange":[1028,"reset-highlight-on-options-change"],"mutable":[4],"filteredOptions":[32],"highlightIndex":[32],"keyword":[32],"moveHighlight":[64],"setHighlight":[64],"getHighlighted":[64],"filterOptions":[64]},[[0,"optionHover","optionHoverHandler"]]],[2,"smoothly-notification",{"notice":[16],"tick":[32]},[[0,"trigger","onTrigger"]]],[2,"smoothly-display-date-time",{"datetime":[1]}],[6,"smoothly-tab",{"label":[1],"open":[1540]},[[0,"click","onClick"]]],[6,"smoothly-tab-switch",{"selectedElement":[32]},[[0,"expansionOpen","openChanged"]]],[0,"smoothly-tuple",{"tuple":[16]}],[1,"smoothly-option",{"aliases":[513],"dataHighlight":[1540,"data-highlight"],"name":[1537],"value":[1537],"divider":[1540],"new":[4]}],[2,"smoothly-spinner",{"active":[516],"size":[513]}],[2,"smoothly-calendar",{"month":[1025],"value":[1025],"start":[1025],"end":[1025],"max":[1025],"min":[1025],"doubleInput":[516,"double-input"],"firstSelected":[32]}],[6,"smoothly-input",{"name":[513],"value":[1032],"type":[513],"required":[1540],"minLength":[1026,"min-length"],"showLabel":[516,"show-label"],"maxLength":[1026,"max-length"],"autocomplete":[1028],"pattern":[1040],"placeholder":[1025],"disabled":[1028],"readonly":[1028],"currency":[513],"initialValue":[32],"getFormData":[64],"setKeepFocusOnReRender":[64],"setSelectionRange":[64]}],[2,"smoothly-input-month",{"value":[1025]}],[6,"smoothly-selector",{"opened":[32],"selectedElement":[32],"missing":[32],"filter":[32]},[[0,"click","onClick"],[0,"itemSelected","onItemSelected"],[0,"keydown","onKeyDown"]]],[6,"smoothly-item",{"value":[8],"selected":[1540],"filter":[64]},[[0,"click","onClick"]]],[6,"smoothly-trigger",{"color":[513],"expand":[513],"fill":[513],"disabled":[516],"type":[513],"name":[1],"value":[8]},[[0,"click","onClick"]]],[2,"smoothly-icon",{"color":[513],"fill":[513],"name":[1],"size":[513],"toolTip":[1,"tool-tip"],"document":[32]}]]]], options);
|
|
19
19
|
});
|
|
@@ -1,18 +1,14 @@
|
|
|
1
|
-
:host
|
|
2
|
-
|
|
1
|
+
:host([open]) {
|
|
2
|
+
border-bottom: 3px solid rgb(var(--smoothly-primary-color));
|
|
3
|
+
box-sizing: border-box;
|
|
4
|
+
margin-bottom: -3px;
|
|
3
5
|
}
|
|
4
6
|
.hide {
|
|
5
7
|
display: none;
|
|
6
8
|
}
|
|
7
9
|
label {
|
|
8
10
|
display: block;
|
|
9
|
-
padding:
|
|
10
|
-
background-color:
|
|
11
|
-
|
|
12
|
-
border-top-right-radius: 0.3rem;
|
|
13
|
-
width: 6.25rem;
|
|
14
|
-
}
|
|
15
|
-
div {
|
|
16
|
-
background-color: rgb(var(--smoothly-default-shade));
|
|
17
|
-
padding: 1em;
|
|
11
|
+
padding: .5rem;
|
|
12
|
+
background-color: transparent;
|
|
13
|
+
width: auto;
|
|
18
14
|
}
|
|
@@ -7,8 +7,7 @@ export class TableDemo {
|
|
|
7
7
|
h("smoothly-table-header", null, "Header A"),
|
|
8
8
|
h("smoothly-table-header", null, "Header B"),
|
|
9
9
|
h("smoothly-table-header", null, "Header C"),
|
|
10
|
-
h("smoothly-table-header", null, "Header D"),
|
|
11
|
-
h("smoothly-table-header", null)),
|
|
10
|
+
h("smoothly-table-header", null, "Header D")),
|
|
12
11
|
h("smoothly-table-row", null,
|
|
13
12
|
h("smoothly-table-expandable-cell", null,
|
|
14
13
|
"normal row (exp.cell)",
|
|
@@ -39,19 +38,22 @@ export class TableDemo {
|
|
|
39
38
|
h("div", { slot: "detail" }, "expandable row content"))),
|
|
40
39
|
h("smoothly-table", null,
|
|
41
40
|
h("smoothly-table-row", null,
|
|
42
|
-
h("smoothly-table-header", null, "Header A"),
|
|
43
|
-
h("smoothly-table-header", null)),
|
|
41
|
+
h("smoothly-table-header", null, "Header A")),
|
|
44
42
|
h("smoothly-table-expandable-row", null,
|
|
45
|
-
"A Content",
|
|
43
|
+
h("smoothly-table-cell", null, "A Content"),
|
|
46
44
|
h("div", { slot: "detail" },
|
|
47
45
|
h("smoothly-tab-switch", null,
|
|
48
|
-
h("smoothly-tab", { label: "1", open: true },
|
|
46
|
+
h("smoothly-tab", { label: "innertable 1", open: true },
|
|
47
|
+
h("smoothly-table", null,
|
|
48
|
+
h("smoothly-table-row", null,
|
|
49
|
+
h("smoothly-table-header", null, "Header B")),
|
|
50
|
+
h("smoothly-table-expandable-row", null, "B Content"))),
|
|
51
|
+
h("smoothly-tab", { label: "innertable 2" },
|
|
49
52
|
h("smoothly-table", null,
|
|
50
53
|
h("smoothly-table-row", null,
|
|
51
|
-
h("smoothly-table-header", null, "Header
|
|
52
|
-
h("smoothly-table-header", null)),
|
|
54
|
+
h("smoothly-table-header", null, "Header C")),
|
|
53
55
|
h("smoothly-table-expandable-row", null,
|
|
54
|
-
h("smoothly-table-cell", null, "
|
|
56
|
+
h("smoothly-table-cell", null, "C Content")))))))),
|
|
55
57
|
];
|
|
56
58
|
}
|
|
57
59
|
static get is() { return "smoothly-table-demo"; }
|
|
@@ -24,8 +24,9 @@ export class TableExpandableCell {
|
|
|
24
24
|
}
|
|
25
25
|
render() {
|
|
26
26
|
return (h(Host, { style: { textAlign: this.align } },
|
|
27
|
-
h("
|
|
28
|
-
|
|
27
|
+
h("aside", null,
|
|
28
|
+
h("smoothly-icon", { name: "chevron-forward", size: "tiny" }),
|
|
29
|
+
h("slot", null)),
|
|
29
30
|
h("tr", { ref: e => (this.expansionElement = e) },
|
|
30
31
|
h("td", { colSpan: 999, class: !this.open ? "hide" : "" },
|
|
31
32
|
h("div", { class: "slot-detail" },
|
|
@@ -1,44 +1,40 @@
|
|
|
1
1
|
:host {
|
|
2
2
|
display: table-cell;
|
|
3
|
-
|
|
4
|
-
line-height: 1.5em;
|
|
3
|
+
padding: 0.3rem 0 0.3rem 0;
|
|
5
4
|
cursor: pointer;
|
|
6
|
-
|
|
7
|
-
border-style: solid solid none solid;
|
|
8
|
-
border-width: 2px;
|
|
9
|
-
border-color: rgb(var(--smoothly-default-color));
|
|
10
|
-
}
|
|
11
|
-
.hide {
|
|
12
|
-
display: none;
|
|
5
|
+
line-height: 1.5rem;
|
|
13
6
|
}
|
|
14
7
|
:host[open] {
|
|
15
8
|
position: relative;
|
|
16
9
|
z-index: 3;
|
|
17
10
|
background-color: rgb(var(--smoothly-default-color));
|
|
18
|
-
border
|
|
19
|
-
border-
|
|
20
|
-
|
|
11
|
+
border: 2px solid rgb(var(--smoothly-dark-color));
|
|
12
|
+
border-bottom: none;
|
|
13
|
+
}
|
|
14
|
+
:host smoothly-icon {
|
|
15
|
+
width: 0.6rem;
|
|
16
|
+
float: left;
|
|
17
|
+
padding: 0 0.3rem;
|
|
18
|
+
transition: transform 0.2s;
|
|
19
|
+
}
|
|
20
|
+
:host[open] smoothly-icon {
|
|
21
|
+
transform: rotate(90deg);
|
|
22
|
+
}
|
|
23
|
+
aside {
|
|
24
|
+
display: flex;
|
|
21
25
|
}
|
|
26
|
+
.hide {
|
|
27
|
+
display: none;
|
|
28
|
+
}
|
|
29
|
+
|
|
22
30
|
.slot-detail {
|
|
23
31
|
position: relative;
|
|
24
32
|
background-color: rgb(var(--smoothly-default-color));
|
|
25
33
|
width: 104%;
|
|
26
34
|
left: -2%;
|
|
27
|
-
border-left
|
|
28
|
-
border-left-color: rgb(var(--smoothly-tertiary-color));
|
|
35
|
+
border-left: 2px solid rgb(var(--smoothly-tertiary-color));
|
|
29
36
|
box-shadow: 0px 0px 5px 4px rgb(var(--smoothly-dark-color), 0.5);
|
|
30
37
|
box-sizing: border-box;
|
|
31
38
|
padding: 0.5rem 2%;
|
|
32
39
|
}
|
|
33
|
-
|
|
34
|
-
width: 0.6rem;
|
|
35
|
-
height: 1rem;
|
|
36
|
-
float: left;
|
|
37
|
-
padding-left: 0.2rem;
|
|
38
|
-
padding-right: 0.2rem;
|
|
39
|
-
padding-bottom: 0.5rem;
|
|
40
|
-
transition: transform 0.2s;
|
|
41
|
-
}
|
|
42
|
-
:host[open] smoothly-icon {
|
|
43
|
-
transform: rotate(90deg);
|
|
44
|
-
}
|
|
40
|
+
|
|
@@ -19,7 +19,7 @@ export class TableExpandableRow {
|
|
|
19
19
|
render() {
|
|
20
20
|
return (h(Host, { style: { textAlign: this.align } },
|
|
21
21
|
h("slot", null),
|
|
22
|
-
h("
|
|
22
|
+
h("aside", null,
|
|
23
23
|
h("smoothly-icon", { name: "chevron-forward", size: "tiny" })),
|
|
24
24
|
h("tr", { ref: e => (this.expansionElement = e) },
|
|
25
25
|
h("td", { colSpan: 999, class: !this.open ? "hide" : "" },
|
|
@@ -1,43 +1,44 @@
|
|
|
1
1
|
:host {
|
|
2
|
-
display: table-row;
|
|
3
|
-
border: 1px solid rgb(var(--smoothly-default-color));
|
|
2
|
+
display: table-row-group;
|
|
4
3
|
cursor: pointer;
|
|
5
|
-
|
|
4
|
+
line-height: 1.5rem;
|
|
6
5
|
}
|
|
7
|
-
|
|
8
|
-
display: none;
|
|
9
|
-
}
|
|
10
|
-
.slot-detail {
|
|
6
|
+
:host[open] {
|
|
11
7
|
position: relative;
|
|
8
|
+
z-index: 3;
|
|
12
9
|
background-color: rgb(var(--smoothly-default-color));
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
border-left-style: solid;
|
|
16
|
-
border-left-color: rgb(var(--smoothly-tertiary-color));
|
|
17
|
-
box-shadow: 0px 0px 5px 2px rgb(var(--smoothly-dark-color), 0.5);
|
|
18
|
-
box-sizing: border-box;
|
|
19
|
-
padding: 0.5rem 2%;
|
|
10
|
+
border: 2px solid rgb(var(--smoothly-dark-color));
|
|
11
|
+
border-bottom: none;
|
|
20
12
|
}
|
|
21
13
|
:host smoothly-icon {
|
|
22
14
|
width: 0.6rem;
|
|
23
15
|
height: 1rem;
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
padding-bottom: 0.5rem;
|
|
16
|
+
position: absolute;
|
|
17
|
+
right: 1rem;
|
|
18
|
+
top: -1.8rem;
|
|
28
19
|
transition: transform 0.2s;
|
|
29
20
|
}
|
|
30
21
|
:host[open] smoothly-icon {
|
|
31
22
|
transform: rotate(90deg);
|
|
32
23
|
}
|
|
33
|
-
|
|
34
|
-
|
|
24
|
+
|
|
25
|
+
aside {
|
|
26
|
+
display: table-row;
|
|
27
|
+
position: relative;
|
|
35
28
|
}
|
|
36
|
-
|
|
29
|
+
|
|
30
|
+
.hide {
|
|
31
|
+
display: none;
|
|
32
|
+
}
|
|
33
|
+
.slot-detail {
|
|
37
34
|
position: relative;
|
|
38
|
-
z-index: 3;
|
|
39
35
|
background-color: rgb(var(--smoothly-default-color));
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
36
|
+
width: 104%;
|
|
37
|
+
left: -2%;
|
|
38
|
+
border-left-style: solid;
|
|
39
|
+
border-left-color: rgb(var(--smoothly-tertiary-color));
|
|
40
|
+
box-shadow: 0px 0px 4px 2px rgb(var(--smoothly-dark-color));
|
|
41
|
+
box-sizing: border-box;
|
|
42
|
+
padding: 0.5rem 2%;
|
|
43
43
|
}
|
|
44
|
+
|
|
@@ -1,14 +1,9 @@
|
|
|
1
1
|
:host {
|
|
2
2
|
display: table;
|
|
3
|
-
|
|
3
|
+
border-collapse: collapse;
|
|
4
4
|
border: 1px solid rgb(var(--smoothly-dark-color));
|
|
5
|
-
width: 80
|
|
5
|
+
width: var(--table-width, 80%);
|
|
6
6
|
box-sizing: border-box;
|
|
7
7
|
background-color: rgb(var(--smoothly-default-color));
|
|
8
|
-
margin:
|
|
9
|
-
padding-bottom: 0.5rem;
|
|
10
|
-
}
|
|
11
|
-
.slot-detail > div {
|
|
12
|
-
padding: 10rem 0;
|
|
13
|
-
margin-left: 10rem;
|
|
8
|
+
margin: auto;
|
|
14
9
|
}
|
|
@@ -48769,7 +48769,7 @@ const SmoothlySvg$1 = class extends HTMLElement {
|
|
|
48769
48769
|
static get style() { return styleCss$c; }
|
|
48770
48770
|
};
|
|
48771
48771
|
|
|
48772
|
-
const styleCss$b = "
|
|
48772
|
+
const styleCss$b = "[open].sc-smoothly-tab-h{border-bottom:3px solid rgb(var(--smoothly-primary-color));box-sizing:border-box;margin-bottom:-3px}.hide.sc-smoothly-tab{display:none}label.sc-smoothly-tab{display:block;padding:.5rem;background-color:transparent;width:auto}";
|
|
48773
48773
|
|
|
48774
48774
|
const SmoothlyTab$1 = class extends HTMLElement {
|
|
48775
48775
|
constructor() {
|
|
@@ -48800,7 +48800,7 @@ const SmoothlyTab$1 = class extends HTMLElement {
|
|
|
48800
48800
|
static get style() { return styleCss$b; }
|
|
48801
48801
|
};
|
|
48802
48802
|
|
|
48803
|
-
const styleCss$a = ".sc-smoothly-tab-switch-h{display:flex;flex-direction:row;
|
|
48803
|
+
const styleCss$a = ".sc-smoothly-tab-switch-h{display:flex;flex-direction:row;justify-content:space-around;border-bottom:3px solid rgb(var(--smoothly-default-shade))}";
|
|
48804
48804
|
|
|
48805
48805
|
const SmoothlyTabSwitch$1 = class extends HTMLElement {
|
|
48806
48806
|
constructor() {
|
|
@@ -48827,7 +48827,7 @@ const SmoothlyTabSwitch$1 = class extends HTMLElement {
|
|
|
48827
48827
|
static get style() { return styleCss$a; }
|
|
48828
48828
|
};
|
|
48829
48829
|
|
|
48830
|
-
const styleCss$9 = ".sc-smoothly-table-h{display:table;
|
|
48830
|
+
const styleCss$9 = ".sc-smoothly-table-h{display:table;border-collapse:collapse;border:1px solid rgb(var(--smoothly-dark-color));width:var(--table-width, 80%);box-sizing:border-box;background-color:rgb(var(--smoothly-default-color));margin:auto}";
|
|
48831
48831
|
|
|
48832
48832
|
const Table = class extends HTMLElement {
|
|
48833
48833
|
constructor() {
|
|
@@ -48845,7 +48845,7 @@ const Table = class extends HTMLElement {
|
|
|
48845
48845
|
static get style() { return styleCss$9; }
|
|
48846
48846
|
};
|
|
48847
48847
|
|
|
48848
|
-
const styleCss$8 = ".sc-smoothly-table-cell-h{display:table-cell;
|
|
48848
|
+
const styleCss$8 = ".sc-smoothly-table-cell-h{display:table-cell;line-height:1.5rem;white-space:nowrap;padding:0.3rem 0 0.3rem 1rem}";
|
|
48849
48849
|
|
|
48850
48850
|
const TableCell = class extends HTMLElement {
|
|
48851
48851
|
constructor() {
|
|
@@ -48867,14 +48867,14 @@ const TableDemo = class extends HTMLElement {
|
|
|
48867
48867
|
}
|
|
48868
48868
|
render() {
|
|
48869
48869
|
return [
|
|
48870
|
-
h("smoothly-table", null, h("smoothly-table-row", null, h("smoothly-table-header", null, "Header A"), h("smoothly-table-header", null, "Header B"), h("smoothly-table-header", null, "Header C"), h("smoothly-table-header", null, "Header D")
|
|
48871
|
-
h("smoothly-table", null, h("smoothly-table-row", null, h("smoothly-table-header", null, "Header A"), h("smoothly-table-
|
|
48870
|
+
h("smoothly-table", null, h("smoothly-table-row", null, h("smoothly-table-header", null, "Header A"), h("smoothly-table-header", null, "Header B"), h("smoothly-table-header", null, "Header C"), h("smoothly-table-header", null, "Header D")), h("smoothly-table-row", null, h("smoothly-table-expandable-cell", null, "normal row (exp.cell)", h("div", { slot: "detail" }, "expandable cell 1 content")), h("smoothly-table-expandable-cell", null, "expandable cell", h("div", { slot: "detail" }, "expandable cell 2 content")), h("smoothly-table-expandable-cell", null, "expandable cell", h("div", { slot: "detail" }, "expandable cell 3 content")), h("smoothly-table-expandable-cell", null, "expandable cell", h("div", { slot: "detail" }, "expandable cell 4 content"))), h("smoothly-table-row", null, h("smoothly-table-cell", null, "normal row (nor.cell)\""), h("smoothly-table-cell", null, "normal cell"), h("smoothly-table-expandable-cell", null, "expandable cell", h("div", { slot: "detail" }, "expandable cell details.")), h("smoothly-table-expandable-cell", null, "expandable cell", h("div", { slot: "detail" }, "expandable cell details."))), h("smoothly-table-expandable-row", null, h("smoothly-table-cell", null, "expandable row (nor.cell)"), h("smoothly-table-cell", null, "Normal cell"), h("smoothly-table-cell", null, "normal cell"), h("smoothly-table-cell", null, "Normal cell"), h("div", { slot: "detail" }, "expandable row content"))),
|
|
48871
|
+
h("smoothly-table", null, h("smoothly-table-row", null, h("smoothly-table-header", null, "Header A")), h("smoothly-table-expandable-row", null, h("smoothly-table-cell", null, "A Content"), h("div", { slot: "detail" }, h("smoothly-tab-switch", null, h("smoothly-tab", { label: "innertable 1", open: true }, h("smoothly-table", null, h("smoothly-table-row", null, h("smoothly-table-header", null, "Header B")), h("smoothly-table-expandable-row", null, "B Content"))), h("smoothly-tab", { label: "innertable 2" }, h("smoothly-table", null, h("smoothly-table-row", null, h("smoothly-table-header", null, "Header C")), h("smoothly-table-expandable-row", null, h("smoothly-table-cell", null, "C Content")))))))),
|
|
48872
48872
|
];
|
|
48873
48873
|
}
|
|
48874
48874
|
static get style() { return styleCss$7; }
|
|
48875
48875
|
};
|
|
48876
48876
|
|
|
48877
|
-
const styleCss$6 = ".sc-smoothly-table-expandable-cell-h{display:table-cell;
|
|
48877
|
+
const styleCss$6 = ".sc-smoothly-table-expandable-cell-h{display:table-cell;padding:0.3rem 0 0.3rem 0;cursor:pointer;line-height:1.5rem}[open].sc-smoothly-table-expandable-cell-h{position:relative;z-index:3;background-color:rgb(var(--smoothly-default-color));border:2px solid rgb(var(--smoothly-dark-color));border-bottom:none}.sc-smoothly-table-expandable-cell-h smoothly-icon.sc-smoothly-table-expandable-cell{width:0.6rem;float:left;padding:0 0.3rem;transition:transform 0.2s}[open].sc-smoothly-table-expandable-cell-h smoothly-icon.sc-smoothly-table-expandable-cell{transform:rotate(90deg)}aside.sc-smoothly-table-expandable-cell{display:flex}.hide.sc-smoothly-table-expandable-cell{display:none}.slot-detail.sc-smoothly-table-expandable-cell{position:relative;background-color:rgb(var(--smoothly-default-color));width:104%;left:-2%;border-left:2px solid rgb(var(--smoothly-tertiary-color));box-shadow:0px 0px 5px 4px rgb(var(--smoothly-dark-color), 0.5);box-sizing:border-box;padding:0.5rem 2%}";
|
|
48878
48878
|
|
|
48879
48879
|
const TableExpandableCell = class extends HTMLElement {
|
|
48880
48880
|
constructor() {
|
|
@@ -48904,7 +48904,7 @@ const TableExpandableCell = class extends HTMLElement {
|
|
|
48904
48904
|
}
|
|
48905
48905
|
}
|
|
48906
48906
|
render() {
|
|
48907
|
-
return (h(Host, { style: { textAlign: this.align } }, h("
|
|
48907
|
+
return (h(Host, { style: { textAlign: this.align } }, h("aside", null, h("smoothly-icon", { name: "chevron-forward", size: "tiny" }), h("slot", null)), h("tr", { ref: e => (this.expansionElement = e) }, h("td", { colSpan: 999, class: !this.open ? "hide" : "" }, h("div", { class: "slot-detail" }, h("slot", { name: "detail" }))))));
|
|
48908
48908
|
}
|
|
48909
48909
|
get element() { return this; }
|
|
48910
48910
|
static get watchers() { return {
|
|
@@ -48913,7 +48913,7 @@ const TableExpandableCell = class extends HTMLElement {
|
|
|
48913
48913
|
static get style() { return styleCss$6; }
|
|
48914
48914
|
};
|
|
48915
48915
|
|
|
48916
|
-
const styleCss$5 = ".sc-smoothly-table-expandable-row-h{display:table-row
|
|
48916
|
+
const styleCss$5 = ".sc-smoothly-table-expandable-row-h{display:table-row-group;cursor:pointer;line-height:1.5rem}[open].sc-smoothly-table-expandable-row-h{position:relative;z-index:3;background-color:rgb(var(--smoothly-default-color));border:2px solid rgb(var(--smoothly-dark-color));border-bottom:none}.sc-smoothly-table-expandable-row-h smoothly-icon.sc-smoothly-table-expandable-row{width:0.6rem;height:1rem;position:absolute;right:1rem;top:-1.8rem;transition:transform 0.2s}[open].sc-smoothly-table-expandable-row-h smoothly-icon.sc-smoothly-table-expandable-row{transform:rotate(90deg)}aside.sc-smoothly-table-expandable-row{display:table-row;position:relative}.hide.sc-smoothly-table-expandable-row{display:none}.slot-detail.sc-smoothly-table-expandable-row{position:relative;background-color:rgb(var(--smoothly-default-color));width:104%;left:-2%;border-left-style:solid;border-left-color:rgb(var(--smoothly-tertiary-color));box-shadow:0px 0px 4px 2px rgb(var(--smoothly-dark-color));box-sizing:border-box;padding:0.5rem 2%}";
|
|
48917
48917
|
|
|
48918
48918
|
const TableExpandableRow = class extends HTMLElement {
|
|
48919
48919
|
constructor() {
|
|
@@ -48936,7 +48936,7 @@ const TableExpandableRow = class extends HTMLElement {
|
|
|
48936
48936
|
this.element.after(this.expansionElement);
|
|
48937
48937
|
}
|
|
48938
48938
|
render() {
|
|
48939
|
-
return (h(Host, { style: { textAlign: this.align } }, h("slot", null), h("
|
|
48939
|
+
return (h(Host, { style: { textAlign: this.align } }, h("slot", null), h("aside", null, h("smoothly-icon", { name: "chevron-forward", size: "tiny" })), h("tr", { ref: e => (this.expansionElement = e) }, h("td", { colSpan: 999, class: !this.open ? "hide" : "" }, h("div", { class: "slot-detail" }, h("slot", { name: "detail" }))))));
|
|
48940
48940
|
}
|
|
48941
48941
|
get element() { return this; }
|
|
48942
48942
|
static get watchers() { return {
|
|
@@ -48945,7 +48945,7 @@ const TableExpandableRow = class extends HTMLElement {
|
|
|
48945
48945
|
static get style() { return styleCss$5; }
|
|
48946
48946
|
};
|
|
48947
48947
|
|
|
48948
|
-
const styleCss$4 = ".sc-smoothly-table-header-h{display:table-cell;line-height:2.5rem;background-color:rgb(var(--smoothly-color-shade));border-bottom:1px solid rgb(var(--smoothly-dark-color));padding-left:1rem;font-weight:bold
|
|
48948
|
+
const styleCss$4 = ".sc-smoothly-table-header-h{display:table-cell;line-height:2.5rem;background-color:rgb(var(--smoothly-color-shade));border-bottom:1px solid rgb(var(--smoothly-dark-color));padding-left:1rem;font-weight:bold}";
|
|
48949
48949
|
|
|
48950
48950
|
const TableHeader = class extends HTMLElement {
|
|
48951
48951
|
constructor() {
|
|
@@ -48958,7 +48958,7 @@ const TableHeader = class extends HTMLElement {
|
|
|
48958
48958
|
static get style() { return styleCss$4; }
|
|
48959
48959
|
};
|
|
48960
48960
|
|
|
48961
|
-
const styleCss$3 = ".sc-smoothly-table-row-h{display:table-row;
|
|
48961
|
+
const styleCss$3 = ".sc-smoothly-table-row-h{display:table-row;cursor:default;line-height:1.5rem}.hide.sc-smoothly-table-row{display:none}";
|
|
48962
48962
|
|
|
48963
48963
|
const TableRow = class extends HTMLElement {
|
|
48964
48964
|
constructor() {
|