import type { HubEntity } from "../core/types/HubEntity"; import type { IConfigurationSchema, IConfigurationValues } from "../core/schemas/types"; import type { IEntityPermissionPolicy } from "../permissions/types/IEntityPermissionPolicy"; import type { IHubSite } from "../core/types/IHubSite"; import type { IUiSchema } from "../core/schemas/types"; import type { IMigratableSchema } from "../migrations/types"; /** Type representing supported responsive breakpoints. */ export type Breakpoint = "xs" | "sm" | "md" | "lg" | "xl" | "xxl"; /** Map of breakpoint names to their minimum pixel widths. */ export declare const BREAKPOINTS: Record; /** Defines a union type for valid ARIA roles */ export type AriaRole = "application" | "article" | "button" | "cell" | "checkbox" | "columnheader" | "combobox" | "complementary" | "contentinfo" | "definition" | "directory" | "document" | "feed" | "figure" | "form" | "group" | "heading" | "img" | "link" | "list" | "listbox" | "listitem" | "main" | "math" | "menu" | "menubar" | "menuitem" | "navigation" | "none" | "note" | "option" | "presentation" | "progressbar" | "radio" | "radiogroup" | "region" | "row" | "rowgroup" | "rowheader" | "scrollbar" | "searchbox" | "separator" | "slider" | "spinbutton" | "status" | "switch" | "tab" | "table" | "tabpanel" | "term" | "textbox" | "timer" | "toolbar" | "tooltip" | "tree" | "treegrid" | "treeitem"; /** * Type for a value that can be either a single value or a map of * breakpoint-specific values. */ export type ResponsiveValue = Partial> | T; /** Type representing valid column widths (1-12). */ export type ColumnWidth = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12; /** * Interface representing a translation map for layout strings. * Each key is a language code, and the value is a map of * translation keys to translated strings: * ``` * { * "en": { * "welcome": "Welcome to our site", * "goodbye": "Thank you for visiting" * }, * "fr": { * "welcome": "Bienvenue sur notre site", * "goodbye": "Merci de votre visite" * } * } * ``` */ export interface ITranslationMap { /** * A key-value pair where the key is a language * code and the value is a map of translation * keys to translated text. */ [language: string]: Record; } /** * Type representing a map of CSS property names to values: * { * "color": "red", * "font-size": "16px" * } */ export type StyleMap = Record; /** * Type representing a reference or a value. * References are resolved before variable interpolation. */ export type RefOrValue = Date | number | string | { $ref: string; }; export type Ref = { $ref: string; }; export type SectionOrRef = ISection | Ref; /** * Interface representing a layout variable. These can be used * anywhere in the layout, and the values will be interpolated * into the layout before rendering. All `$ref` values will be * resolved before interpolation. */ export interface ILayoutVariable { /** * The type of the variable. Used to generate a json & ui * schemas allowing values to be provided by the user, * during a "Create from..." operation. */ type: "boolean" | "color" | "date" | "datetime" | "number" | "string" | "time" | "url"; /** * A description of the variable. This is used to provide * a hint to the user when they are entering a value for * the variable. */ description?: string; /** * The value of the variable. This can be a string, number, * boolean, date, datetime, time, color, or url. If the value * is a reference, it will be resolved before interpolation */ value: RefOrValue; } /** Interface representing overrides for layout nodes. */ export interface INodeOverrides { /** Overrides for the node's properties */ [nodeId: string]: Partial; } /** Type representing any node in the layout tree. */ export type LayoutNode = IColumn | ILayoutNode | IRow | ISection; /** Interface representing a generic layout node. */ export interface ILayoutNode extends IMigratableSchema { /** Unique identifier for the node. */ id: string; /** Tag name to render for this node. */ tag: LayoutNodeTag; /** Optional properties for the node. */ properties?: Record; /** Optional array of child nodes. */ children?: LayoutNode[]; /** Optional slotted content for the node */ slots?: Record; /** Optional schema version for the settings of this specific component. */ schemaVersion?: number; /** Optional map of CSS styles for the node. */ styles?: StyleMap; /** Optional array of CSS classes for the node. */ classes?: string[]; /** * Optional visibility settings for the node. If * the resulting visibility is false, the node * will only be rendered in the editor. */ visibility?: LayoutNodeVisibility; /** Optional array of permission policies for access control. */ permissions?: IEntityPermissionPolicy[]; /** Optional: when true the node can not be editied, regardless of the component rules. * This is a means to control the edit access to sections of the layout, but */ readOnly?: boolean; /** Optional translations for the layout. */ translations?: ITranslationMap; } /** * Type to represent a layout node's visibility. This * is a discriminated union between static visibility * and group-based visibility. We can expand this in * the future to add more visibility types as needed. */ export type LayoutNodeVisibility = ILayoutNodeVisibilityStatic | ILayoutNodeVisibilityGroup; interface ILayoutNodeVisibilityBase { /** * "kind" of visibility - used to distinguish * between the discriminated union types */ kind: string; } export interface ILayoutNodeVisibilityStatic extends ILayoutNodeVisibilityBase { kind: "static"; /** whether the node is hidden or not */ isHidden: boolean; } export interface ILayoutNodeVisibilityGroup extends ILayoutNodeVisibilityBase { kind: "group"; /** The groupIds which control the node's visibility */ groupIds: string[]; } /** Interface representing a layout section node. */ export interface ISection extends ILayoutNode { /** Tag for a section node (always 'arcgis-layout-section'). */ tag: "arcgis-layout-section"; /** Array of row children for the section. */ children?: IRow[]; /** Optional section-specific properties. */ sectionProps?: ISectionProps; /** Optional section label */ label?: string; } /** Interface representing a layout row node. */ export interface IRow extends ILayoutNode { /** Tag for a row node (always 'arcgis-layout-row'). */ tag: "arcgis-layout-row"; /** Array of column children for the row. */ children?: IColumn[]; /** Optional row-specific properties. */ rowProps?: IRowProps; } /** * type for column children - a column can contain * rows, or cards */ export type LayoutColumnChild = ILayoutNode | IRow; /** * Interface representing a layout column node. */ export interface IColumn extends ILayoutNode { /** Tag for a column node (always 'arcgis-hub-layout-column'). */ tag: "arcgis-layout-column"; /** Array of child nodes for the column (excluding sections). */ children?: LayoutColumnChild[]; /** Optional column-specific properties. */ columnProps?: IColumnProps; /** Optional properties for the column node. */ properties?: Record; } /** Interface for common accessible properties. */ export interface IAccessibleProps { /** Optional ARIA role for accessibility. */ role?: AriaRole; /** Optional ARIA label for accessibility. */ ariaLabel?: string; } /** * Interface for section-specific properties, including * accessibility and layout options. */ export interface ISectionProps extends IAccessibleProps { /** Remove horizontal gutters (column padding) from the section. */ noGutters?: boolean; /** * Responsive full width for the section. * Section will be 100% wide above this breakpoint. */ fullWidthAt?: Breakpoint | "fluid"; } /** * Interface for row-specific properties, including * accessibility and layout options. */ export interface IRowProps extends IAccessibleProps { /** How to align columns vertically (cross axis). */ alignItems?: ResponsiveValue<"around" | "between" | "center" | "end" | "start" | "stretch">; } /** * Interface for column-specific properties, including * accessibility and layout options. */ export interface IColumnProps extends IAccessibleProps { /** Responsive width for the column (1-12). */ width?: ResponsiveValue; /** Responsive offset (left margin) for the column. */ offset?: ResponsiveValue<0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12>; /** Responsive self-alignment for the column. */ alignSelf?: ResponsiveValue<"auto" | "baseline" | "center" | "end" | "start" | "stretch">; alignItems?: ResponsiveValue<"auto" | "baseline" | "center" | "end" | "start" | "stretch">; /** * Controls horizontal alignment of children within the column. * Accepts standard CSS 'justify-content' values, or responsive values. * Example: 'flex-start', 'center', 'flex-end', 'space-between', etc. */ justifyContent?: ResponsiveValue<"around" | "between" | "center" | "end" | "evenly" | "start">; shrink?: boolean; } /** * Interface representing a history entry for a * layout node. */ export interface IHistoryEntry { /** Node id for the history entry. */ nodeId: string; /** UTC timestamp for the change. */ timestamp: number; /** Username of the user who made the change. */ username: string; /** Action performed (e.g., 'add:node', 'update:node', 'remove:block'). */ action: string; } /** * Interface representing a configurable node in * the layout system. All layout node components * should implement this interface to ensure * consistency. * * Note: this is temporarily an empty interface that * can be expanded in the future as needed. */ export interface IConfigurableLayoutNode { } /** * Type representing an HTML element that extends * the IConfigurableLayoutNode interface. */ export type HTMLConfigurableLayoutNodeElement = HTMLElement & IConfigurableLayoutNode; /** * Interface representing the configuration for a * layout node. */ export interface ILayoutNodeConfig { /** * Human-readable name of the layout node. * Used internally for logging purposes * (e.g. telemetry, etc.) */ name: string; /** Tag of the layout node. */ tag: LayoutNodeTag; /** Whether this node is disabled in the add menu */ disableAdd?: boolean; /** Whether to hide this node in the add menu */ hideAdd?: boolean; /** Whether the node is editable. */ disableEdit?: boolean; /** Whether the node is repositionable. */ disableMove?: boolean; /** Whether the node is deletable. */ disableDelete?: boolean; /** Whether the node's visibility is adjustable. */ disableAdjustVisibility?: boolean; /** Default values for the node's configuration. */ defaults?: Record; /** Optional icon to represent the node in the UI. */ icon?: string; /** * Various translation strings to display or use for a11y * purposes in the node's editing UI */ i18n: { ariaLabel?: string; label: string; description?: string; editLabel?: string; deleteLabel?: string; repositionUpLabel?: string; repositionDownLabel?: string; }; /** * Optional editor configuration for the node. If provided * and the card is editable, an edit control will be enabled * that will open the editing experience defined here. */ editor?: LayoutNodeEditorConfig; } /** * Base type representing common properties for * a layout node's editor configuration. */ type LayoutNodeEditorConfigBase = { /** * Optional callback to transform values before * passing to the editor. */ valuesInCallback?: (val: IConfigurationValues) => unknown; /** * Optional callback to transform values after * editing, before mapping back to the node's * properties. */ valuesOutCallback?: (vals: IConfigurationValues, options?: Record) => unknown; /** Additional properties to pass to the editor. */ properties?: Record; }; /** * Type representing a layout node's editor * configuration. This can be driven by an * editor tag or the full JSON schema and * UI schema defining a generic form-based * editor. */ export type LayoutNodeEditorConfig = (LayoutNodeEditorConfigBase & { /** Tag of the node's editor component. */ tag: LayoutEditorTag; /** * Event emitted by the editor component * when values change. */ inputChangeEvent: string; /** * Name of the prop to pass the editor's * values into - e.g. when a node is edited, * the updated values from the editor will be * set on this property of the editor. * Note: defaults to "values" */ valuesProp?: string; schema?: never; uiSchema?: never; }) | (LayoutNodeEditorConfigBase & { tag?: never; inputChangeEvent?: never; valuesProp?: never; /** * JSON schema defining the underlying * properties of the node's editor. */ schema: IConfigurationSchema; /** * Optional UI schema defining the UI of the * node's editor. */ uiSchema: IUiSchema; }); /** * Interface representing contextual information * used to process various parts of the layout * system (e.g. processing the layout itself, * generating addable layout nodes, etc.) */ export interface IProcessLayoutOptions { entity?: HubEntity; site?: IHubSite; variables?: Record; translations?: Record; } /** * An array of tags representing components that are * supported by the layout system and can be defined * in an ILayout object. */ export declare const layoutNodeTags: readonly ["arcgis-layout-section", "arcgis-layout-row", "arcgis-layout-column", "calcite-button", "calcite-chip", "calcite-avatar", "arcgis-text-card", "arcgis-hub-gallery-card", "arcgis-hub-image", "arcgis-hub-embed-card", "arcgis-nav-card", "arcgis-hub-timeline", "arcgis-hub-entity-metadata", "arcgis-hub-catalog", "arcgis-hub-map-view", "arcgis-hub-entity-metrics-card", "arcgis-hub-entity-associations-card", "arcgis-hub-entity-status-card", "arcgis-hub-entity-metrics-view", "arcgis-hub-project-initiatives-view", "arcgis-hub-entity-hero", "div"]; /** Union type of all supported layout node tags. */ export type LayoutNodeTag = (typeof layoutNodeTags)[number]; /** * An array of tags representing components that are * supported as editors for layout nodes. */ export declare const layoutEditorTags: readonly ["arcgis-hub-gallery-card-editor", "hub-field-input-input", "hub-field-input-rich-text", "arcgis-hub-embed-card-editor", "arcgis-hub-timeline-editor", "hub-field-input-image-picker"]; /** Union type of all supported layout editor tags. */ export type LayoutEditorTag = (typeof layoutEditorTags)[number]; export {};