rimmel/dist/esm/sinks/closed-sink.js

A Stream-Oriented UI library for the Rx.Observable Universe

import { SINK_TAG } from '../constants.js';

const CLOSED_SINK_TAG = 'closed';
/**
 * A sink that closes a <dialog> element when a source streams emits
 * @param dialogBox an HTMLDialogElement
 * @returns
 */
const ClosedSink = (dialogBox) => dialogBox.close.bind(dialogBox);
/**
 * An explicit sink that closes a <dialog> element when a source streams emits a non falsey value
 *
 * You can call this sink in the following ways:
 * - implicitly, by assigning it to the `rml:closed` attribute of a `<dialog>` element
 * - explicitly, by using the `Closed` sink
 * - via a {@link Mixin}, by emitting a `rml:closed` key-value pair
 *
 * @returns Sink
 *
 * ## Examples
 *
 * ### Close a &lt;dialog&gt; box when a button is clicked
 *
 * ```ts
 * import { Subject } from 'rxjs';
 * import { rml } from 'rimmel';
 *
 * const Component = () => {
 *   const close = new Subject();
 *
 *   return rml`
 *     <dialog rml:closed="${close}">
 *       <button onclick="${close}">Close</button>
 *     </dialog>
 *   `;
 * }
 * ```
 *
 * ### Close a &lt;dialog&gt; box in 10s or when a button is clicked
 *
 * ```ts
 * import { Subject, merge } from 'rxjs';
 * import { rml } from 'rimmel';
 *
 * const Component = () => {
 *   const close = new Subject();
 *   const timeout = new Promise(resolve => setTimeout(resolve, 10000));
 *
 *   return rml`
 *     <dialog rml:closed="${merge(close, timeout)}">
 *       <button onclick="${close}">Close</button>
 *     </dialog>
 *   `;
 * }
 * ```
 * ### Close a &lt;dialog&gt; box from a {@link Mixin}
 *
 * ```ts
 * import { Subject } from 'rxjs';
 * import { rml } from 'rimmel';
 *
 * const Autoclose = () => {
 *   const timeout = new Promise(resolve => setTimeout(resolve, 10000));
 *
 *   return {
 *     'rml:closed': timeout,
 *   };
 * };
 *
 * const Component = () => rml`
 *     <dialog ...${Autoclose}>
 *       this box will close in 10s
 *     </dialog>
 *   `;
 * }
 * ```
 */
const Closed = (source) => ({
    type: SINK_TAG,
    t: CLOSED_SINK_TAG,
    source,
    sink: ClosedSink,
});

export { CLOSED_SINK_TAG, Closed, ClosedSink };
//# sourceMappingURL=closed-sink.js.map