@haiilo/catalyst 1.3.0 → 1.3.1

package/dist/cjs/cat-alert_22.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b2134f1b.js');
+const index = require('./index-e540e911.js');
 const catNotification = require('./cat-notification-bcb9fb86.js');
 const firstTabbable = require('./first-tabbable-7966cf1c.js');
 
@@ -1822,7 +1822,7 @@ const computePosition = (reference, floating, options) => computePosition$1(refe
   ...options
 });
 
-const catMenuCss = ":host{display:contents}:host([hidden]){display:none}::slotted(nav){padding-top:0.5rem;padding-bottom:0.5rem;min-width:8rem;max-width:16rem}.content{position:absolute;background:white;display:none;overflow:auto;-webkit-overflow-scrolling:touch;min-height:2rem;max-height:calc(100vh - 48px);box-shadow:0 1px 4px 0 rgba(16, 29, 48, 0.2);border-radius:var(--cat-border-radius-m, 0.25rem);z-index:100}";
+const catMenuCss = ":host{display:contents}:host([hidden]){display:none}::slotted(nav){padding-top:0.5rem;padding-bottom:0.5rem;min-width:8rem;max-width:16rem}.content{position:absolute;background:white;display:none;-webkit-overflow-scrolling:touch;min-height:2rem;max-height:calc(100vh - 48px);box-shadow:0 1px 4px 0 rgba(16, 29, 48, 0.2);border-radius:var(--cat-border-radius-m, 0.25rem);z-index:100}.content.overflow-auto{overflow:auto}";
 
 let nextUniqueId$6 = 0;
 const CatMenu = class {
@@ -1839,6 +1839,10 @@ const CatMenu = class {
      * Do not close the menu on outside clicks.
      */
     this.noAutoClose = false;
+    /**
+     * Allow overflow when menu is open.
+     */
+    this.overflow = false;
   }
   clickHandler(event) {
     if (!this.trigger) {
@@ -1879,7 +1883,7 @@ const CatMenu = class {
     }
   }
   render() {
-    return (index.h(index.Host, null, index.h("slot", { name: "trigger", ref: el => (this.triggerSlot = el) }), index.h("div", { class: "content", ref: el => (this.content = el) }, index.h("slot", { name: "content" }))));
+    return (index.h(index.Host, null, index.h("slot", { name: "trigger", ref: el => (this.triggerSlot = el) }), index.h("div", { class: { content: true, 'overflow-auto': !this.overflow }, ref: el => (this.content = el) }, index.h("slot", { name: "content" }))));
   }
   get contentId() {
     return `cat-menu-${this.id}`;
@@ -2055,22 +2059,14 @@ const CatRadioGroup = class {
     this.labelLeft = false;
   }
   onNameChanged(newName) {
-    this.catRadioGroup.forEach(catRadio => {
-      catRadio.name = newName;
-    });
+    this.catRadioGroup.forEach(catRadio => (catRadio.name = newName));
   }
   onValueChanged(newValue) {
-    this.catRadioGroup.forEach(catRadio => {
-      catRadio.checked = catRadio.value === newValue;
-    });
+    this.catRadioGroup.forEach(catRadio => (catRadio.checked = catRadio.value === newValue));
     this.updateTabIndex();
   }
   onDisabledChanged(disabled) {
-    this.catRadioGroup.forEach(catRadio => {
-      if (disabled) {
-        catRadio.disabled = disabled;
-      }
-    });
+    this.catRadioGroup.forEach(catRadio => (catRadio.disabled = disabled));
   }
   onLabelLeftChanged(labelLeft) {
     this.catRadioGroup.forEach(catRadio => {
@@ -4664,7 +4660,7 @@ const CatSelectTest = class {
     (_f = this.singleSelectTagging) === null || _f === void 0 ? void 0 : _f.connect(this.countryConnector);
   }
   render() {
-    return (index.h(index.Host, { style: { display: 'flex', flexDirection: 'column' } }, index.h("cat-select", { label: "Multiple Select", hint: "This is a hint!", ref: el => (this.multipleSelect = el), value: ['1'], placeholder: "Hello World", onCatChange: () => { var _a; return console.log((_a = this.multipleSelect) === null || _a === void 0 ? void 0 : _a.value); }, onCatBlur: e => console.log('Multiple blur', e), multiple: true, clearable: true }, index.h("span", { slot: "hint" }, "Searching for \"no\" -", '>', " no options are returned!")), index.h("cat-select", { label: "Multiple with img", ref: el => (this.multipleSelectAvatar = el), value: ['1'], placeholder: "Hello World", multiple: true, clearable: true }), index.h("cat-select", { label: "Multiple with tagging support", hint: "This is a hint!", ref: el => (this.multipleSelectTagging = el), value: { ids: ['1'], tags: ['Test', 'Albania', 'Algeria'] }, placeholder: "Select country", onCatChange: () => { var _a; return console.log((_a = this.multipleSelectTagging) === null || _a === void 0 ? void 0 : _a.value); }, multiple: true, tags: true, clearable: true }), index.h("cat-select", { label: "Single Select", hint: "This is a hint!", ref: el => (this.singleSelect = el), placeholder: "Search for a country or capital", onCatBlur: e => console.log('Single blur', e), clearable: true }), index.h("cat-select", { label: "Single with img", ref: el => (this.singleSelectAvatar = el), value: '1', onCatChange: () => { var _a; return console.log((_a = this.singleSelectAvatar) === null || _a === void 0 ? void 0 : _a.value); }, placeholder: "Search for a country or capital", clearable: true }), index.h("cat-select", { label: "Single with tagging support", ref: el => (this.singleSelectTagging = el), value: { id: '', tag: 'Albania' }, placeholder: "Search for a country or capital", onCatChange: () => { var _a; return console.log('Single', (_a = this.singleSelectTagging) === null || _a === void 0 ? void 0 : _a.value); }, tagHint: "new country", tags: true, clearable: true })));
+    return (index.h(index.Host, { style: { display: 'flex', flexDirection: 'column' } }, index.h("cat-select", { label: "Multiple Select", hint: "This is a hint!", ref: el => (this.multipleSelect = el), value: ['1'], placeholder: "Hello World", onCatChange: () => { var _a; return console.log((_a = this.multipleSelect) === null || _a === void 0 ? void 0 : _a.value); }, onCatBlur: e => console.log('Multiple blur', e), multiple: true, clearable: true }, index.h("span", { slot: "hint" }, "Searching for \"no\" -", '>', " no options are returned!")), index.h("cat-select", { label: "Multiple with img", ref: el => (this.multipleSelectAvatar = el), value: ['1'], placeholder: "Hello World", multiple: true, clearable: true }), index.h("cat-select", { label: "Multiple with tagging support", hint: "This is a hint!", ref: el => (this.multipleSelectTagging = el), value: { ids: ['1'], tags: ['Test', 'Albania', 'Algeria'] }, placeholder: "Select country", onCatChange: () => { var _a; return console.log((_a = this.multipleSelectTagging) === null || _a === void 0 ? void 0 : _a.value); }, multiple: true, tags: true, clearable: true }), index.h("cat-select", { label: "Single Select", hint: "This is a hint!", ref: el => (this.singleSelect = el), placeholder: "Search for a country or capital", onCatBlur: e => console.log('Single blur', e), clearable: true }), index.h("cat-select", { label: "Single with img", ref: el => (this.singleSelectAvatar = el), value: '1', onCatChange: () => { var _a; return console.log((_a = this.singleSelectAvatar) === null || _a === void 0 ? void 0 : _a.value); }, placeholder: "Search for a country or capital", clearable: true }), index.h("cat-menu", { overflow: true, noAutoClose: true }, index.h("cat-button", { slot: "trigger", style: { width: '50%' } }, "Open select"), index.h("div", { slot: "content", style: { width: '400px' } }, index.h("cat-select", { label: "Single with tagging support", ref: el => (this.singleSelectTagging = el), value: { id: '', tag: 'Albania' }, placeholder: "Search for a country or capital", onCatChange: () => { var _a; return console.log('Single', (_a = this.singleSelectTagging) === null || _a === void 0 ? void 0 : _a.value); }, tagHint: "new country", tags: true, clearable: true, style: { width: '90%' } })))));
   }
   get countryConnector() {
     return {