rimmel/dist/ssr/types/sinks/closed-sink.d.ts

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

import type { ExplicitSink, Sink } from "../types/sink";
export declare const CLOSED_SINK_TAG = "closed";
/**
 * A sink that closes a <dialog> element when a source streams emits
 * @param dialogBox an HTMLDialogElement
 * @returns
 */
export declare const ClosedSink: Sink<HTMLDialogElement>;
/**
 * An explicit sink that closes a &lt;dialog&gt; 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>
 *   `;
 * }
 * ```
 */
export declare const Closed: ExplicitSink<'closed'>;
//# sourceMappingURL=closed-sink.d.ts.map