@breadstone/mosaik-elements-foundation 0.0.215 → 0.0.217

package/Controls/Components/Layouts/TileManager/Themes/TileManagerTileElement.Memphis.js

@@ -0,0 +1,292 @@
+// ------------------------------------------------------------------------------
+// <auto-generated>
+//     This code was generated by a tool.
+//     Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
+// </auto-generated>
+// ------------------------------------------------------------------------------
+// #region Imports
+import { css } from '../../../../../Dom/Css';
+// #endregion
+/**
+ * @public
+ */
+export function tileManagerTileElementMemphisStyle() {
+    return css `
+:host {
+  --tile-manager-tile-action-color: var(--memphis-scheme-on-background-variant);
+  --tile-manager-tile-action-hover-background: var(--memphis-scheme-background-variant);
+  --tile-manager-tile-action-hover-color: var(--memphis-scheme-on-background);
+  --tile-manager-tile-action-radius: 0;
+  --tile-manager-tile-action-size: 32px;
+  --tile-manager-tile-background: var(--memphis-scheme-background);
+  --tile-manager-tile-border-color: var(--memphis-scheme-stroke);
+  --tile-manager-tile-border-radius: var(--memphis-layout-radius);
+  --tile-manager-tile-border-width: 2px;
+  --tile-manager-tile-content-padding-bottom: 16px;
+  --tile-manager-tile-content-padding-left: 16px;
+  --tile-manager-tile-content-padding-right: 16px;
+  --tile-manager-tile-content-padding-top: 16px;
+  --tile-manager-tile-dragging-opacity: .85;
+  --tile-manager-tile-drop-target-color: var(--memphis-color-primary-500);
+  --tile-manager-tile-focus-ring-active-width: 8px;
+  --tile-manager-tile-focus-ring-color: unset;
+  --tile-manager-tile-focus-ring-inward-offset: 2px;
+  --tile-manager-tile-focus-ring-outward-offset: 2px;
+  --tile-manager-tile-font-family: unset;
+  --tile-manager-tile-font-letter-spacing: unset;
+  --tile-manager-tile-font-line-height: unset;
+  --tile-manager-tile-font-size: unset;
+  --tile-manager-tile-font-text-decoration: unset;
+  --tile-manager-tile-font-text-transform: unset;
+  --tile-manager-tile-font-weight: unset;
+  --tile-manager-tile-gap: unset;
+  --tile-manager-tile-header-background: transparent;
+  --tile-manager-tile-header-border-color: var(--memphis-scheme-stroke);
+  --tile-manager-tile-header-padding-bottom: 12px;
+  --tile-manager-tile-header-padding-left: 16px;
+  --tile-manager-tile-header-padding-right: 16px;
+  --tile-manager-tile-header-padding-top: 12px;
+  --tile-manager-tile-padding-bottom: unset;
+  --tile-manager-tile-padding-left: unset;
+  --tile-manager-tile-padding-right: unset;
+  --tile-manager-tile-padding-top: unset;
+  --tile-manager-tile-resize-handle-color: var(--memphis-color-primary-500);
+  --tile-manager-tile-resize-indicator-color: var(--memphis-scheme-stroke);
+  --tile-manager-tile-shadow: var(--memphis-shadow-sm, 0 1px 3px 0 #0000001a);
+  --tile-manager-tile-title-color: var(--memphis-scheme-on-background);
+  --tile-manager-tile-title-font-size: 1rem;
+  --tile-manager-tile-title-font-weight: 700;
+  --tile-manager-tile-transition-duration: .15s;
+  --tile-manager-tile-transition-mode: ease-in-out;
+  --tile-manager-tile-transition-property: unset;
+  --tile-manager-tile-translate: unset;
+}
+
+@media screen and (prefers-reduced-motion: reduce) {
+  :host {
+    transition-duration: .01ms;
+  }
+}
+
+:host {
+  box-sizing: border-box;
+  display: block;
+  position: relative;
+}
+
+:host *, :host :before, :host :after {
+  box-sizing: border-box;
+  background-repeat: no-repeat;
+}
+
+:host :before, :host :after {
+  text-decoration: inherit;
+  vertical-align: inherit;
+}
+
+:host([hidden]) {
+  display: none !important;
+}
+
+:host {
+  box-sizing: border-box;
+  grid-column: var(--tile-col-start, auto) / span var(--tile-col-span, 1);
+  grid-row: var(--tile-row-start, auto) / span var(--tile-row-span, 1);
+  background: var(--tile-manager-tile-background);
+  border: var(--tile-manager-tile-border-width) solid var(--tile-manager-tile-border-color);
+  border-radius: var(--tile-manager-tile-border-radius);
+  min-width: 0;
+  min-height: 0;
+  box-shadow: var(--tile-manager-tile-shadow);
+  transition: box-shadow var(--tile-manager-tile-transition-duration) var(--tile-manager-tile-transition-mode), transform var(--tile-manager-tile-transition-duration) var(--tile-manager-tile-transition-mode), grid-column var(--tile-manager-tile-transition-duration) var(--tile-manager-tile-transition-mode), grid-row var(--tile-manager-tile-transition-duration) var(--tile-manager-tile-transition-mode), width var(--tile-manager-tile-transition-duration) var(--tile-manager-tile-transition-mode), height var(--tile-manager-tile-transition-duration) var(--tile-manager-tile-transition-mode), opacity var(--tile-manager-tile-transition-duration) var(--tile-manager-tile-transition-mode);
+  view-transition-name: var(--tile-transition-name, none);
+  display: block;
+  position: relative;
+  overflow: hidden;
+}
+
+:host[maximized] {
+  z-index: 10;
+  animation: .3s ease-out tile-maximize;
+  grid-area: 1 / 1 / -1 / -1 !important;
+}
+
+@keyframes tile-maximize {
+  from {
+    opacity: .8;
+    transform: scale(.9);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes tile-restore {
+  from {
+    opacity: .8;
+    transform: scale(1.05);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+:host[part~="restoring"] {
+  animation: .3s ease-out tile-restore;
+}
+
+:host:fullscreen {
+  border-radius: 0;
+}
+
+:host[part~="dragging"] {
+  opacity: var(--tile-manager-tile-dragging-opacity);
+  cursor: grabbing;
+  z-index: 100;
+}
+
+:host[part~="drop-target"] {
+  outline: 2px dashed var(--tile-manager-tile-drop-target-color);
+  outline-offset: -2px;
+}
+
+:host[part~="resizing"] {
+  z-index: 100;
+}
+
+:host [part~="base"] {
+  box-sizing: border-box;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
+
+:host [part~="header"] {
+  padding: var(--tile-manager-tile-header-padding-top) var(--tile-manager-tile-header-padding-right) var(--tile-manager-tile-header-padding-bottom) var(--tile-manager-tile-header-padding-left);
+  border-bottom: 1px solid var(--tile-manager-tile-header-border-color);
+  background: var(--tile-manager-tile-header-background);
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  flex-shrink: 0;
+  justify-content: space-between;
+  align-items: center;
+  display: flex;
+}
+
+:host :host-context(mosaik-tile-manager[drag-mode=tile-header]) [part~="header"] {
+  cursor: grab;
+}
+
+:host :host-context(mosaik-tile-manager[drag-mode=tile]) [part~="base"] {
+  cursor: grab;
+}
+
+:host[part~="dragging"] [part~="base"], :host[part~="dragging"] [part~="header"] {
+  cursor: grabbing;
+}
+
+:host [part~="title"] {
+  font-weight: var(--tile-manager-tile-title-font-weight);
+  font-size: var(--tile-manager-tile-title-font-size);
+  color: var(--tile-manager-tile-title-color);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+  overflow: hidden;
+}
+
+:host [part~="actions"] {
+  flex-shrink: 0;
+  align-items: center;
+  gap: 4px;
+  display: flex;
+}
+
+:host [part~="content-container"] {
+  padding: var(--tile-manager-tile-content-padding-top) var(--tile-manager-tile-content-padding-right) var(--tile-manager-tile-content-padding-bottom) var(--tile-manager-tile-content-padding-left);
+  box-sizing: border-box;
+  flex: 1;
+  overflow: auto;
+}
+
+:host .resize-container {
+  pointer-events: none;
+  position: absolute;
+  inset: 0;
+}
+
+:host .resize-handle {
+  pointer-events: auto;
+  background: none;
+  transition: background .15s;
+  position: absolute;
+}
+
+:host [part~="trigger-side"] {
+  cursor: ew-resize;
+  width: 8px;
+  height: 100%;
+  top: 0;
+  right: 0;
+}
+
+:host [part~="trigger"] {
+  cursor: nwse-resize;
+  width: 16px;
+  height: 16px;
+  bottom: 0;
+  right: 0;
+}
+
+:host [part~="trigger-bottom"] {
+  cursor: ns-resize;
+  height: 8px;
+  bottom: 0;
+  left: 0;
+  right: 16px;
+}
+
+:host[resize-mode="hover"] .resize-handle {
+  opacity: 0;
+}
+
+:host[resize-mode="hover"]:hover .resize-handle, :host[resize-mode="always"] .resize-handle {
+  opacity: 1;
+}
+
+:host .resize-handle:hover, :host[part~="resizing"] .resize-handle {
+  background: var(--tile-manager-tile-resize-handle-color);
+}
+
+:host [part~="trigger"]:after {
+  content: "";
+  border-right: 2px solid var(--tile-manager-tile-resize-indicator-color);
+  border-bottom: 2px solid var(--tile-manager-tile-resize-indicator-color);
+  width: 8px;
+  height: 8px;
+  position: absolute;
+  bottom: 4px;
+  right: 4px;
+}
+
+:host[resize-mode="hover"] [part~="trigger"]:after {
+  opacity: 0;
+}
+
+:host[resize-mode="hover"]:hover [part~="trigger"]:after {
+  opacity: 1;
+}
+
+:host[disable-resize] .resize-container, :host[maximized] .resize-container, :host:fullscreen .resize-container {
+  display: none;
+}
+
+    `;
+}
+//# sourceMappingURL=TileManagerTileElement.Memphis.js.map

package/Controls/Components/Layouts/TileManager/Themes/TileManagerTileElement.Memphis.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TileManagerTileElement.Memphis.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Layouts/TileManager/Themes/TileManagerTileElement.Memphis.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,kCAAkC;IAC9C,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoRT,CAAC;AACN,CAAC"}

package/Controls/Components/Layouts/TileManager/TileManagerElement.d.ts

@@ -0,0 +1,195 @@
+import { type IEventEmitter } from '@breadstone/mosaik-elements';
+import { CustomElement } from '../../Abstracts/CustomElement';
+import type { ITileManagerElementProps } from './ITileManagerElementProps';
+import type { TileManagerDragMode } from '../../../Types/TileManagerDragMode';
+import type { TileManagerResizeMode } from '../../../Types/TileManagerResizeMode';
+import type { ISerializedTile } from './ISerializedTile';
+import { TileManagerTileElement } from './TileManagerTileElement';
+import type { ILayoutChangeEventDetail } from './Events/LayoutChangeEvent';
+declare const TileManagerElement_base: (abstract new (...args: Array<any>) => import("../../../Behaviors/Themeable").IThemeableProps) & typeof CustomElement & import("../../../Behaviors/Themeable").IThemeableCtor;
+/**
+ * The tile manager component is a layout container used to display a group of tiles.
+ * The tiles can be dragged to a different position, resized, maximized, or made full-screen.
+ * The layout of tiles within the tile manager can be saved for later use.
+ *
+ * @element mosaik-tile-manager
+ * @category Layout
+ *
+ * @fires layoutChange - Fired when the layout changes.
+ *
+ * @slot - Default slot for tile elements.
+ *
+ * @csspart base - The wrapper for the entire tile manager content.
+ * @csspart maximized-overlay - The overlay shown when a tile is maximized.
+ *
+ * @public
+ */
+export declare class TileManagerElement extends TileManagerElement_base implements ITileManagerElementProps {
+    private _resizeMode;
+    private _dragMode;
+    private _columnCount;
+    private _minColumnWidth;
+    private _minRowHeight;
+    private _gap;
+    private readonly _tilesState;
+    private readonly _serializer;
+    private readonly _slotController;
+    private readonly _layoutChange;
+    /**
+     * Constructs a new instance of the `TileManagerElement` class.
+     *
+     * @public
+     */
+    constructor();
+    /**
+     * Returns the `{@link is}` property.
+     *
+     * @public
+     * @static
+     * @readonly
+     */
+    static get is(): string;
+    /**
+     * Gets or sets the `resizeMode` property.
+     * Determines when the resize handles are visible.
+     *
+     * - `none` - Resize handles are not visible.
+     * - `hover` - Resize handles are visible on hover.
+     * - `always` - Resize handles are always visible.
+     *
+     * @public
+     * @attr resize-mode
+     */
+    get resizeMode(): TileManagerResizeMode;
+    set resizeMode(value: TileManagerResizeMode);
+    /**
+     * Gets or sets the `dragMode` property.
+     * Determines how the tiles can be dragged.
+     *
+     * - `none` - Tiles cannot be dragged.
+     * - `tile` - Tiles can be dragged from any part of the tile.
+     * - `tile-header` - Tiles can be dragged from the tile header only.
+     *
+     * @public
+     * @attr drag-mode
+     */
+    get dragMode(): TileManagerDragMode;
+    set dragMode(value: TileManagerDragMode);
+    /**
+     * Gets or sets the `columnCount` property.
+     * Specifies the number of columns in the grid.
+     *
+     * @public
+     * @attr column-count
+     */
+    get columnCount(): number | null;
+    set columnCount(value: number | null);
+    /**
+     * Gets or sets the `minColumnWidth` property.
+     * Specifies the minimum column width in pixels.
+     * Used with auto-fit columns.
+     *
+     * @public
+     * @attr min-column-width
+     */
+    get minColumnWidth(): number | null;
+    set minColumnWidth(value: number | null);
+    /**
+     * Gets or sets the `minRowHeight` property.
+     * Specifies the minimum row height in pixels.
+     *
+     * @public
+     * @attr min-row-height
+     */
+    get minRowHeight(): number | null;
+    set minRowHeight(value: number | null);
+    /**
+     * Gets or sets the `gap` property.
+     * Specifies the gap between tiles in pixels.
+     *
+     * @public
+     * @attr
+     */
+    get gap(): number | null;
+    set gap(value: number | null);
+    /**
+     * Gets all tile elements in the tile manager.
+     *
+     * @public
+     * @readonly
+     */
+    get tiles(): Array<TileManagerTileElement>;
+    /**
+     * Gets the currently maximized tile, if any.
+     *
+     * @public
+     * @readonly
+     */
+    get maximizedTile(): TileManagerTileElement | null;
+    /**
+     * Gets the layoutChange event emitter.
+     *
+     * @public
+     * @readonly
+     */
+    get layoutChangeEvent(): IEventEmitter<ILayoutChangeEventDetail>;
+    /**
+     * @public
+     * @override
+     */
+    connectedCallback(): void;
+    /**
+     * Handles slot changes to update tile positions.
+     *
+     * @public
+     */
+    handleSlotChange(): void;
+    /**
+     * Saves the current layout state.
+     *
+     * @returns An array of serialized tile states.
+     *
+     * @public
+     */
+    saveLayout(): Array<ISerializedTile>;
+    /**
+     * Saves the current layout state as a JSON string.
+     *
+     * @returns A JSON string representing the layout.
+     *
+     * @public
+     */
+    saveLayoutAsJSON(): string;
+    /**
+     * Loads a previously saved layout.
+     *
+     * @param layout - The serialized layout to load.
+     *
+     * @public
+     */
+    loadLayout(layout: Array<ISerializedTile>): void;
+    /**
+     * Loads a layout from a JSON string.
+     *
+     * @param json - The JSON string representing the layout.
+     *
+     * @public
+     */
+    loadLayoutFromJSON(json: string): void;
+}
+/**
+ * @public
+ */
+export declare namespace TileManagerElement {
+    type Props = ITileManagerElementProps;
+}
+/**
+ * @public
+ */
+declare global {
+    interface HTMLElementTagNameMap {
+        'mosaik-tile-manager': TileManagerElement;
+    }
+}
+export {};
+//# sourceMappingURL=TileManagerElement.d.ts.map

package/Controls/Components/Layouts/TileManager/TileManagerElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TileManagerElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Layouts/TileManager/TileManagerElement.ts"],"names":[],"mappings":"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"}