@mezzanine-ui/core 0.7.1 → 0.9.0

package/_internal/overlay-with-slide-fade/_index.scss

@@ -0,0 +1 @@
+@forward './overlay-with-slider-fade';

package/_internal/overlay-with-slide-fade/_overlay-with-slide-fade-styles.scss

@@ -0,0 +1,7 @@
+@use '~@mezzanine-ui/system/palette';
+@use '~@mezzanine-ui/system/z-index';
+@use './overlay-with-slide-fade' as *;
+
+.#{$prefix} {
+  overflow: hidden;
+}

package/_internal/overlay-with-slide-fade/_overlay-with-slider-fade.scss

@@ -0,0 +1 @@
+$prefix: mzn-overlay-with-slide-fade;

package/_internal/overlay-with-slide-fade/index.d.ts

@@ -0,0 +1 @@
+export * from './overlayWithSlideFade';

package/_internal/overlay-with-slide-fade/index.js

@@ -0,0 +1 @@
+export { overlayWithSlideFadeClasses, overlayWithSlideFadePrefix } from './overlayWithSlideFade.js';

package/_internal/overlay-with-slide-fade/overlayWithSlideFade.d.ts

@@ -0,0 +1,4 @@
+export declare const overlayWithSlideFadePrefix = "mzn-overlay-with-slide-fade";
+export declare const overlayWithSlideFadeClasses: {
+    readonly host: "mzn-overlay-with-slide-fade";
+};

package/_internal/overlay-with-slide-fade/overlayWithSlideFade.js

@@ -0,0 +1,6 @@
+const overlayWithSlideFadePrefix = 'mzn-overlay-with-slide-fade';
+const overlayWithSlideFadeClasses = {
+    host: overlayWithSlideFadePrefix,
+};
+
+export { overlayWithSlideFadeClasses, overlayWithSlideFadePrefix };

package/_styles.scss

@@ -61,6 +61,9 @@
   @include _load-styles($options, textarea);
   @include _load-styles($options, upload);
   @include _load-styles($options, upload, upload-result);
+  @include _load-styles($options, upload, upload-picture);
+  @include _load-styles($options, upload, upload-picture-block);
+  @include _load-styles($options, upload, upload-picture-wall);
   @include _load-styles($options, picker);
   @include _load-styles($options, date-range-picker);
   @include _load-styles($options, date-time-picker);

package/button/_button-styles.scss

@@ -181,7 +181,6 @@ $outlined-border-width: 1px !default;
   justify-content: center;
   align-items: center;
   text-decoration: none;
-  text-transform: uppercase;
   transition: transition.standard(background-color), transition.standard(border), transition.standard(color);
   will-change: background-color, border-color, color;
 

package/drawer/_drawer-styles.scss

@@ -15,8 +15,6 @@ $positions: top, right, bottom, left;
   }
 
   &__overlay {
-    display: relative;
-    overflow: hidden;
     z-index: z-index.get(drawer);
   }
 

package/icon/_icon-styles.scss

@@ -9,6 +9,7 @@ $spin-keyframes-name: #{$prefix}-spin !default;
 }
 
 .#{$prefix} {
+  cursor: var(--#{$prefix}-cursor);
   display: inline-block;
   width: 1em;
   height: 1em;
@@ -25,4 +26,8 @@ $spin-keyframes-name: #{$prefix}-spin !default;
   &--spin {
     animation: #{$spin-keyframes-name} 500ms infinite linear;
   }
+
+  &--size {
+    font-size: var(--#{$prefix}-size);
+  }
 }

package/icon/icon.d.ts

@@ -3,11 +3,13 @@ import { MainColor } from '@mezzanine-ui/system/palette';
 export declare type IconColor = 'inherit' | MainColor | 'disabled';
 export interface IconCssVars {
     color?: IconColor;
+    size?: number;
 }
 export declare const iconPrefix = "mzn-icon";
 export declare const iconClasses: {
     readonly host: "mzn-icon";
     readonly color: "mzn-icon--color";
     readonly spin: "mzn-icon--spin";
+    readonly size: "mzn-icon--size";
 };
 export declare function toIconCssVars(variables: IconCssVars): CssVarInterpolations;

package/icon/icon.js

@@ -6,28 +6,39 @@ const iconClasses = {
     host: iconPrefix,
     color: `${iconPrefix}--color`,
     spin: `${iconPrefix}--spin`,
+    size: `${iconPrefix}--size`,
 };
 function toIconCssVars(variables) {
-    const { color } = variables;
-    if (!color) {
-        return {};
+    const { color, size } = variables;
+    let result = {};
+    /** color mapping */
+    if (color) {
+        let colorValue;
+        if (color === 'inherit') {
+            colorValue = color;
+        }
+        else {
+            /**
+             * Use `action-disabled` color of palette as `disabled` color of icon.
+             */
+            const colorName = color === 'disabled'
+                ? 'action-disabled'
+                : color;
+            colorValue = toCssVar(`${palettePrefix}-${colorName}`);
+        }
+        result = {
+            ...result,
+            [`--${iconPrefix}-color`]: colorValue,
+        };
     }
-    let colorValue;
-    if (color === 'inherit') {
-        colorValue = color;
+    /** size mapping */
+    if (typeof size !== 'undefined') {
+        result = {
+            ...result,
+            [`--${iconPrefix}-size`]: `${size}px`,
+        };
     }
-    else {
-        /**
-         * Use `action-disabled` color of palette as `disabled` color of icon.
-         */
-        const colorName = color === 'disabled'
-            ? 'action-disabled'
-            : color;
-        colorValue = toCssVar(`${palettePrefix}-${colorName}`);
-    }
-    return {
-        [`--${iconPrefix}-color`]: colorValue,
-    };
+    return result;
 }
 
 export { iconClasses, iconPrefix, toIconCssVars };

package/input/_input-styles.scss

@@ -1,8 +1,34 @@
 @use 'sass:map';
 @use '../text-field';
+@use '../select';
 @use './input' as *;
 
 .#{$prefix} {
+  &__tags-mode {
+    display: flex;
+    flex-wrap: wrap;
+
+    .#{select.$prefix}-trigger__tags {
+      width: unset;
+    }
+
+    input {
+      width: unset;
+      flex: 1;
+    }
+
+    &__input-on-top {
+      flex-direction: column-reverse;
+    }
+
+    &:hover {
+      .#{text-field.$prefix}__clear-icon {
+        opacity: 1;
+        pointer-events: auto;
+      }
+    }
+  }
+
   input {
     padding-left: var(--#{text-field.$prefix}-padding-left);
     padding-right: var(--#{text-field.$prefix}-padding-right);

package/input/input.d.ts

@@ -3,4 +3,6 @@ export declare type InputSize = Size;
 export declare const inputPrefix = "mzn-input";
 export declare const inputClasses: {
     readonly host: "mzn-input";
+    readonly tagsMode: "mzn-input__tags-mode";
+    readonly tagsModeInputOnTop: "mzn-input__tags-mode__input-on-top";
 };

package/input/input.js

@@ -1,6 +1,8 @@
 const inputPrefix = 'mzn-input';
 const inputClasses = {
     host: inputPrefix,
+    tagsMode: `${inputPrefix}__tags-mode`,
+    tagsModeInputOnTop: `${inputPrefix}__tags-mode__input-on-top`,
 };
 
 export { inputClasses, inputPrefix };

package/message/message.js

@@ -1,10 +1,10 @@
-import { CheckCircleFilledIcon, ExclamationCircleFilledIcon, MinusCircleFilledIcon, InfoCircleFilledIcon } from '@mezzanine-ui/icons';
+import { CheckCircleFilledIcon, ExclamationCircleFilledIcon, TimesCircleFilledIcon, InfoCircleFilledIcon } from '@mezzanine-ui/icons';
 
 const messagePrefix = 'mzn-message';
 const messageIcons = {
     success: CheckCircleFilledIcon,
     warning: ExclamationCircleFilledIcon,
-    error: MinusCircleFilledIcon,
+    error: TimesCircleFilledIcon,
     info: InfoCircleFilledIcon,
 };
 const messageClasses = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mezzanine-ui/core",
-  "version": "0.7.1",
+  "version": "0.9.0",
   "description": "Core for mezzanine-ui",
   "author": "Mezzanine",
   "repository": {
@@ -23,7 +23,7 @@
     "build:clean": "node ../../scripts/cleanBuild.js"
   },
   "dependencies": {
-    "@mezzanine-ui/icons": "^0.5.0",
+    "@mezzanine-ui/icons": "^0.7.3",
     "@mezzanine-ui/system": "^0.7.0",
     "tslib": "^2.1.0"
   }

package/page-footer/_page-footer-styles.scss

@@ -3,7 +3,6 @@
 @use './page-footer' as *;
 
 .#{$prefix} {
-  height: 32px;
   padding: spacing.level(4) spacing.level(5);
   border-top: 1px solid palette.color(border);
   background-color: palette.color(surface);

package/table/_table-styles.scss

@@ -103,6 +103,18 @@ $table-refresh-vertical-padding: 8px !default;
     &__cellWrapper {
       @include flexible;
     }
+
+    &__expandedTableWrapper {
+      padding: 0;
+    }
+
+    &__expandedTableRow {
+      background-color: palette.color(divider);
+
+      &:last-child {
+        border-bottom: none;
+      }
+    }
   }
 
   &__empty {

package/table/index.js

@@ -1 +1 @@
-export { tableBodyPrefix, tableCellPrefix, tableClasses, tableHeaderPrefix, tablePrefix } from './table.js';
+export { getCellStyle, getColumnStyle, tableBodyPrefix, tableCellPrefix, tableClasses, tableHeaderPrefix, tablePrefix } from './table.js';

package/table/table.d.ts

@@ -12,6 +12,9 @@ export declare const tableClasses: {
     readonly bodyRow: `${string}__row`;
     readonly bodyRowHighlight: `${string}__row--highlight`;
     readonly bodyRowCellWrapper: `${string}__row__cellWrapper`;
+    readonly bodyRowExpandedTableWrapper: `${string}__row__expandedTableWrapper`;
+    readonly bodyRowExpandedTable: `${string}__row__expandedTable`;
+    readonly bodyRowExpandedTableRow: `${string}__row__expandedTableRow`;
     readonly cell: string;
     readonly cellEllipsis: `${string}__ellipsis`;
     readonly selections: "mzn-table__selections";
@@ -42,7 +45,7 @@ export declare type TableColumn<SourceType> = {
     headerClassName?: string;
     width?: number;
     sorter?(a: any, b: any): number;
-    onSorted?(sortedDataSource: SourceType[]): void;
+    onSorted?(dataIndex: string, sortedType: string): void;
     editable?: boolean;
     setCellProps?(record: SourceType): TableRecord<unknown>;
     /** @default true */
@@ -50,6 +53,7 @@ export declare type TableColumn<SourceType> = {
     /** force display tooltip whenever content is hovered */
     forceShownTooltipWhenHovered?: boolean;
 };
+export declare type ExpandedTableColumn = Omit<TableColumn<TableRecord<unknown>>, 'title' | 'renderTitle' | 'align' | 'headerClassName' | 'width' | 'sorter' | 'onSorted' | 'editable' | 'setCellProps'>;
 export declare type TableFetchMore = {
     callback?(): any;
     isReachEnd?: boolean;
@@ -70,8 +74,12 @@ export interface TableRowSelection {
 /** === Feature Expandable */
 export interface TableExpandable<SourceType> {
     className?: string;
-    expandedRowRender(record: SourceType): any;
+    expandedRowRender(record: SourceType): string | {
+        dataSource: TableDataSource[];
+        columns?: ExpandedTableColumn[];
+    };
     rowExpandable?(record: SourceType): boolean;
+    onExpand?(record: SourceType, status: boolean): void;
 }
 /** === Feature Pagination */
 export interface TablePagination {
@@ -101,3 +109,6 @@ export interface TableComponents {
         cell?: any;
     };
 }
+/** styling */
+export declare function getColumnStyle(column: TableColumn<TableRecord<unknown>>): {};
+export declare function getCellStyle(column: TableColumn<TableRecord<unknown>>): {};

package/table/table.js

@@ -12,6 +12,9 @@ const tableClasses = {
     bodyRow: `${tableBodyPrefix}__row`,
     bodyRowHighlight: `${tableBodyPrefix}__row--highlight`,
     bodyRowCellWrapper: `${tableBodyPrefix}__row__cellWrapper`,
+    bodyRowExpandedTableWrapper: `${tableBodyPrefix}__row__expandedTableWrapper`,
+    bodyRowExpandedTable: `${tableBodyPrefix}__row__expandedTable`,
+    bodyRowExpandedTableRow: `${tableBodyPrefix}__row__expandedTableRow`,
     cell: tableCellPrefix,
     cellEllipsis: `${tableCellPrefix}__ellipsis`,
     selections: `${tablePrefix}__selections`,
@@ -22,6 +25,32 @@ const tableClasses = {
     paginationIndicator: `${tablePrefix}__pagination__indicator`,
     paginationActions: `${tablePrefix}__pagination__actions`,
     refresh: `${tablePrefix}__refresh`,
-};
+};
+/** styling */
+function getColumnStyle(column) {
+    if (!column)
+        return {};
+    let style = {};
+    if (column.width) {
+        style = {
+            ...style,
+            width: column.width,
+            maxWidth: column.width,
+        };
+    }
+    return style;
+}
+function getCellStyle(column) {
+    if (!column)
+        return {};
+    let style = {};
+    if (column.align) {
+        style = {
+            ...style,
+            justifyContent: column.align === 'center' ? column.align : `flex-${column.align}`,
+        };
+    }
+    return style;
+}
 
-export { tableBodyPrefix, tableCellPrefix, tableClasses, tableHeaderPrefix, tablePrefix };
+export { getCellStyle, getColumnStyle, tableBodyPrefix, tableCellPrefix, tableClasses, tableHeaderPrefix, tablePrefix };

package/upload/UploadPictureBlock.d.ts

@@ -0,0 +1,51 @@
+/// <reference types="node" />
+import { CssVarInterpolations } from '@mezzanine-ui/system/css';
+import EventEmitter from 'events';
+export declare const uploadPictureBlockPrefix = "mzn-upload-picture-block";
+export interface UploadPictureBlockCssVars {
+    percentage?: number;
+}
+export declare const uploadPictureBlockClasses: {
+    host: string;
+    disabled: string;
+    error: string;
+    loading: string;
+    group: string;
+    status: string;
+    preview: string;
+    delete: string;
+};
+export declare function toUploadPictureBlockCssVars(variables: UploadPictureBlockCssVars): CssVarInterpolations;
+export declare class ImageUploader extends EventEmitter {
+    uid: string;
+    file: File | null;
+    percentage: number;
+    preview: string;
+    url: string;
+    isLoading: boolean;
+    isError: boolean;
+    constructor(file?: File, url?: string);
+    setNewFile(file: File): void;
+    setPreview(): void;
+    setPercentage(percentage: number): void;
+    setUrl(url: string): void;
+    setLoadingStatus(isLoading: boolean): void;
+    setErrorStatus(isError: boolean): void;
+    clear(): void;
+    getUid(): string;
+    getFile(): File | null;
+    getPercentage(): number;
+    getPreview(): string;
+    getUrl(): string;
+    getIsLoading(): boolean;
+    getIsError(): boolean;
+    getAll(): {
+        uid: string;
+        file: File | null;
+        percentage: number;
+        preview: string;
+        url: string;
+        isLoading: boolean;
+        isError: boolean;
+    };
+}

package/upload/UploadPictureBlock.js

@@ -0,0 +1,111 @@
+import EventEmitter from 'events';
+import uniqueId from 'lodash/uniqueId';
+
+const uploadPictureBlockPrefix = 'mzn-upload-picture-block';
+const uploadPictureBlockClasses = {
+    host: uploadPictureBlockPrefix,
+    disabled: `${uploadPictureBlockPrefix}--disabled`,
+    error: `${uploadPictureBlockPrefix}--error`,
+    loading: `${uploadPictureBlockPrefix}--loading`,
+    group: `${uploadPictureBlockPrefix}__group`,
+    status: `${uploadPictureBlockPrefix}__status`,
+    preview: `${uploadPictureBlockPrefix}__preview`,
+    delete: `${uploadPictureBlockPrefix}__delete`,
+};
+function toUploadPictureBlockCssVars(variables) {
+    const { percentage, } = variables;
+    return {
+        [`--${uploadPictureBlockPrefix}-percentage`]: percentage,
+    };
+}
+class ImageUploader extends EventEmitter {
+    constructor(file, url) {
+        super();
+        this.uid = uniqueId('file_');
+        this.file = file || null;
+        this.percentage = 0;
+        this.preview = '';
+        this.url = url || '';
+        this.isLoading = false;
+        this.isError = false;
+    }
+    setNewFile(file) {
+        this.uid = uniqueId('file_');
+        this.file = file;
+        this.percentage = 0;
+        this.preview = '';
+        this.url = '';
+        this.isLoading = false;
+        this.isError = false;
+        this.emit('fileChange');
+    }
+    setPreview() {
+        if (this.file) {
+            const reader = new FileReader();
+            reader.addEventListener('load', () => {
+                this.preview = reader.result;
+                this.emit('previewChange');
+            });
+            reader.readAsDataURL(this.file);
+        }
+    }
+    setPercentage(percentage) {
+        this.percentage = percentage;
+        this.emit('percentageChange');
+    }
+    setUrl(url) {
+        this.url = url;
+        this.emit('urlChange');
+    }
+    setLoadingStatus(isLoading) {
+        this.isLoading = isLoading;
+        this.emit('loadingStatusChange');
+    }
+    setErrorStatus(isError) {
+        this.isError = isError;
+        this.emit('errorStatusChange');
+    }
+    clear() {
+        this.file = null;
+        this.percentage = 0;
+        this.preview = '';
+        this.url = '';
+        this.isLoading = false;
+        this.isError = false;
+        this.emit('clear');
+    }
+    getUid() {
+        return this.uid;
+    }
+    getFile() {
+        return this.file;
+    }
+    getPercentage() {
+        return this.percentage;
+    }
+    getPreview() {
+        return this.preview;
+    }
+    getUrl() {
+        return this.url;
+    }
+    getIsLoading() {
+        return this.isLoading;
+    }
+    getIsError() {
+        return this.isError;
+    }
+    getAll() {
+        return {
+            uid: this.uid,
+            file: this.file,
+            percentage: this.percentage,
+            preview: this.preview,
+            url: this.url,
+            isLoading: this.isLoading,
+            isError: this.isError,
+        };
+    }
+}
+
+export { ImageUploader, toUploadPictureBlockCssVars, uploadPictureBlockClasses, uploadPictureBlockPrefix };

package/upload/UploadPictureWall.d.ts

@@ -0,0 +1,5 @@
+export declare const uploadPictureWallPrefix = "mzn-upload-picture-wall";
+export declare const uploadPictureWallClasses: {
+    host: string;
+    item: string;
+};

package/upload/UploadPictureWall.js

@@ -0,0 +1,7 @@
+const uploadPictureWallPrefix = 'mzn-upload-picture-wall';
+const uploadPictureWallClasses = {
+    host: uploadPictureWallPrefix,
+    item: `${uploadPictureWallPrefix}__item`,
+};
+
+export { uploadPictureWallClasses, uploadPictureWallPrefix };

package/upload/_index.scss

@@ -1,2 +1,5 @@
 @forward './upload';
 @forward './upload-result';
+@forward './upload-picture';
+@forward './upload-picture-block';
+@forward './upload-picture-wall';

package/upload/_upload-picture-block-styles.scss

@@ -0,0 +1,119 @@
+@use '~@mezzanine-ui/system/palette';
+@use '~@mezzanine-ui/system/transition';
+@use '~@mezzanine-ui/system/spacing';
+@use '~@mezzanine-ui/system/typography';
+@use '../icon';
+@use './upload-picture-block' as *;
+
+$icon-size: 32px !default;
+
+.#{$prefix} {
+  --#{$prefix}-status-color: #{palette.color(text-primary)};
+  --#{$prefix}-icon-color: #{palette.color(primary)};
+  --#{$prefix}-preview-opacity: 1;
+
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: palette.color(surface);
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  border: 1px solid palette.color(border);
+  box-sizing: border-box;
+  cursor: pointer;
+  transition: transition.standard(border-color);
+  will-change: border-color;
+
+  .#{icon.$prefix} {
+    width: $icon-size;
+    height: $icon-size;
+    color: var(--#{$prefix}-icon-color);
+  }
+
+  &__preview {
+    width: 100%;
+    height: 100%;
+    opacity: var(--#{$prefix}-preview-opacity);
+  }
+
+  &__status {
+    @include typography.variant(input2);
+
+    color: var(--#{$prefix}-status-color);
+  }
+
+  &__group {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    padding: spacing.level(2);
+  }
+
+  &__delete {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    border: none;
+    pointer-events: none;
+    background-color: transparent;
+    opacity: 0;
+    transition: transition.standard(background-color), transition.standard(opacity);
+    will-change: background-color, opacity;
+  }
+
+  &:hover {
+    &:not(.#{$prefix}--loading):not(.#{$prefix}--disabled) {
+      .#{$prefix}__delete {
+        background-color: palette.color(surface);
+        opacity: 0.9;
+      }
+    }
+
+    &:not(.#{$prefix}--disabled):not(.#{$prefix}--error) {
+      border-color: palette.color(primary);
+    }
+  }
+
+  &--loading {
+    --#{$prefix}-preview-opacity: 0.15;
+
+    cursor: default;
+    pointer-events: none;
+
+    &::before {
+      position: absolute;
+      content: "";
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: palette.color(primary-hover-bg);
+      transform-origin: left;
+      transform: scaleX(calc(var(--#{$prefix}-percentage, 0) / 100));
+    }
+  }
+
+  &--error {
+    --#{$prefix}-status-color: #{palette.color(error)};
+    --#{$prefix}-icon-color: #{palette.color(error)};
+
+    border-color: palette.color(error);
+  }
+
+  &--disabled {
+    --#{$prefix}-status-color: #{palette.color(text-disabled)};
+    --#{$prefix}-icon-color: #{palette.color(action-disabled)};
+
+    background-color: palette.color(action-disabled-bg);
+    border-color: palette.color(action-disabled-bg);
+    cursor: default;
+  }
+}

package/upload/_upload-picture-block.scss

@@ -0,0 +1,3 @@
+@use './upload';
+
+$prefix: #{upload.$prefix}-picture-block;

package/upload/_upload-picture-styles.scss

@@ -0,0 +1,9 @@
+@use './upload-picture' as *;
+
+$width: 128px !default;
+$height: 128px !default;
+
+.#{$prefix} {
+  width: $width;
+  height: $height;
+}

package/upload/_upload-picture-wall-styles.scss

@@ -0,0 +1,20 @@
+@use '~@mezzanine-ui/system/spacing';
+@use './upload-picture-wall' as *;
+
+$width: 128px !default;
+$height: 128px !default;
+$row-gap: spacing.level(3) !default;
+$column-gap: spacing.level(3) !default;
+$repeat: 3;
+
+.#{$prefix} {
+  display: grid;
+  grid-template-columns: repeat($repeat, minmax(0, $width));
+  row-gap: $row-gap;
+  column-gap: $column-gap;
+
+  &__item {
+    width: $width;
+    height: $height;
+  }
+}

package/upload/_upload-picture-wall.scss

@@ -0,0 +1,3 @@
+@use './upload';
+
+$prefix: #{upload.$prefix}-picture-wall;

package/upload/_upload-picture.scss

@@ -0,0 +1,3 @@
+@use './upload';
+
+$prefix: #{upload.$prefix}-picture;

package/upload/index.d.ts

@@ -1,2 +1,5 @@
 export * from './uploadInput';
 export * from './uploadResult';
+export * from './uploadPicture';
+export * from './UploadPictureBlock';
+export * from './UploadPictureWall';

package/upload/index.js

@@ -1,2 +1,5 @@
 export { uploadInputClasses, uploadInputPrefix } from './uploadInput.js';
 export { toUploadResultCssVars, uploadResultClasses, uploadResultPrefix } from './uploadResult.js';
+export { uploadPictureClasses, uploadPicturePrefix } from './uploadPicture.js';
+export { ImageUploader, toUploadPictureBlockCssVars, uploadPictureBlockClasses, uploadPictureBlockPrefix } from './UploadPictureBlock.js';
+export { uploadPictureWallClasses, uploadPictureWallPrefix } from './UploadPictureWall.js';

package/upload/uploadPicture.d.ts

@@ -0,0 +1,4 @@
+export declare const uploadPicturePrefix = "mzn-upload-picture";
+export declare const uploadPictureClasses: {
+    host: string;
+};

package/upload/uploadPicture.js

@@ -0,0 +1,6 @@
+const uploadPicturePrefix = 'mzn-upload-picture';
+const uploadPictureClasses = {
+    host: uploadPicturePrefix,
+};
+
+export { uploadPictureClasses, uploadPicturePrefix };