@ulu/frontend
Version:
A framework-agnostic frontend toolkit providing a modular, tree-shakable library of accessible components and utilities. Designed for seamless integration, it features a highly configurable SCSS system for any environment and vanilla JavaScript modules op
170 lines • 5.93 kB
TypeScript
import { Resizer } from './resizer.js';
import { ComponentInitializer } from '../core/component.js';
/**
* @param {Object} options Change options used as default for dialogs, can then be overridden by data attribute settings on element
*/
export function setDefaults(options: Object): void;
/**
* Initialize everything in document
* - This will only initialize elements once, it is safe to call on page changes
*/
export function init(): void;
/**
*
* @param {Node} content Content element of the dialog (what is inserted into the body)
* @param {Object} options Options for built dialog (see defaults)
*/
export function buildModal(content: Node, options: Object): {
modal: any;
resizer: Resizer | undefined;
};
/**
* Modal Builder Component Initializer
*/
export const initializer: ComponentInitializer;
export namespace defaults {
export let title: null;
export let titleIcon: null;
export let titleClass: string;
export let labelledby: null;
export let describedby: null;
export let nonModal: boolean;
export let documentEnd: boolean;
export let allowResize: boolean;
export let position: string;
export let bodyFills: boolean;
export let noBackdrop: boolean;
export let size: string;
export let print: boolean;
export let noMinHeight: boolean;
export let fullscreenMobile: boolean;
let _class: string;
export { _class as class };
export let baseClass: string;
export let footerElement: null;
export let footerHtml: null;
export let classClose: string;
export let classCloseIcon: Object;
export let classResizerIcon: Object;
export let classResizerIconBoth: Object;
export let debug: boolean;
export let autoIframe: boolean;
export function templateCloseIcon(config: any): string;
export function templateResizerIcon(config: any): string;
/**
* Default modal template
* @param {String} id ID for new modal
* @param {Object} config Resolved options
* @returns {String} Markup for modal
*/
export function template(id: string, config: Object): string;
}
/**
* Default builder options (extends dialog defaults, watch name collisions)
* - Decided to extend defaults so the interface in HTML is singular
* - This is sometimes easier to template (merging and serializing options
* in twig for example)
*/
export type DefaultModalOptions = {
/**
* - The title of the modal. Defaults to `null`.
*/
title: string | null;
/**
* - The class name for an icon to display in the title. Defaults to `null`.
*/
titleIcon: string | null;
/**
* - Extra class/classes to add to title
*/
titleClass: string;
/**
* - Set the aria-labelledby attribute to a specific title within the modal, to connect to a custom title implementation, if using built in title this will be set automatically
*/
labelledby: string;
/**
* - Set the aria-describedby on the dialog, elements id, to tie a specific part of the content to be the accessible description
*/
describedby: string;
/**
* - If `true`, the modal will not prevent interaction with elements behind it. Defaults to `false`.
*/
nonModal: boolean;
/**
* - If `true`, the modal will be appended to the end of the `document.body`. Defaults to `true`.
*/
documentEnd: boolean;
/**
* - If `true`, the modal will be resizable. Defaults to `false`.
*/
allowResize: boolean;
/**
* - The initial position of the modal. Defaults to `"center"`.
*/
position: "center" | "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
/**
* - If `true`, the modal body will fill the available space. Defaults to `false`.
*/
bodyFills: boolean;
/**
* - If `true`, no backdrop will be displayed behind the modal. Defaults to `false`.
*/
noBackdrop: boolean;
/**
* - The size of the modal. Defaults to `"default"`.
*/
size: "default" | "small" | "large" | "fullscreen";
/**
* - If `true`, the modal content will be optimized for printing. Defaults to `false`.
*/
print: boolean;
/**
* - If `true`, the modal will not have a minimum height. Defaults to `false`.
*/
noMinHeight: boolean;
/**
* - Additional CSS class(es) to add to the modal. Defaults to `""`.
*/
class: string;
/**
* - The base CSS class for the modal elements. Defaults to `"modal"`.
*/
baseClass: string;
/**
* - The class name for the close button. Defaults to 'button button--icon' styling.
*/
classClose: string;
/**
* - The class name for the close icon. Defaults to 'button__icon' styling. Uses the wrapped setting string.
*/
classCloseIcon: string;
/**
* - The class name for the resizer icon. Uses the wrapped setting string.
*/
classResizerIcon: string;
/**
* - Element or selector to use as the footer (will be moved to dialog on creation, used for DOM API)
*/
footerElement: string | Node;
/**
* - Markup to use in the footer
*/
footerHtml: string | Node;
/**
* - Enables debug logging. Defaults to `false`.
*/
debug: boolean;
/**
* - Opt-in convenience behavior. If the modal body's sole content is an iframe, it automatically applies layout fixes. If the iframe has static width/height attributes (like YouTube), it retains that aspect ratio responsively. Otherwise, it forces the iframe to fill the modal. Defaults to `false`.
*/
autoIframe: boolean;
/**
* - A function that returns the HTML for the close icon.
*/
templateCloseIcon: (arg0: object) => string;
/**
* - The resolved modal configuration object.
*/
config: (arg0: object) => string;
};
//# sourceMappingURL=modal-builder.d.ts.map