smoothly 0.2.5 → 0.2.8

package/dist/esm/smoothly-accordion_51.entry.js

@@ -46467,6 +46467,8 @@ const SmoothlyPicker = class {
     this.menuClose = createEvent(this, "menuClose", 7);
     this.notice = createEvent(this, "notice", 7);
     this.keepFocusOnReRender = false;
+    this.disabled = false;
+    this.readonly = false;
     this.emptyMenuLabel = "No Options";
     this.multiple = false;
     this.mutable = false;
@@ -46591,10 +46593,12 @@ const SmoothlyPicker = class {
     }
   }
   onClick() {
-    this.isOpen = !this.isOpen;
-    this.inputElement.focus();
-    this.highlightDefault();
-    this.filterOptions();
+    if (!(this.readonly || this.disabled)) {
+      this.isOpen = !this.isOpen;
+      this.inputElement.focus();
+      this.highlightDefault();
+      this.filterOptions();
+    }
   }
   onBlur() {
     this.inputElement.value = "";
@@ -46626,13 +46630,12 @@ const SmoothlyPicker = class {
         : []),
       ...((_d = this.options) !== null && _d !== void 0 ? _d : []),
     ];
-    return (h(Host, { style: cssVariables, "has-selection": this.selections.length > 0, "is-open": this.isOpen ? "" : undefined, onMouseDown: (e) => e.preventDefault(), onClick: () => this.onClick() }, h("div", null, h("smoothly-icon", { class: "search", name: "search-outline", size: "tiny" }), h("label", null, this.label), h("input", { type: "text", ref: (el) => (this.inputElement = el ? el : this.inputElement), onFocus: () => this.highlightDefault(), onBlur: () => this.onBlur(), placeholder: this.selections.length > 3
+    return (h(Host, { style: cssVariables, "has-selection": this.selections.length > 0, "is-open": this.isOpen ? "" : undefined, onMouseDown: (e) => e.preventDefault(), onClick: () => this.onClick() }, h("div", null, h("smoothly-icon", { part: "search", class: "search", name: "search-outline", size: "tiny" }), h("label", { part: "label-element" }, this.label), h("input", { part: "input", disabled: this.disabled, readonly: this.readonly, type: "text", ref: (el) => (this.inputElement = el ? el : this.inputElement), onFocus: () => this.highlightDefault(), onBlur: () => this.onBlur(), placeholder: this.selections.length > 3
         ? this.selections.length.toString() + " " + this.selectionName
-        : this.selections.map(selection => selection.name).join(", "), onKeyDown: e => this.onKeyDown(e), onInput: (e) => this.onInput(e) }), h("smoothly-icon", { class: "down", name: "chevron-down", size: "tiny" }), h("smoothly-icon", { class: "up", name: "chevron-up", size: "tiny" })), h("smoothly-menu-options", { style: { width: "100%" }, optionStyle: Object.assign({}, this.optionStyle), order: false, emptyMenuLabel: this.emptyMenuLabel, newOptionLabel: this.newOptionLabel, "max-menu-height": this.maxMenuHeight, mutable: this.mutable, ref: (el) => (this.menuElement = el !== null && el !== void 0 ? el : this.menuElement), onClick: e => e.stopPropagation(), resetHighlightOnOptionsChange: false, options: options })));
+        : this.selections.map(selection => selection.name).join(", "), onKeyDown: e => this.onKeyDown(e), onInput: (e) => this.onInput(e) }), h("smoothly-icon", { part: "chevron", class: "down", name: "chevron-down", size: "tiny" }), h("smoothly-icon", { part: "chevron", class: "up", name: "chevron-up", size: "tiny" })), h("smoothly-menu-options", { part: "menu-options", style: { width: "100%" }, optionStyle: Object.assign({}, this.optionStyle), order: false, emptyMenuLabel: this.emptyMenuLabel, newOptionLabel: this.newOptionLabel, "max-menu-height": this.maxMenuHeight, mutable: this.mutable, ref: (el) => (this.menuElement = el !== null && el !== void 0 ? el : this.menuElement), onClick: e => e.stopPropagation(), resetHighlightOnOptionsChange: false, options: options })));
   }
   get element() { return getElement(this); }
   static get watchers() { return {
-    "selections": ["isOpenChangeHandler"],
     "isOpen": ["isOpenChangeHandler"]
   }; }
 };
@@ -46815,6 +46818,9 @@ const SmoothlySelectDemo = class {
           { name: "Dragon", value: "dragon" },
           { name: "Kraken", value: "kraken" },
         ] }),
+      h("br", null),
+      h("smoothly-picker", { label: "readonly", readonly: true, options: [{ name: "readonly", value: "readonly" }] }),
+      h("br", null),
       h("smoothly-tab-switch", null, h("smoothly-tab", { label: "test1", open: true }, "Hello world!"), h("smoothly-tab", { label: "test2" }, "this is a test message!"), h("smoothly-tab", { label: "test3" }, "this is a test message again!")),
     ];
   }
@@ -47195,7 +47201,7 @@ const TableExpandableCell = class {
 };
 TableExpandableCell.style = styleCss$4;
 
-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%}";
+const styleCss$3 = ".sc-smoothly-table-expandable-row-h{display:table-row;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;margin-top:-1rem;margin-left:-1rem;transition:transform 0.2s}[open].sc-smoothly-table-expandable-row-h smoothly-icon.sc-smoothly-table-expandable-row{transform:rotate(90deg)}.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%}";
 
 const TableExpandableRow = class {
   constructor(hostRef) {
@@ -47217,7 +47223,7 @@ const TableExpandableRow = class {
       this.element.after(this.expansionElement);
   }
   render() {
-    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" }))))));
+    return (h(Host, { style: { textAlign: this.align } }, h("slot", 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" }))))));
   }
   get element() { return getElement(this); }
   static get watchers() { return {

package/dist/esm/smoothly.js

@@ -13,5 +13,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy([["smoothly-google-font",[[2,"smoothly-google-font",{"value":[1]}]]],["smoothly-radio-group",[[4,"smoothly-radio-group",{"orientation":[513]}]]],["smoothly-reorder",[[0,"smoothly-reorder"]]],["smoothly-trigger-sink",[[6,"smoothly-trigger-sink",{"context":[16],"destination":[1],"filter":[1]},[[0,"trigger","TriggerListener"]]]]],["smoothly-trigger-source",[[6,"smoothly-trigger-source",{"listen":[1]}]]],["smoothly-accordion_51",[[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);
+  return bootstrapLazy([["smoothly-google-font",[[2,"smoothly-google-font",{"value":[1]}]]],["smoothly-radio-group",[[4,"smoothly-radio-group",{"orientation":[513]}]]],["smoothly-reorder",[[0,"smoothly-reorder"]]],["smoothly-trigger-sink",[[6,"smoothly-trigger-sink",{"context":[16],"destination":[1],"filter":[1]},[[0,"trigger","TriggerListener"]]]]],["smoothly-trigger-source",[[6,"smoothly-trigger-source",{"listen":[1]}]]],["smoothly-accordion_51",[[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",{"disabled":[516],"readonly":[516],"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);
 });