Merge pull request #202 from silinternational/develop

Release 10.1.1

components/custom/Badge/Badge.svelte

@@ -32,7 +32,7 @@ span {
 </style>
 
 <span
-  class="mdc-typography dib text-align-center white fs-16 {$$props.class}"
+  class="mdc-typography dib text-align-center white fs-16 {$$props.class || ''}"
   class:bordered
   style="--theme-color: {color}; --bg-color: {transparentColor}; --border-radius: {borderRadius}; --padding: {padding}"
 >

components/custom/DateInput/DateInput.svelte

@@ -107,7 +107,7 @@ const focus = (node) => autofocus && node.focus()
 }
 </style>
 
-<label class="{$$props.class} custom-field">
+<label class="{$$props.class || ''} custom-field">
   <input
     type="date"
     {required}

components/custom/FileDropArea/FileDropArea.svelte

@@ -71,7 +71,7 @@ form > * {
 
 <div
   id="drop-area"
-  class="br-8px {$$props.class}"
+  class="br-8px {$$props.class || ''}"
   class:highlighted
   on:dragenter|preventDefault|stopPropagation={highlight}
   on:dragleave|preventDefault|stopPropagation={unhighlight}

components/custom/Form/Form.svelte

@@ -68,7 +68,7 @@ const listenForBlurOnForm = (form) => {
   bind:this={form}
   on:reset={resetSelf}
   {id}
-  class="w-100 {$$props.class}"
+  class="w-100 {$$props.class || ''}"
   on:submit|preventDefault
   autocomplete="off"
 >

components/custom/SearchableSelect/SearchableSelect.svelte

@@ -67,12 +67,12 @@ const onChange = () => {
 }
 </style>
 
-<label class="custom-field" style="--field-padding: {padding}; {$$props.class}">
+<label class="custom-field" style="--field-padding: {padding}; {$$props.class || ''}">
   <input
     autocomplete="off"
     {disabled}
     {maxlength}
-    class="fs-14 {$$props.class}"
+    class="fs-14 {$$props.class || ''}"
     style="width: {width}"
     {required}
     list={randomId}

components/custom/StaticChip/StaticChip.svelte

@@ -15,7 +15,7 @@ export let bgColor = '#e5e5e5'
 </style>
 
 <div
-  class="mdc-typography chip black flex justify-center align-items-center mb-1 mr-2 fs-14 br-16px {$$props.class}"
+  class="mdc-typography chip black flex justify-center align-items-center mb-1 mr-2 fs-14 br-16px {$$props.class || ''}"
   style="--theme-color: {bgColor}"
 >
   <div class="chip-content flex align-items-center">

components/mdc/Button/Button.svelte

@@ -20,7 +20,7 @@ onMount(() => {
 
 {#if url}
   <a
-    class="mdc-button {$$props.class}"
+    class="mdc-button {$$props.class || ''}"
     href={url}
     role="button"
     class:mdc-button--outlined={outlined}
@@ -44,7 +44,7 @@ onMount(() => {
   </a>
 {:else}
   <button
-    class="mdc-button {$$props.class}"
+    class="mdc-button {$$props.class || ''}"
     class:mdc-button--outlined={outlined}
     class:mdc-button--raised={raised}
     {disabled}

components/mdc/Card/Card.svelte

@@ -27,7 +27,7 @@ $: tabindex = isClickable ? 0 : undefined
 
 <div
   {tabindex}
-  class="mdc-card mdc-typography {$$props.class}"
+  class="mdc-card mdc-typography {$$props.class || ''}"
   style="background-color: {color}"
   class:mdc-card--outlined={outlined}
   class:mdc-card__primary-action={isClickable}

components/mdc/Checkbox/Checkbox.svelte

@@ -30,7 +30,7 @@ onMount(() => {
 const handleChange = () => dispatch(checkbox.checked ? 'checked' : 'unchecked')
 </script>
 
-<div class="mdc-form-field {$$props.class}" bind:this={formFieldElement}>
+<div class="mdc-form-field {$$props.class || ''}" bind:this={formFieldElement}>
   <div class="mdc-checkbox" bind:this={checkboxElement}>
     <input type="checkbox" {disabled} on:change={handleChange} class="mdc-checkbox__native-control" id={inputID} />
     <div class="mdc-checkbox__background">

components/mdc/CustomCard/CustomCard.svelte

@@ -26,7 +26,7 @@ img {
 }
 </style>
 
-<Card class="h-100 py-1 {$$props.class}">
+<Card class="h-100 py-1 {$$props.class || ''}">
   <div class="flex justify-center">
     <img class="w-100" {src} {alt} class:disabled />
   </div>

components/mdc/Datatable/Data.svelte

@@ -1,3 +1,3 @@
-<tbody class="mdc-data-table__content {$$props.class}">
+<tbody class="mdc-data-table__content {$$props.class || ''}">
   <slot />
 </tbody>

components/mdc/Datatable/DataRow.svelte

@@ -6,6 +6,6 @@ export let clickable = false
 const rowId = generateRandomID('row-id-')
 </script>
 
-<tr on:click on:keydown data-row-id={rowId} class="mdc-data-table__row {$$props.class}" class:pointer={clickable}>
+<tr on:click on:keydown data-row-id={rowId} class="mdc-data-table__row {$$props.class || ''}" class:pointer={clickable}>
   <slot {rowId} />
 </tr>

components/mdc/Datatable/DataRowItem.svelte

@@ -3,6 +3,6 @@ export let numeric = false
 export let colspan = 1
 </script>
 
-<td class="mdc-data-table__cell {$$props.class}" class:mdc-data-table__cell--numeric={numeric} {colspan}
+<td class="mdc-data-table__cell {$$props.class || ''}" class:mdc-data-table__cell--numeric={numeric} {colspan}
   ><slot /></td
 >

components/mdc/Datatable/Datatable.svelte

@@ -43,7 +43,7 @@ onMount(() => {
 $: numberOfCheckboxes && dataTable?.layout()
 </script>
 
-<div class="mdc-data-table w-100 {$$props.class}" bind:this={element}>
+<div class="mdc-data-table w-100 {$$props.class || ''}" bind:this={element}>
   <div class="mdc-data-table__table-container">
     <table class="mdc-data-table__table" aria-label={label}>
       <slot />

components/mdc/Datatable/DatatableCheckbox.svelte

@@ -10,7 +10,7 @@ const dispatch = createEventDispatcher()
 </script>
 
 <td
-  class="mdc-data-table__cell mdc-data-table__cell--checkbox {$$props.class}"
+  class="mdc-data-table__cell mdc-data-table__cell--checkbox {$$props.class || ''}"
   on:click
   on:keypress
   on:keyup

components/mdc/Datatable/DatatableCheckboxHeader.svelte

@@ -1,5 +1,5 @@
 <th
-  class="mdc-data-table__header-cell mdc-data-table__header-cell--checkbox {$$props.class}"
+  class="mdc-data-table__header-cell mdc-data-table__header-cell--checkbox {$$props.class || ''}"
   role="columnheader"
   scope="col"
 >

components/mdc/Datatable/Header.svelte

@@ -1,5 +1,5 @@
 <thead>
-  <tr class="mdc-data-table__header-row {$$props.class}">
+  <tr class="mdc-data-table__header-row {$$props.class || ''}">
     <slot />
   </tr>
 </thead>

components/mdc/Datatable/HeaderItem.svelte

@@ -11,7 +11,7 @@ const labelID = generateRandomID('column-label-')
 </script>
 
 <th
-  class="mdc-data-table__header-cell {$$props.class} mdc-data-table__header-cell--with-sort"
+  class="mdc-data-table__header-cell {$$props.class || ''} mdc-data-table__header-cell--with-sort"
   class:mdc-data-table__header-cell--numeric={numeric}
   role="columnheader"
   scope="col"

components/mdc/Dialog/Alert.svelte

@@ -56,7 +56,7 @@ i.material-icons {
 <div class="mdc-dialog" bind:this={element}>
   <div class="mdc-dialog__container">
     <div
-      class="mdc-dialog__surface {$$props.class}"
+      class="mdc-dialog__surface {$$props.class || ''}"
       role="alertdialog"
       aria-modal="true"
       aria-labelledby="title"

components/mdc/Dialog/Simple.svelte

@@ -38,7 +38,7 @@ const fromAction = (s) => JSON.parse(s)
 <div class="mdc-dialog" bind:this={element}>
   <div class="mdc-dialog__container">
     <div
-      class="mdc-dialog__surface {$$props.class}"
+      class="mdc-dialog__surface {$$props.class || ''}"
       role="alertdialog"
       aria-modal="true"
       aria-labelledby="dialog-title"

components/mdc/Drawer/Drawer.svelte

@@ -111,7 +111,7 @@ main {
 <svelte:window on:resize={showAppropriateThings} />
 
 <aside
-  class="mdc-drawer {$$props.class}"
+  class="mdc-drawer {$$props.class || ''}"
   class:mdc-drawer--modal={modal}
   class:mdc-drawer--dismissible={dismissible}
   bind:this={element}

components/mdc/Fab/Fab.svelte

@@ -28,23 +28,23 @@ onMount(() => {
 </style>
 
 {#if mini}
-  <button on:click={action} class="mdc-fab mdc-fab--mini {$$props.class}" aria-label={label} bind:this={element}>
+  <button on:click={action} class="mdc-fab mdc-fab--mini {$$props.class || ''}" aria-label={label} bind:this={element}>
     <div class="mdc-fab__ripple" />
     <span class="mdc-fab__icon material-icons">{icon}</span>
   </button>
 {:else if extended}
-  <button on:click={action} class="mdc-fab mdc-fab--extended {$$props.class}" bind:this={element}>
+  <button on:click={action} class="mdc-fab mdc-fab--extended {$$props.class || ''}" bind:this={element}>
     <div class="mdc-fab__ripple" />
     <span class="material-icons mdc-fab__icon">{icon}</span>
     <span class="mdc-fab__label">{label}</span>
   </button>
 {:else if url}
-  <a class="mdc-fab {$$props.class}" aria-label={label} bind:this={element} href={url} {target}>
+  <a class="mdc-fab {$$props.class || ''}" aria-label={label} bind:this={element} href={url} {target}>
     <div class="mdc-fab__ripple" />
     <span class="mdc-fab__icon material-icons">{icon}</span>
   </a>
 {:else}
-  <button on:click={action} class="mdc-fab {$$props.class}" aria-label={label} bind:this={element}>
+  <button on:click={action} class="mdc-fab {$$props.class || ''}" aria-label={label} bind:this={element}>
     <div class="mdc-fab__ripple" />
     <span class="mdc-fab__icon material-icons">{icon}</span>
   </button>

components/mdc/IconButton/IconButton.svelte

@@ -23,7 +23,7 @@ onMount(() => {
   <a
     href={url}
     role="button"
-    class="mdc-icon-button material-icons {$$props.class}"
+    class="mdc-icon-button material-icons {$$props.class || ''}"
     aria-label={ariaLabel}
     {disabled}
     {target}
@@ -39,7 +39,7 @@ onMount(() => {
   </a>
 {:else}
   <button
-    class="mdc-icon-button material-icons {$$props.class}"
+    class="mdc-icon-button material-icons {$$props.class || ''}"
     aria-label={ariaLabel}
     {disabled}
     on:click

components/mdc/List/Divider.svelte

@@ -1 +1 @@
-<li role="separator" class="mdc-deprecated-list-divider {$$props.class}" />
+<li role="separator" class="mdc-deprecated-list-divider {$$props.class || ''}" />

components/mdc/List/Item.svelte

@@ -36,7 +36,7 @@ img {
 
 <li
   bind:this={element}
-  class="mdc-deprecated-list-item {$$props.class}"
+  class="mdc-deprecated-list-item {$$props.class || ''}"
   class:mdc-deprecated-list-item--activated={activated}
   class:mdc-deprecated-list-item--disabled={nonInteractive}
   data-mdc-dialog-action={$$props['data-mdc-dialog-action']}

components/mdc/List/List.svelte

@@ -20,7 +20,7 @@ ul {
 </style>
 
 <ul
-  class="mdc-deprecated-list {$$props.class}"
+  class="mdc-deprecated-list {$$props.class || ''}"
   class:mdc-deprecated-list--two-line={twoLine}
   class:mdc-deprecated-list--avatar-list={avatar}
   bind:this={element}

components/mdc/Menu/Menu.svelte

@@ -47,7 +47,7 @@ i {
 <!-- mdc-menu doesn't have a method to let us know when it closes so this listens for clicks -->
 <svelte:body on:click={closeMenuHandler} />
 <div id="toolbar" class="toolbar mdc-menu-surface--anchor">
-  <div class="mdc-menu mdc-menu-surface {$$props.class}" bind:this={element}>
+  <div class="mdc-menu mdc-menu-surface {$$props.class || ''}" bind:this={element}>
     <ul class="mdc-deprecated-list" role="menu" aria-hidden="true" aria-orientation="vertical" tabindex="-1">
       {#each menuItems as { icon, label, url, subtitle, action }, i}
         <!-- svelte-ignore a11y-invalid-attribute -->

components/mdc/Page/Page.svelte

@@ -14,7 +14,7 @@ $: $appBarTitle = title
 </script>
 
 <slot name="tabbar" />
-<div class="mdc-layout-grid {$$props.class}">
+<div class="mdc-layout-grid {$$props.class || ''}">
   <div class="mdc-layout-grid__inner">
     {#if layout == 'default'}
       <div class={center ? `${cell12} flex column align-items-center` : `${cell12}`}>

components/mdc/Page/Subheader.svelte

@@ -1,3 +1,3 @@
-<h3 class="mdc-typography--subtitle2 {$$props.class}">
+<h3 class="mdc-typography--subtitle2 {$$props.class || ''}">
   <slot />
 </h3>

components/mdc/Progress/Circular.svelte

@@ -23,7 +23,7 @@ onMount(() => {
 
 <!-- from docs: IMPORTANT: Do not introduce space between the adjacent </div><div> tags below. Doing so will produce unwanted visual artifacts. -->
 <div
-  class="mdc-circular-progress {$$props.class}"
+  class="mdc-circular-progress {$$props.class || ''}"
   style="width:48px;height:48px;"
   role="progressbar"
   aria-label="Progress Circle"

components/mdc/Progress/Linear.svelte

@@ -20,7 +20,7 @@ onMount(() => {
 
 <div
   role="progressbar"
-  class="mdc-linear-progress {$$props.class}"
+  class="mdc-linear-progress {$$props.class || ''}"
   class:mdc-linear-progress--indeterminate={indeterminate}
   aria-label="Progress Bar"
   aria-valuemin="0"

components/mdc/Select/Select.svelte

@@ -51,7 +51,7 @@ afterUpdate(() => {
 })
 </script>
 
-<div class="mdc-select mdc-select--outlined {$$props.class}" bind:this={element} style="width: {width}">
+<div class="mdc-select mdc-select--outlined {$$props.class || ''}" bind:this={element} style="width: {width}">
   <div class="mdc-select__anchor" role="button" aria-haspopup="listbox" aria-labelledby="{labelID} {selectedTextID}">
     <span class="mdc-select__selected-text-container">
       <span id={selectedTextID} class="mdc-select__selected-text" />

components/mdc/Snackbar/Snackbar.svelte

@@ -46,7 +46,11 @@ function open(msg) {
 </script>
 
 <aside class="mdc-snackbar" bind:this={element}>
-  <div class="mdc-snackbar__surface mdc-theme--secondary-variant {$$props.class}" role="status" aria-relevant="additions">
+  <div
+    class="mdc-snackbar__surface mdc-theme--secondary-variant {$$props.class || ''}"
+    role="status"
+    aria-relevant="additions"
+  >
     <div class="mdc-snackbar__label" aria-atomic="false" />
     {#if action}
       <div class="mdc-snackbar__actions" aria-atomic="true">

components/mdc/Switch/Switch.svelte

@@ -44,7 +44,7 @@ function onClick() {
   on:click={onClick}
   bind:this={element}
   {id}
-  class="mdc-switch {$$props.class}"
+  class="mdc-switch {$$props.class || ''}"
   class:mdc-switch--selected={selected}
   class:mdc-switch--unselected={!selected}
   type="button"

components/mdc/TabBar/Indicator.svelte

@@ -19,6 +19,6 @@ onMount(() => {
 }
 </style>
 
-<span class="mdc-tab-indicator {$$props.class}" class:mdc-tab-indicator--active={active} bind:this={element}>
+<span class="mdc-tab-indicator {$$props.class || ''}" class:mdc-tab-indicator--active={active} bind:this={element}>
   <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline" />
 </span>

components/mdc/TabBar/Scroller.svelte

@@ -11,7 +11,7 @@ onMount(() => {
 })
 </script>
 
-<div class="mdc-tab-scroller {$$props.class}" bind:this={element}>
+<div class="mdc-tab-scroller {$$props.class || ''}" bind:this={element}>
   <div class="mdc-tab-scroller__scroll-area">
     <div class="mdc-tab-scroller__scroll-content">
       <slot />

components/mdc/TabBar/Tab.svelte

@@ -28,7 +28,7 @@ onMount(() => {
 </style>
 
 <button
-  class="mdc-tab mdc-tab--stacked mdc-tab--min-width {$$props.class}"
+  class="mdc-tab mdc-tab--stacked mdc-tab--min-width {$$props.class || ''}"
   class:mdc-tab--active={active}
   role="tab"
   aria-selected={active}

components/mdc/TabBar/TabBar.svelte

@@ -23,6 +23,6 @@ onMount(() => {
 }
 </style>
 
-<div class="mdc-tab-bar {$$props.class}" role="tablist" bind:this={element}>
+<div class="mdc-tab-bar {$$props.class || ''}" role="tablist" bind:this={element}>
   <slot />
 </div>

components/mdc/TextInput/MoneyInput.svelte

@@ -64,7 +64,7 @@ const focus = (node) => autofocus && node.focus()
 </style>
 
 <label
-  class="mdc-text-field mdc-text-field--outlined {$$props.class} textfield-radius"
+  class="mdc-text-field mdc-text-field--outlined {$$props.class || ''} textfield-radius"
   class:mdc-text-field--no-label={!label}
   class:mdc-text-field--disabled={disabled}
   class:mdc-text-field--invalid={error}

components/mdc/TextInput/TextArea.svelte

@@ -64,7 +64,7 @@ label {
 </style>
 
 <label
-  class="mdc-text-field mdc-text-field--outlined mdc-text-field--textarea {$$props.class} textfield-radius"
+  class="mdc-text-field mdc-text-field--outlined mdc-text-field--textarea {$$props.class || ''} textfield-radius"
   class:mdc-text-field--no-label={!label}
   class:mdc-text-field--label-floating={label}
   class:mdc-text-field--with-internal-counter={maxlength}

components/mdc/TextInput/TextField.svelte

@@ -58,7 +58,7 @@ const focus = (node) => autofocus && node.focus()
 </style>
 
 <label
-  class="mdc-text-field mdc-text-field--outlined {$$props.class} textfield-radius"
+  class="mdc-text-field mdc-text-field--outlined {$$props.class || ''} textfield-radius"
   class:mdc-text-field--no-label={!label}
   class:mdc-text-field--disabled={disabled}
   bind:this={element}