@genesislcap/rapid-design-system 14.172.1-alpha-30b1afc.0 → 14.172.2

package/dist/custom-elements.json

@@ -10084,7 +10084,7 @@
         {
           "kind": "variable",
           "name": "rapidDialogStyles",
-          "default": "css`\n  ${foundationDialogStyles}\n  :host {\n    --color-error: ${ColorHEX.error};\n    --color-success: ${ColorHEX.success};\n    --dialog-background: ${neutralLayer2};\n\n    font-family: var(--body-font);\n    font-size: var(--type-ramp-base-font-size);\n    line-height: var(--type-ramp-base-line-height);\n  }\n\n  dialog {\n    position: fixed;\n    top: 0;\n    bottom: 0;\n    border-radius: calc(var(--control-corner-radius) * 1px);\n    border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-rest);\n    text-align: left;\n    line-height: normal;\n    box-shadow: 0 2px 15px 0 rgb(0 0 0 / 35%);\n  }\n\n  .top {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    color: var(--neutral-foreground-rest);\n    margin-bottom: calc(var(--design-unit) * 2px);\n    font-weight: 500;\n  }\n\n  .bottom {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: flex-end;\n    color: var(--neutral-foreground-rest);\n  }\n\n  :host slot:first-of-type {\n    color: ${neutralForegroundRest};\n  }\n\n  ::slotted(rapid-button) {\n    margin-top: calc(var(--design-unit) * 4px - 1px);\n  }\n\n  .content-wrapper {\n    min-width: var(--dialog-min-width);\n    min-height: var(--dialog-min-height);\n    height: fit-content;\n    width: fit-content;\n    max-width: var(--dialog-max-width);\n    max-height: var(--dialog-max-height);\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    align-items: stretch;\n  }\n\n  .close-icon:hover svg {\n    background-color: color-mix(in srgb, var(--neutral-foreground-rest), transparent 95%);\n  }\n\n  .close-icon svg g path {\n    fill: color-mix(in srgb, var(--neutral-foreground-rest), transparent 50%);\n  }\n\n  .close-icon:hover svg g path {\n    fill: var(--neutral-foreground-rest);\n  }\n\n  .close-icon:active svg {\n    background-color: var(--neutral-layer-4);\n  }\n\n  .close-icon:active svg g path {\n    fill: color-mix(in srgb, var(--neutral-foreground-rest), transparent 67%);\n  }\n`"
+          "default": "css`\n  ${foundationDialogStyles}\n  :host {\n    --color-error: ${ColorHEX.error};\n    --color-success: ${ColorHEX.success};\n    --dialog-background: ${neutralLayer2};\n\n    font-family: var(--body-font);\n    font-size: var(--type-ramp-base-font-size);\n    line-height: var(--type-ramp-base-line-height);\n  }\n\n  dialog {\n    position: fixed;\n    top: 0;\n    bottom: 0;\n    border-radius: calc(var(--control-corner-radius) * 1px);\n    border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-rest);\n    text-align: left;\n    line-height: normal;\n    box-shadow: 0 2px 15px 0 rgb(0 0 0 / 35%);\n  }\n\n  .top {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    color: var(--neutral-foreground-rest);\n    margin-bottom: calc(var(--design-unit) * 2px);\n    font-weight: 500;\n  }\n\n  .bottom {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: flex-end;\n    color: var(--neutral-foreground-rest);\n  }\n\n  :host slot:first-of-type {\n    color: ${neutralForegroundRest};\n  }\n\n  ::slotted(rapid-button) {\n    margin: calc(var(--design-unit) * 4px - 1px) calc(var(--design-unit) * 1px) 0;\n  }\n\n  .content-wrapper {\n    min-width: var(--dialog-min-width);\n    min-height: var(--dialog-min-height);\n    height: fit-content;\n    width: fit-content;\n    max-width: var(--dialog-max-width);\n    max-height: var(--dialog-max-height);\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    align-items: stretch;\n  }\n\n  .close-icon:hover svg {\n    background-color: color-mix(in srgb, var(--neutral-foreground-rest), transparent 95%);\n  }\n\n  .close-icon svg g path {\n    fill: color-mix(in srgb, var(--neutral-foreground-rest), transparent 50%);\n  }\n\n  .close-icon:hover svg g path {\n    fill: var(--neutral-foreground-rest);\n  }\n\n  .close-icon:active svg {\n    background-color: var(--neutral-layer-4);\n  }\n\n  .close-icon:active svg g path {\n    fill: color-mix(in srgb, var(--neutral-foreground-rest), transparent 67%);\n  }\n`"
         }
       ],
       "exports": [
@@ -18402,7 +18402,7 @@
           "type": {
             "text": "StoryObj"
           },
-          "default": "{\n  render: ({ name, text, countries, search, disabled }) => html`\n    <div style=\"min-height: 400px;\">\n      <rapid-multiselect\n        name=\"${name}\"\n        .options=\"${countries}\"\n        search=\"${search}\"\n        disabled=\"${disabled}\"\n      >\n        <label slot=\"label\">${text}</label>\n      </rapid-multiselect>\n    </div>\n  `,\n  args: {\n    name: 'Countries',\n    text: 'Multiselect',\n    search: true,\n    disabled: false,\n    countries: countriesList,\n    autoPosition: true,\n  },\n}"
+          "default": "{\n  render: ({ name, text, countries, search, disabled, creatable }) => html`\n    <div style=\"min-height: 400px;\">\n      <rapid-multiselect\n        name=\"${name}\"\n        .options=\"${countries}\"\n        search=\"${search}\"\n        disabled=\"${disabled}\"\n        creatable=\"${creatable}\"\n      >\n        <label slot=\"label\">${text}</label>\n      </rapid-multiselect>\n    </div>\n  `,\n  args: {\n    name: 'Countries',\n    text: 'Multiselect',\n    search: true,\n    disabled: false,\n    countries: countriesList,\n    autoPosition: true,\n    creatable: false,\n  },\n}"
         },
         {
           "kind": "variable",
@@ -18410,7 +18410,7 @@
           "type": {
             "text": "StoryObj"
           },
-          "default": "{\n  render: ({ name, text, countries, search, disabled }) => html`\n    <div style=\"min-height: 400px;\">\n      <rapid-multiselect\n        name=\"${name}\"\n        .options=\"${countries}\"\n        search=\"${search}\"\n        disabled=\"${disabled}\"\n      >\n        <label slot=\"label\">${text}</label>\n      </rapid-multiselect>\n    </div>\n  `,\n  args: {\n    name: 'Countries',\n    text: 'Disabled',\n    search: true,\n    countries: countriesList,\n    disabled: true,\n    autoPosition: true,\n  },\n}"
+          "default": "{\n  render: ({ name, text, countries, search, disabled, creatable }) => html`\n    <div style=\"min-height: 400px;\">\n      <rapid-multiselect\n        name=\"${name}\"\n        .options=\"${countries}\"\n        search=\"${search}\"\n        disabled=\"${disabled}\"\n        creatable=\"${creatable}\"\n      >\n        <label slot=\"label\">${text}</label>\n      </rapid-multiselect>\n    </div>\n  `,\n  args: {\n    name: 'Countries',\n    text: 'Disabled',\n    search: true,\n    countries: countriesList,\n    disabled: true,\n    autoPosition: true,\n    creatable: false,\n  },\n}"
         },
         {
           "kind": "variable",
@@ -18418,7 +18418,7 @@
           "type": {
             "text": "StoryObj"
           },
-          "default": "{\n  render: ({ name, text, countries, search }) => html`\n    <div style=\"min-height: 400px;\">\n      <rapid-multiselect name=\"${name}\" .options=\"${countries}\" search=\"${search}\">\n        <label slot=\"label\">${text}</label>\n      </rapid-multiselect>\n    </div>\n  `,\n  args: {\n    name: 'Countries',\n    text: 'Disabled Options',\n    search: true,\n    countries: disabledCountriesExample,\n  },\n}"
+          "default": "{\n  render: ({ name, text, countries, search, creatable }) => html`\n    <div style=\"min-height: 400px;\">\n      <rapid-multiselect\n        name=\"${name}\"\n        .options=\"${countries}\"\n        search=\"${search}\"\n        creatable=\"${creatable}\"\n      >\n        <label slot=\"label\">${text}</label>\n      </rapid-multiselect>\n    </div>\n  `,\n  args: {\n    name: 'Countries',\n    text: 'Disabled Options',\n    search: true,\n    countries: disabledCountriesExample,\n    creatable: false,\n  },\n}"
         },
         {
           "kind": "variable",
@@ -18426,7 +18426,15 @@
           "type": {
             "text": "StoryObj"
           },
-          "default": "{\n  render: ({ name, text, countries, search, autoPosition }) => html`\n    <div style=\"min-height: 400px;\">\n      <rapid-multiselect\n        name=\"${name}\"\n        .options=\"${countries}\"\n        auto-position=\"${autoPosition}\"\n        search=\"${search}\"\n      >\n        <label slot=\"label\">${text}</label>\n      </rapid-multiselect>\n    </div>\n  `,\n  args: {\n    name: 'Countries',\n    text: 'Disabled Auto Position',\n    search: true,\n    countries: disabledCountriesExample,\n    autoPosition: false,\n  },\n}"
+          "default": "{\n  render: ({ name, text, countries, search, autoPosition, creatable }) => html`\n    <div style=\"min-height: 400px;\">\n      <rapid-multiselect\n        name=\"${name}\"\n        .options=\"${countries}\"\n        auto-position=\"${autoPosition}\"\n        search=\"${search}\"\n        creatable=\"${creatable}\"\n      >\n        <label slot=\"label\">${text}</label>\n      </rapid-multiselect>\n    </div>\n  `,\n  args: {\n    name: 'Countries',\n    text: 'Disabled Auto Position',\n    search: true,\n    countries: disabledCountriesExample,\n    autoPosition: false,\n    creatable: false,\n  },\n}"
+        },
+        {
+          "kind": "variable",
+          "name": "Creatable",
+          "type": {
+            "text": "StoryObj"
+          },
+          "default": "{\n  render: ({ name, text, countries, search, autoPosition, creatable }) => html`\n    <div style=\"min-height: 400px;\">\n      <rapid-multiselect\n        name=\"${name}\"\n        .options=\"${countries}\"\n        auto-position=\"${autoPosition}\"\n        search=\"${search}\"\n        creatable=\"${creatable}\"\n      >\n        <label slot=\"label\">${text}</label>\n      </rapid-multiselect>\n    </div>\n  `,\n  args: {\n    name: 'Countries',\n    text: 'Creatable',\n    search: true,\n    countries: disabledCountriesExample,\n    autoPosition: false,\n    creatable: true,\n  },\n}"
         }
       ],
       "exports": [
@@ -18469,6 +18477,14 @@
             "name": "AutoPosition",
             "module": "src/multiselect/multiselect.stories.ts"
           }
+        },
+        {
+          "kind": "js",
+          "name": "Creatable",
+          "declaration": {
+            "name": "Creatable",
+            "module": "src/multiselect/multiselect.stories.ts"
+          }
         }
       ]
     },
@@ -18653,6 +18669,18 @@
                 "module": "src/multiselect/multiselect.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "creatable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "inheritedFrom": {
+                "name": "Multiselect",
+                "module": "src/multiselect/multiselect.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "async",
@@ -18751,6 +18779,7 @@
               "type": {
                 "text": "string"
               },
+              "default": "''",
               "inheritedFrom": {
                 "name": "Multiselect",
                 "module": "src/multiselect/multiselect.ts"
@@ -19022,6 +19051,15 @@
                 "module": "src/multiselect/multiselect.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "showCreatable",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "Multiselect",
+                "module": "src/multiselect/multiselect.ts"
+              }
+            },
             {
               "kind": "method",
               "name": "isOptionSelected",
@@ -19083,6 +19121,14 @@
                 "module": "src/multiselect/multiselect.ts"
               }
             },
+            {
+              "kind": "method",
+              "name": "findExactMatchOptions",
+              "inheritedFrom": {
+                "name": "Multiselect",
+                "module": "src/multiselect/multiselect.ts"
+              }
+            },
             {
               "kind": "method",
               "name": "setFilter",
@@ -19091,6 +19137,14 @@
                 "module": "src/multiselect/multiselect.ts"
               }
             },
+            {
+              "kind": "method",
+              "name": "addOption",
+              "inheritedFrom": {
+                "name": "Multiselect",
+                "module": "src/multiselect/multiselect.ts"
+              }
+            },
             {
               "kind": "method",
               "name": "asyncSetFilter",

package/dist/dts/multiselect/multiselect.stories.d.ts

@@ -5,4 +5,5 @@ export declare const Primary: StoryObj;
 export declare const Disabled: StoryObj;
 export declare const DisabledOptions: StoryObj;
 export declare const AutoPosition: StoryObj;
+export declare const Creatable: StoryObj;
 //# sourceMappingURL=multiselect.stories.d.ts.map

package/dist/dts/multiselect/multiselect.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"multiselect.stories.d.ts","sourceRoot":"","sources":["../../../src/multiselect/multiselect.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAGhE,QAAA,MAAM,IAAI,EAAE,IAGX,CAAC;AACF,eAAe,IAAI,CAAC;AAqGpB,eAAO,MAAM,OAAO,EAAE,QAqBrB,CAAC;AACF,eAAO,MAAM,QAAQ,EAAE,QAqBtB,CAAC;AACF,eAAO,MAAM,eAAe,EAAE,QAc7B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,QAoB1B,CAAC"}
+{"version":3,"file":"multiselect.stories.d.ts","sourceRoot":"","sources":["../../../src/multiselect/multiselect.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAGhE,QAAA,MAAM,IAAI,EAAE,IAGX,CAAC;AACF,eAAe,IAAI,CAAC;AAqGpB,eAAO,MAAM,OAAO,EAAE,QAuBrB,CAAC;AACF,eAAO,MAAM,QAAQ,EAAE,QAuBtB,CAAC;AACF,eAAO,MAAM,eAAe,EAAE,QAoB7B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,QAsB1B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,QAsBvB,CAAC"}

package/dist/esm/dialog/dialog.styles.js

@@ -46,7 +46,7 @@ export const rapidDialogStyles = css `
   }
 
   ::slotted(rapid-button) {
-    margin-top: calc(var(--design-unit) * 4px - 1px);
+    margin: calc(var(--design-unit) * 4px - 1px) calc(var(--design-unit) * 1px) 0;
   }
 
   .content-wrapper {

package/dist/esm/multiselect/multiselect.stories.js

@@ -102,13 +102,14 @@ const disabledCountriesExample = [
     },
 ];
 export const Primary = {
-    render: ({ name, text, countries, search, disabled }) => html `
+    render: ({ name, text, countries, search, disabled, creatable }) => html `
     <div style="min-height: 400px;">
       <rapid-multiselect
         name="${name}"
         .options="${countries}"
         search="${search}"
         disabled="${disabled}"
+        creatable="${creatable}"
       >
         <label slot="label">${text}</label>
       </rapid-multiselect>
@@ -121,16 +122,18 @@ export const Primary = {
         disabled: false,
         countries: countriesList,
         autoPosition: true,
+        creatable: false,
     },
 };
 export const Disabled = {
-    render: ({ name, text, countries, search, disabled }) => html `
+    render: ({ name, text, countries, search, disabled, creatable }) => html `
     <div style="min-height: 400px;">
       <rapid-multiselect
         name="${name}"
         .options="${countries}"
         search="${search}"
         disabled="${disabled}"
+        creatable="${creatable}"
       >
         <label slot="label">${text}</label>
       </rapid-multiselect>
@@ -143,12 +146,18 @@ export const Disabled = {
         countries: countriesList,
         disabled: true,
         autoPosition: true,
+        creatable: false,
     },
 };
 export const DisabledOptions = {
-    render: ({ name, text, countries, search }) => html `
+    render: ({ name, text, countries, search, creatable }) => html `
     <div style="min-height: 400px;">
-      <rapid-multiselect name="${name}" .options="${countries}" search="${search}">
+      <rapid-multiselect
+        name="${name}"
+        .options="${countries}"
+        search="${search}"
+        creatable="${creatable}"
+      >
         <label slot="label">${text}</label>
       </rapid-multiselect>
     </div>
@@ -158,16 +167,18 @@ export const DisabledOptions = {
         text: 'Disabled Options',
         search: true,
         countries: disabledCountriesExample,
+        creatable: false,
     },
 };
 export const AutoPosition = {
-    render: ({ name, text, countries, search, autoPosition }) => html `
+    render: ({ name, text, countries, search, autoPosition, creatable }) => html `
     <div style="min-height: 400px;">
       <rapid-multiselect
         name="${name}"
         .options="${countries}"
         auto-position="${autoPosition}"
         search="${search}"
+        creatable="${creatable}"
       >
         <label slot="label">${text}</label>
       </rapid-multiselect>
@@ -179,5 +190,29 @@ export const AutoPosition = {
         search: true,
         countries: disabledCountriesExample,
         autoPosition: false,
+        creatable: false,
+    },
+};
+export const Creatable = {
+    render: ({ name, text, countries, search, autoPosition, creatable }) => html `
+    <div style="min-height: 400px;">
+      <rapid-multiselect
+        name="${name}"
+        .options="${countries}"
+        auto-position="${autoPosition}"
+        search="${search}"
+        creatable="${creatable}"
+      >
+        <label slot="label">${text}</label>
+      </rapid-multiselect>
+    </div>
+  `,
+    args: {
+        name: 'Countries',
+        text: 'Creatable',
+        search: true,
+        countries: disabledCountriesExample,
+        autoPosition: false,
+        creatable: true,
     },
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/rapid-design-system",
   "description": "Rapid Design System",
-  "version": "14.172.1-alpha-30b1afc.0",
+  "version": "14.172.2",
   "sideEffects": false,
   "license": "SEE LICENSE IN license.txt",
   "main": "dist/esm/index.js",
@@ -29,12 +29,12 @@
   },
   "devDependencies": {
     "@genesiscommunitysuccess/analyzer-import-alias-plugin": "^4.0.0",
-    "@genesislcap/genx": "14.172.1-alpha-30b1afc.0",
-    "@genesislcap/rollup-builder": "14.172.1-alpha-30b1afc.0",
-    "@genesislcap/ts-builder": "14.172.1-alpha-30b1afc.0",
-    "@genesislcap/uvu-playwright-builder": "14.172.1-alpha-30b1afc.0",
-    "@genesislcap/vite-builder": "14.172.1-alpha-30b1afc.0",
-    "@genesislcap/webpack-builder": "14.172.1-alpha-30b1afc.0",
+    "@genesislcap/genx": "14.172.2",
+    "@genesislcap/rollup-builder": "14.172.2",
+    "@genesislcap/ts-builder": "14.172.2",
+    "@genesislcap/uvu-playwright-builder": "14.172.2",
+    "@genesislcap/vite-builder": "14.172.2",
+    "@genesislcap/webpack-builder": "14.172.2",
     "@storybook/addon-coverage": "^1.0.1",
     "@storybook/addon-essentials": "^8.0.0",
     "@storybook/addon-links": "^8.0.0",
@@ -51,8 +51,8 @@
     "storybook": "^8.0.0"
   },
   "dependencies": {
-    "@genesislcap/foundation-logger": "14.172.1-alpha-30b1afc.0",
-    "@genesislcap/foundation-ui": "14.172.1-alpha-30b1afc.0",
+    "@genesislcap/foundation-logger": "14.172.2",
+    "@genesislcap/foundation-ui": "14.172.2",
     "@microsoft/fast-colors": "^5.3.1",
     "@microsoft/fast-components": "^2.30.6",
     "@microsoft/fast-element": "^1.12.0",
@@ -70,5 +70,5 @@
     "access": "public"
   },
   "customElements": "dist/custom-elements.json",
-  "gitHead": "03cac2d0ae1984bbe5f54f6792f5265fa2545476"
+  "gitHead": "a6749638692882168d42f082894d110a07f735fc"
 }