mithril-materialized 1.0.1 → 1.1.0

package/dist/input-options.d.ts

@@ -1,81 +1,81 @@
-import { Attributes } from 'mithril';
-export interface IInputOptions<T = string> extends Attributes {
-    /** Optional label. */
-    label?: string;
-    /** Optional ID. */
-    id?: string;
-    /** Unique key for use of the element in an array. */
-    key?: string | number;
-    /** Initial value of the input field. */
-    initialValue?: T;
-    /**
-     * The autocomplete property sets or returns the value of the autocomplete
-     * attribute in a text field. When autocomplete is on, the browser automatically
-     * complete values based on values that the user has entered before.
-     * @default 'on'
-     */
-    autocomplete?: 'on' | 'off';
-    /**
-     * The pattern property sets or returns the value of the pattern attribute of
-     * a text field. The pattern attribute specifies a regular expression that the
-     * text field's value is checked against.
-     */
-    pattern?: RegExp;
-    /**
-     * The readOnly property sets or returns whether a text field is read-only, or not.
-     * A read-only field cannot be modified. However, a user can tab to it, highlight it,
-     * and copy the text from it.
-     */
-    readOnly?: boolean;
-    /** When true, add the autofocus attribute to the input field. */
-    autofocus?: (() => boolean) | boolean;
-    /** Key down event */
-    onkeydown?: (ev: KeyboardEvent, value?: T) => void;
-    /** Key press event */
-    onkeypress?: (ev: KeyboardEvent, value?: T) => void;
-    /** Key up event */
-    onkeyup?: (ev: KeyboardEvent, value?: T) => void;
-    /** Invoked when the value changes. */
-    onchange?: (value: T) => void;
-    /** Add a a placeholder to the input field. */
-    placeholder?: string;
-    /** Add a description underneath the input field. */
-    helperText?: string;
-    /**
-     * When returning true or an empty string, clear the custom validity (= valid).
-     * When returning false, set the custom validity message to a default string string.
-     * When returning a non-empty string, set the custom validity message to this string.
-     */
-    validate?: (v: T, target?: HTMLInputElement) => boolean | string;
-    /** Will replace the helperText, if any, when the input is invalid. */
-    dataError?: string;
-    /** Will replace the helperText, if any, when the input is valid. */
-    dataSuccess?: string;
-    /** Uses Materialize icons as a prefix or postfix. */
-    iconName?: string;
-    /** Sets the input field to disabled. */
-    disabled?: boolean;
-    /** Optional style information. */
-    style?: string;
-    /** When input type is a number, optionally specify the minimum value. */
-    min?: number;
-    /** When input type is a number, optionally specify the maximum value. */
-    max?: number;
-    /** When input type is a text or text area, optionally specify the minimum length. */
-    minLength?: number;
-    /** When input type is a text or text area, optionally specify the maximum length. */
-    maxLength?: number;
-    /** Number of rows of a textarea */
-    rows?: number;
-    /** Number of cols of a textarea */
-    cols?: number;
-    /** If true, break to a new row */
-    newRow?: boolean;
-    /**
-     * If true, add a mandatory * after the label (if any),
-     * and add the required and aria-required attributes to the input element.
-     */
-    isMandatory?: boolean;
-    /** Add the required and aria-required attributes to the input element */
-    required?: boolean;
-}
+import { Attributes } from 'mithril';
+export interface IInputOptions<T = string> extends Attributes {
+    /** Optional label. */
+    label?: string;
+    /** Optional ID. */
+    id?: string;
+    /** Unique key for use of the element in an array. */
+    key?: string | number;
+    /** Initial value of the input field. */
+    initialValue?: T;
+    /**
+     * The autocomplete property sets or returns the value of the autocomplete
+     * attribute in a text field. When autocomplete is on, the browser automatically
+     * complete values based on values that the user has entered before.
+     * @default 'on'
+     */
+    autocomplete?: 'on' | 'off';
+    /**
+     * The pattern property sets or returns the value of the pattern attribute of
+     * a text field. The pattern attribute specifies a regular expression that the
+     * text field's value is checked against.
+     */
+    pattern?: RegExp;
+    /**
+     * The readOnly property sets or returns whether a text field is read-only, or not.
+     * A read-only field cannot be modified. However, a user can tab to it, highlight it,
+     * and copy the text from it.
+     */
+    readOnly?: boolean;
+    /** When true, add the autofocus attribute to the input field. */
+    autofocus?: (() => boolean) | boolean;
+    /** Key down event */
+    onkeydown?: (ev: KeyboardEvent, value?: T) => void;
+    /** Key press event */
+    onkeypress?: (ev: KeyboardEvent, value?: T) => void;
+    /** Key up event */
+    onkeyup?: (ev: KeyboardEvent, value?: T) => void;
+    /** Invoked when the value changes. */
+    onchange?: (value: T) => void;
+    /** Add a a placeholder to the input field. */
+    placeholder?: string;
+    /** Add a description underneath the input field. */
+    helperText?: string;
+    /**
+     * When returning true or an empty string, clear the custom validity (= valid).
+     * When returning false, set the custom validity message to a default string string.
+     * When returning a non-empty string, set the custom validity message to this string.
+     */
+    validate?: (v: T, target?: HTMLInputElement) => boolean | string;
+    /** Will replace the helperText, if any, when the input is invalid. */
+    dataError?: string;
+    /** Will replace the helperText, if any, when the input is valid. */
+    dataSuccess?: string;
+    /** Uses Materialize icons as a prefix or postfix. */
+    iconName?: string;
+    /** Sets the input field to disabled. */
+    disabled?: boolean;
+    /** Optional style information. */
+    style?: string;
+    /** When input type is a number, optionally specify the minimum value. */
+    min?: number;
+    /** When input type is a number, optionally specify the maximum value. */
+    max?: number;
+    /** When input type is a text or text area, optionally specify the minimum length. */
+    minLength?: number;
+    /** When input type is a text or text area, optionally specify the maximum length. */
+    maxLength?: number;
+    /** Number of rows of a textarea */
+    rows?: number;
+    /** Number of cols of a textarea */
+    cols?: number;
+    /** If true, break to a new row */
+    newRow?: boolean;
+    /**
+     * If true, add a mandatory * after the label (if any),
+     * and add the required and aria-required attributes to the input element.
+     */
+    isMandatory?: boolean;
+    /** Add the required and aria-required attributes to the input element */
+    required?: boolean;
+}

package/dist/input.d.ts

@@ -1,42 +1,42 @@
-import m, { FactoryComponent, Attributes } from 'mithril';
-import { IInputOptions } from './input-options';
-import './styles/input.css';
-/** Create a TextArea */
-export declare const TextArea: FactoryComponent<IInputOptions<string>>;
-export declare type InputType = 'url' | 'color' | 'text' | 'number' | 'email' | 'range' | 'password';
-/** Component for entering some text */
-export declare const TextInput: m.FactoryComponent<IInputOptions<string>>;
-/** Component for entering a password */
-export declare const PasswordInput: m.FactoryComponent<IInputOptions<string>>;
-/** Component for entering a number */
-export declare const NumberInput: m.FactoryComponent<IInputOptions<number>>;
-/** Component for entering a URL */
-export declare const UrlInput: m.FactoryComponent<IInputOptions<string>>;
-/** Component for entering a color */
-export declare const ColorInput: m.FactoryComponent<IInputOptions<string>>;
-/** Component for entering a range */
-export declare const RangeInput: m.FactoryComponent<IInputOptions<number>>;
-/** Component for entering an email */
-export declare const EmailInput: m.FactoryComponent<IInputOptions<string>>;
-export interface IFileInputOptions extends Attributes {
-    /** Displayed on the button, @default File */
-    label?: string;
-    /** Current value of the file input, write only */
-    initialValue?: string;
-    /** Adds a placeholder message */
-    placeholder?: string;
-    /** If true, upload multiple files */
-    multiple?: boolean;
-    /** Called when the file input is changed */
-    onchange?: (files: FileList) => void;
-    /** If true, disable the box */
-    disabled?: boolean;
-    /**
-     * Accepted file types, e.g. image/png, image/jpeg,
-     * any image/*, video/*. audio/*, .pdf, a valid MIME type string, with no extensions, etc.
-     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#Unique_file_type_specifiers
-     */
-    accept?: string | string[];
-}
-/** Component for uploading a file */
-export declare const FileInput: FactoryComponent<IFileInputOptions>;
+import m, { FactoryComponent, Attributes } from 'mithril';
+import { IInputOptions } from './input-options';
+import './styles/input.css';
+/** Create a TextArea */
+export declare const TextArea: FactoryComponent<IInputOptions<string>>;
+export type InputType = 'url' | 'color' | 'text' | 'number' | 'email' | 'range' | 'password';
+/** Component for entering some text */
+export declare const TextInput: m.FactoryComponent<IInputOptions<string>>;
+/** Component for entering a password */
+export declare const PasswordInput: m.FactoryComponent<IInputOptions<string>>;
+/** Component for entering a number */
+export declare const NumberInput: m.FactoryComponent<IInputOptions<number>>;
+/** Component for entering a URL */
+export declare const UrlInput: m.FactoryComponent<IInputOptions<string>>;
+/** Component for entering a color */
+export declare const ColorInput: m.FactoryComponent<IInputOptions<string>>;
+/** Component for entering a range */
+export declare const RangeInput: m.FactoryComponent<IInputOptions<number>>;
+/** Component for entering an email */
+export declare const EmailInput: m.FactoryComponent<IInputOptions<string>>;
+export interface IFileInputOptions extends Attributes {
+    /** Displayed on the button, @default File */
+    label?: string;
+    /** Current value of the file input, write only */
+    initialValue?: string;
+    /** Adds a placeholder message */
+    placeholder?: string;
+    /** If true, upload multiple files */
+    multiple?: boolean;
+    /** Called when the file input is changed */
+    onchange?: (files: FileList) => void;
+    /** If true, disable the box */
+    disabled?: boolean;
+    /**
+     * Accepted file types, e.g. image/png, image/jpeg,
+     * any image/*, video/*. audio/*, .pdf, a valid MIME type string, with no extensions, etc.
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#Unique_file_type_specifiers
+     */
+    accept?: string | string[];
+}
+/** Component for uploading a file */
+export declare const FileInput: FactoryComponent<IFileInputOptions>;

package/dist/label.d.ts

@@ -1,22 +1,22 @@
-import { FactoryComponent, Component, Attributes } from 'mithril';
-import './styles/input.css';
-export declare const Mandatory: Component;
-export interface IMaterialLabel extends Attributes {
-    /** Optional title/label */
-    label?: string;
-    /** Optional ID */
-    id?: string;
-    /** If true, add a mandatory '*' after the label */
-    isMandatory?: boolean;
-    /** Add the active class to the label */
-    isActive?: boolean | string;
-}
-/** Simple label element, used for most components. */
-export declare const Label: FactoryComponent<IMaterialLabel>;
-export interface IHelperTextOptions extends Attributes {
-    helperText?: string;
-    dataError?: string;
-    dataSuccess?: string;
-}
-/** Create a helper text, often used for displaying a small help text. May be replaced by the validation message. */
-export declare const HelperText: FactoryComponent<IHelperTextOptions>;
+import { FactoryComponent, Component, Attributes } from 'mithril';
+import './styles/input.css';
+export declare const Mandatory: Component;
+export interface IMaterialLabel extends Attributes {
+    /** Optional title/label */
+    label?: string;
+    /** Optional ID */
+    id?: string;
+    /** If true, add a mandatory '*' after the label */
+    isMandatory?: boolean;
+    /** Add the active class to the label */
+    isActive?: boolean | string;
+}
+/** Simple label element, used for most components. */
+export declare const Label: FactoryComponent<IMaterialLabel>;
+export interface IHelperTextOptions extends Attributes {
+    helperText?: string;
+    dataError?: string;
+    dataSuccess?: string;
+}
+/** Create a helper text, often used for displaying a small help text. May be replaced by the validation message. */
+export declare const HelperText: FactoryComponent<IHelperTextOptions>;

package/dist/map-editor.d.ts

@@ -1,63 +1,63 @@
-import { FactoryComponent, Attributes } from 'mithril';
-import './styles/map-editor.css';
-import { ICollectionItem } from './collection';
-export interface IMapEditor extends Attributes {
-    /** Optional ID of the element */
-    id?: string;
-    /** If true, displays a header over the map */
-    header?: string;
-    /** Instead of a header, use a label */
-    label?: string;
-    /** Places a required * after the label */
-    isMandatory?: boolean;
-    /**
-     * Optional value for the key label
-     * @default: "Key"
-     */
-    labelKey?: string;
-    /**
-     * Optional value for the value label
-     * @default: "Value"
-     */
-    labelValue?: string;
-    /** If true, the item cannot be edited */
-    disabled?: boolean;
-    /** Icon for the properties' collection */
-    iconName?: string;
-    /** Icon for the key editor: if none provided, and the iconName is set, uses 'label' */
-    iconNameKey?: string;
-    /** If true, do not parse arrays like [1, 2, 3] into number[] or [a, b, c] into a string[] */
-    disallowArrays?: boolean;
-    /** The actual map of key-value pairs supports numbers, strings, booleans and arrays of strings and numbers. */
-    properties: {
-        [key: string]: number | string | boolean | Array<string | number>;
-    };
-    /**
-     * Called when the properties collection has changed. Not needed if you are performing a direct edit on the
-     * properties object, but in case you have created a mapping, this allows you to convert the object back again.
-     */
-    onchange?: (properties: {
-        [key: string]: number | string | boolean | Array<string | number>;
-    }) => void;
-    /**
-     * In order to create a boolean, you first have to enter a truthy or falsy value.
-     * Default 'true' and 'false', but you can add more options.
-     */
-    truthy?: string[];
-    /**
-     * In order to create a boolean, you first have to enter a truthy or falsy value.
-     * Default 'true' and 'false', but you can add more options.
-     */
-    falsy?: string[];
-    /**
-     * Optional function to replace the render function of a key-value pair.
-     * The ICollectionItems's title may be a Vnode.
-     */
-    keyValueConverter?: (key: string, value: number | string | boolean | Array<string | number>) => ICollectionItem;
-    /** Optional class to apply to the key column, @default .col.s4 */
-    keyClass?: string;
-    /** Optional class to apply to the value column, @default .col.s8 */
-    valueClass?: string;
-}
-/** A simple viewer and/or editor for a map of key - value pairs */
-export declare const MapEditor: FactoryComponent<IMapEditor>;
+import { FactoryComponent, Attributes } from 'mithril';
+import './styles/map-editor.css';
+import { ICollectionItem } from './collection';
+export interface IMapEditor extends Attributes {
+    /** Optional ID of the element */
+    id?: string;
+    /** If true, displays a header over the map */
+    header?: string;
+    /** Instead of a header, use a label */
+    label?: string;
+    /** Places a required * after the label */
+    isMandatory?: boolean;
+    /**
+     * Optional value for the key label
+     * @default: "Key"
+     */
+    labelKey?: string;
+    /**
+     * Optional value for the value label
+     * @default: "Value"
+     */
+    labelValue?: string;
+    /** If true, the item cannot be edited */
+    disabled?: boolean;
+    /** Icon for the properties' collection */
+    iconName?: string;
+    /** Icon for the key editor: if none provided, and the iconName is set, uses 'label' */
+    iconNameKey?: string;
+    /** If true, do not parse arrays like [1, 2, 3] into number[] or [a, b, c] into a string[] */
+    disallowArrays?: boolean;
+    /** The actual map of key-value pairs supports numbers, strings, booleans and arrays of strings and numbers. */
+    properties: {
+        [key: string]: number | string | boolean | Array<string | number>;
+    };
+    /**
+     * Called when the properties collection has changed. Not needed if you are performing a direct edit on the
+     * properties object, but in case you have created a mapping, this allows you to convert the object back again.
+     */
+    onchange?: (properties: {
+        [key: string]: number | string | boolean | Array<string | number>;
+    }) => void;
+    /**
+     * In order to create a boolean, you first have to enter a truthy or falsy value.
+     * Default 'true' and 'false', but you can add more options.
+     */
+    truthy?: string[];
+    /**
+     * In order to create a boolean, you first have to enter a truthy or falsy value.
+     * Default 'true' and 'false', but you can add more options.
+     */
+    falsy?: string[];
+    /**
+     * Optional function to replace the render function of a key-value pair.
+     * The ICollectionItems's title may be a Vnode.
+     */
+    keyValueConverter?: (key: string, value: number | string | boolean | Array<string | number>) => ICollectionItem;
+    /** Optional class to apply to the key column, @default .col.s4 */
+    keyClass?: string;
+    /** Optional class to apply to the value column, @default .col.s8 */
+    valueClass?: string;
+}
+/** A simple viewer and/or editor for a map of key - value pairs */
+export declare const MapEditor: FactoryComponent<IMapEditor>;

package/dist/material-box.d.ts

@@ -1,21 +1,21 @@
-/// <reference types="materialize-css" />
-import { FactoryComponent, Attributes } from 'mithril';
-export interface IMaterialBox extends Partial<M.MaterialboxOptions>, Attributes {
-    /** Source image path */
-    src: string;
-    /**
-     * Width of the image
-     * @default undefined
-     */
-    width?: number;
-    /**
-     * Height of the image
-     * @default undefined
-     */
-    height?: number;
-}
-/**
- * Create an image box, that, when clicked upon, fills the screen.
- * @see https://materializecss.com/media.html
- */
-export declare const MaterialBox: FactoryComponent<IMaterialBox>;
+/// <reference types="materialize-css" />
+import { FactoryComponent, Attributes } from 'mithril';
+export interface IMaterialBox extends Partial<M.MaterialboxOptions>, Attributes {
+    /** Source image path */
+    src: string;
+    /**
+     * Width of the image
+     * @default undefined
+     */
+    width?: number;
+    /**
+     * Height of the image
+     * @default undefined
+     */
+    height?: number;
+}
+/**
+ * Create an image box, that, when clicked upon, fills the screen.
+ * @see https://materializecss.com/media.html
+ */
+export declare const MaterialBox: FactoryComponent<IMaterialBox>;

package/dist/modal.d.ts

@@ -1,26 +1,26 @@
-/// <reference types="materialize-css" />
-import { FactoryComponent, Vnode, Attributes } from 'mithril';
-export interface IMaterialModal extends Attributes {
-    id: string;
-    title: string;
-    description?: string | Vnode<any, any>;
-    /** Set to true when the description contains HTML */
-    richContent?: boolean;
-    /** Fixate the footer, so you can show more content. */
-    fixedFooter?: boolean;
-    /** Display on the bottom */
-    bottomSheet?: boolean;
-    /** Materialize css' modal options */
-    options?: Partial<M.ModalOptions>;
-    /** Menu buttons, from left to right */
-    buttons?: Array<{
-        label: string;
-        iconName?: string;
-        disabled?: boolean;
-        onclick?: (e: UIEvent) => void;
-    }>;
-    /** Get the modal instance, so you can control it programmatically */
-    onCreate?: (modal: M.Modal) => void;
-}
-/** Builds a modal panel, which can be triggered using its id */
-export declare const ModalPanel: FactoryComponent<IMaterialModal>;
+/// <reference types="materialize-css" />
+import { FactoryComponent, Vnode, Attributes } from 'mithril';
+export interface IMaterialModal extends Attributes {
+    id: string;
+    title: string;
+    description?: string | Vnode<any, any>;
+    /** Set to true when the description contains HTML */
+    richContent?: boolean;
+    /** Fixate the footer, so you can show more content. */
+    fixedFooter?: boolean;
+    /** Display on the bottom */
+    bottomSheet?: boolean;
+    /** Materialize css' modal options */
+    options?: Partial<M.ModalOptions>;
+    /** Menu buttons, from left to right */
+    buttons?: Array<{
+        label: string;
+        iconName?: string;
+        disabled?: boolean;
+        onclick?: (e: UIEvent) => void;
+    }>;
+    /** Get the modal instance, so you can control it programmatically */
+    onCreate?: (modal: M.Modal) => void;
+}
+/** Builds a modal panel, which can be triggered using its id */
+export declare const ModalPanel: FactoryComponent<IMaterialModal>;

package/dist/option.d.ts

@@ -1,52 +1,56 @@
-import m, { Vnode, FactoryComponent, Attributes, Component } from 'mithril';
-export interface IInputCheckbox extends Attributes {
-    /** Optional event handler when a checkbox is clicked */
-    onchange?: (checked: boolean) => void;
-    /** Label of the checkbox, can be a string or Vnode */
-    label?: string | Vnode<any, any>;
-    /** If true, the checkbox is checked */
-    checked?: boolean;
-    /** If true, the checkbox is disabled */
-    disabled?: boolean;
-}
-/** Component to show a check box */
-export declare const InputCheckbox: FactoryComponent<IInputCheckbox>;
-export interface IInputOption<T extends string | number> {
-    /** Option ID */
-    id: T;
-    /** Displayed label */
-    label: string;
-    /** Optional title, often used to display a tooltip - will only work when choosing browser-defaults */
-    title?: string;
-    /** Is the option disabled? */
-    disabled?: boolean;
-}
-export interface IOptions<T extends string | number> extends Attributes {
-    /** Element ID */
-    id?: string;
-    /** Optional title or label */
-    label?: string;
-    /** The options that you have */
-    options: IInputOption<T>[];
-    /** Event handler that is called when an option is changed */
-    onchange?: (checkedId: T[]) => void;
-    /**
-     * Selected id or ids (in case of multiple options)
-     * @deprecated Please use initialValue instead
-     */
-    checkedId?: T | T[];
-    /** Selected id or ids (in case of multiple options) */
-    initialValue?: T | T[];
-    /** Optional description */
-    description?: string;
-    /** Optional CSS that is added to the input checkbox, e.g. if you add col s4, the items will be put inline */
-    checkboxClass?: string;
-    /** If true, start on a new row */
-    newRow?: boolean;
-    /** If true, add a mandatory '*' after the label */
-    isMandatory?: boolean;
-    /** If true, disable the options. */
-    disabled?: boolean;
-}
-/** A list of checkboxes */
-export declare const Options: <T extends string | number>() => m.Component<IOptions<T>, {}>;
+import m, { Vnode, FactoryComponent, Attributes, Component } from 'mithril';
+export interface IInputCheckbox extends Attributes {
+    /** Optional event handler when a checkbox is clicked */
+    onchange?: (checked: boolean) => void;
+    /** Label of the checkbox, can be a string or Vnode */
+    label?: string | Vnode<any, any>;
+    /** If true, the checkbox is checked */
+    checked?: boolean;
+    /** If true, the checkbox is disabled */
+    disabled?: boolean;
+}
+/** Component to show a check box */
+export declare const InputCheckbox: FactoryComponent<IInputCheckbox>;
+export interface IInputOption<T extends string | number> {
+    /** Option ID */
+    id: T;
+    /** Displayed label */
+    label: string;
+    /** Optional title, often used to display a tooltip - will only work when choosing browser-defaults */
+    title?: string;
+    /** Is the option disabled? */
+    disabled?: boolean;
+    /** Select image */
+    img?: string;
+    /** Select group label */
+    group?: string;
+}
+export interface IOptions<T extends string | number> extends Attributes {
+    /** Element ID */
+    id?: string;
+    /** Optional title or label */
+    label?: string;
+    /** The options that you have */
+    options: IInputOption<T>[];
+    /** Event handler that is called when an option is changed */
+    onchange?: (checkedId: T[]) => void;
+    /**
+     * Selected id or ids (in case of multiple options)
+     * @deprecated Please use initialValue instead
+     */
+    checkedId?: T | T[];
+    /** Selected id or ids (in case of multiple options) */
+    initialValue?: T | T[];
+    /** Optional description */
+    description?: string;
+    /** Optional CSS that is added to the input checkbox, e.g. if you add col s4, the items will be put inline */
+    checkboxClass?: string;
+    /** If true, start on a new row */
+    newRow?: boolean;
+    /** If true, add a mandatory '*' after the label */
+    isMandatory?: boolean;
+    /** If true, disable the options. */
+    disabled?: boolean;
+}
+/** A list of checkboxes */
+export declare const Options: <T extends string | number>() => m.Component<IOptions<T>, {}>;