{ "schemaVersion": "1.0.0", "readme": "", "modules": [ { "kind": "javascript-module", "path": "components/absolute-container/absolute-container.js", "declarations": [ { "kind": "class", "description": "", "name": "ZnAbsoluteContainer", "slots": [ { "description": "The default slot", "name": "" } ], "members": [ { "kind": "field", "name": "_resizeFrame", "type": { "text": "number | null" }, "privacy": "private", "default": "null" }, { "kind": "method", "name": "resize" } ], "superclass": { "name": "ZincElement", "module": "/src/internal/zinc-element" }, "summary": "The absolute container will take the total inner height of the content (positioned absolute), and set that\nas it's min height, Creating enough space to show the content.", "tagNameWithoutPrefix": "absolute-container", "tagName": "zn-absolute-container", "customElement": true, "jsDoc": "/**\n * @summary The absolute container will take the total inner height of the content (positioned absolute), and set that\n * as it's min height, Creating enough space to show the content.\n *\n * @documentation https://zinc.style/components/absolute-container\n * @status experimental\n * @since 1.0\n *\n * @slot - The default slot\n *\n */", "documentation": "https://zinc.style/components/absolute-container", "status": "experimental", "since": "1.0" } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "ZnAbsoluteContainer", "module": "components/absolute-container/absolute-container.js" } } ] }, { "kind": "javascript-module", "path": "components/alert/alert.js", "declarations": [ { "kind": "class", "description": "", "name": "ZnAlert", "cssProperties": [ { "description": "An example CSS custom property.", "name": "--example" } ], "cssParts": [ { "description": "The component's base wrapper.", "name": "base" } ], "slots": [ { "description": "The default slot.", "name": "" }, { "description": "An example slot.", "name": "example" } ], "members": [ { "kind": "field", "name": "icon", "type": { "text": "string" }, "default": "''", "attribute": "icon" }, { "kind": "field", "name": "caption", "type": { "text": "string" }, "default": "''", "attribute": "caption" }, { "kind": "field", "name": "collapse", "type": { "text": "boolean" }, "default": "false", "attribute": "collapse" }, { "kind": "field", "name": "appearance", "type": { "text": "'transparent' | 'solid'" }, "default": "'transparent'", "attribute": "appearance", "reflects": true }, { "kind": "field", "name": "level", "type": { "text": "'primary' | 'error' | 'info' | 'success' | 'warning' | 'note' | 'cosmic'" }, "default": "'info'", "attribute": "level" }, { "kind": "field", "name": "center", "type": { "text": "boolean" }, "default": "false", "attribute": "center", "reflects": true }, { "kind": "field", "name": "size", "type": { "text": "'small' | 'medium' | 'large'" }, "default": "'medium'", "attribute": "size" }, { "kind": "method", "name": "hideAlert", "privacy": "public" } ], "events": [ { "description": "Emitted as an example.", "name": "zn-event-name" } ], "attributes": [ { "name": "icon", "type": { "text": "string" }, "default": "''", "fieldName": "icon" }, { "name": "caption", "type": { "text": "string" }, "default": "''", "fieldName": "caption" }, { "name": "collapse", "type": { "text": "boolean" }, "default": "false", "fieldName": "collapse" }, { "name": "appearance", "type": { "text": "'transparent' | 'solid'" }, "default": "'transparent'", "fieldName": "appearance" }, { "name": "level", "type": { "text": "'primary' | 'error' | 'info' | 'success' | 'warning' | 'note' | 'cosmic'" }, "default": "'info'", "fieldName": "level" }, { "name": "center", "type": { "text": "boolean" }, "default": "false", "fieldName": "center" }, { "name": "size", "type": { "text": "'small' | 'medium' | 'large'" }, "default": "'medium'", "fieldName": "size" } ], "superclass": { "name": "ZincElement", "module": "/src/internal/zinc-element" }, "summary": "Short summary of the component's intended use.", "tagNameWithoutPrefix": "alert", "tagName": "zn-alert", "customElement": true, "jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/alert\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-example\n *\n * @event zn-event-name - Emitted as an example.\n *\n * @slot - The default slot.\n * @slot example - An example slot.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --example - An example CSS custom property.\n */", "documentation": "https://zinc.style/components/alert", "status": "experimental", "since": "1.0", "dependencies": [ "zn-example" ] } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "ZnAlert", "module": "components/alert/alert.js" } } ] }, { "kind": "javascript-module", "path": "components/action-bar/action-bar.js", "declarations": [ { "kind": "class", "description": "", "name": "ZnActionBar", "cssProperties": [ { "description": "An example CSS custom property.", "name": "--example" } ], "cssParts": [ { "description": "The component's base wrapper.", "name": "base" } ], "slots": [ { "description": "The default slot.", "name": "" }, { "description": "An example slot.", "name": "example" } ], "members": [ { "kind": "field", "name": "localize", "privacy": "private", "readonly": true, "default": "new LocalizeController(this)" } ], "events": [ { "description": "Emitted as an example.", "name": "zn-event-name" } ], "superclass": { "name": "ZincElement", "module": "/src/internal/zinc-element" }, "summary": "Short summary of the component's intended use.", "tagNameWithoutPrefix": "action-bar", "tagName": "zn-action-bar", "customElement": true, "jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/action-bar\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-example\n *\n * @event zn-event-name - Emitted as an example.\n *\n * @slot - The default slot.\n * @slot example - An example slot.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --example - An example CSS custom property.\n */", "documentation": "https://zinc.style/components/action-bar", "status": "experimental", "since": "1.0", "dependencies": [ "zn-example" ] } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "ZnActionBar", "module": "components/action-bar/action-bar.js" } } ] }, { "kind": "javascript-module", "path": "components/animated-button/animated-button.js", "declarations": [ { "kind": "class", "description": "", "name": "ZnAnimatedButton", "members": [ { "kind": "field", "name": "dependencies", "type": { "text": "object" }, "static": true, "default": "{ 'zn-icon': ZnIcon }" }, { "kind": "field", "name": "currentState", "type": { "text": "AnimatedButtonState" }, "privacy": "private", "default": "'idle'" }, { "kind": "field", "name": "errorMessage", "type": { "text": "string" }, "privacy": "private", "default": "''" }, { "kind": "field", "name": "idleText", "type": { "text": "string" }, "default": "'Purchase'", "description": "The text to display in the idle state", "attribute": "idle-text" }, { "kind": "field", "name": "processingText", "type": { "text": "string" }, "default": "'Purchasing'", "description": "The text to display in the processing state", "attribute": "processing-text" }, { "kind": "field", "name": "successText", "type": { "text": "string" }, "default": "'Success'", "description": "The text to display in the success state", "attribute": "success-text" }, { "kind": "field", "name": "failureText", "type": { "text": "string" }, "default": "'Failed'", "description": "The text to display in the failure state", "attribute": "failure-text" }, { "kind": "field", "name": "redirectUrl", "type": { "text": "string" }, "default": "''", "description": "The URL to redirect to after successful purchase", "attribute": "redirect-url" }, { "kind": "field", "name": "redirectDelay", "type": { "text": "number" }, "default": "1500", "description": "Delay in milliseconds before redirecting after success (default: 1500ms)", "attribute": "redirect-delay" }, { "kind": "field", "name": "failureResetDelay", "type": { "text": "number" }, "default": "2000", "description": "Delay in milliseconds before resetting from failure state (default: 2000ms)", "attribute": "failure-reset-delay" }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Disabled state", "attribute": "disabled", "reflects": true }, { "kind": "field", "name": "name", "type": { "text": "string" }, "default": "''", "description": "The name of the form control (required for form submission)", "attribute": "name" }, { "kind": "field", "name": "value", "type": { "text": "string" }, "default": "''", "description": "The value of the form control", "attribute": "value" }, { "kind": "field", "name": "resetTimeout", "type": { "text": "number | undefined" }, "privacy": "private" }, { "kind": "field", "name": "redirectTimeout", "type": { "text": "number | undefined" }, "privacy": "private" }, { "kind": "method", "name": "clearTimeouts", "privacy": "private" }, { "kind": "method", "name": "purchase", "privacy": "public", "return": { "type": { "text": "void" } }, "description": "Programmatically trigger the purchase flow" }, { "kind": "method", "name": "setSuccess", "privacy": "public", "return": { "type": { "text": "void" } }, "description": "Set the button to success state manually" }, { "kind": "method", "name": "setFailure", "privacy": "public", "return": { "type": { "text": "void" } }, "parameters": [ { "name": "message", "default": "''" } ], "description": "Set the button to failure state manually with optional error message" }, { "kind": "method", "name": "reset", "privacy": "public", "return": { "type": { "text": "void" } }, "description": "Reset the button to idle state" }, { "kind": "method", "name": "handlePurchase", "privacy": "private" }, { "kind": "method", "name": "scheduleRedirect", "privacy": "private" }, { "kind": "method", "name": "scheduleReset", "privacy": "private" }, { "kind": "method", "name": "handleClick", "privacy": "private" } ], "attributes": [ { "name": "idle-text", "type": { "text": "string" }, "default": "'Purchase'", "description": "The text to display in the idle state", "fieldName": "idleText" }, { "name": "processing-text", "type": { "text": "string" }, "default": "'Purchasing'", "description": "The text to display in the processing state", "fieldName": "processingText" }, { "name": "success-text", "type": { "text": "string" }, "default": "'Success'", "description": "The text to display in the success state", "fieldName": "successText" }, { "name": "failure-text", "type": { "text": "string" }, "default": "'Failed'", "description": "The text to display in the failure state", "fieldName": "failureText" }, { "name": "redirect-url", "type": { "text": "string" }, "default": "''", "description": "The URL to redirect to after successful purchase", "fieldName": "redirectUrl" }, { "name": "redirect-delay", "type": { "text": "number" }, "default": "1500", "description": "Delay in milliseconds before redirecting after success (default: 1500ms)", "fieldName": "redirectDelay" }, { "name": "failure-reset-delay", "type": { "text": "number" }, "default": "2000", "description": "Delay in milliseconds before resetting from failure state (default: 2000ms)", "fieldName": "failureResetDelay" }, { "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Disabled state", "fieldName": "disabled" }, { "name": "name", "type": { "text": "string" }, "default": "''", "description": "The name of the form control (required for form submission)", "fieldName": "name" }, { "name": "value", "type": { "text": "string" }, "default": "''", "description": "The value of the form control", "fieldName": "value" } ], "superclass": { "name": "ZincElement", "module": "/src/internal/zinc-element" }, "tagNameWithoutPrefix": "animated-button", "tagName": "zn-animated-button", "customElement": true } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "ZnAnimatedButton", "module": "components/animated-button/animated-button.js" } } ] }, { "kind": "javascript-module", "path": "components/audio-select/audio-select.js", "declarations": [ { "kind": "class", "description": "", "name": "ZnAudioSelect", "cssProperties": [ { "description": "An example CSS custom property.", "name": "--example" } ], "cssParts": [ { "description": "The component's base wrapper.", "name": "base" } ], "slots": [ { "description": "The default slot.", "name": "" }, { "description": "The actions slot.", "name": "actions" }, { "description": "The footer slot.", "name": "footer" } ], "members": [ { "kind": "field", "name": "_isPlaying", "type": { "text": "boolean" }, "privacy": "private", "default": "false" }, { "kind": "field", "name": "_audio", "type": { "text": "HTMLAudioElement" }, "privacy": "private", "readonly": true, "default": "new Audio()" }, { "kind": "field", "name": "value", "type": { "text": "string" }, "default": "''", "attribute": "value" }, { "kind": "field", "name": "label", "type": { "text": "string" }, "default": "''", "attribute": "label" }, { "kind": "field", "name": "placeholder", "type": { "text": "string" }, "default": "''", "attribute": "placeholder" }, { "kind": "field", "name": "files", "type": { "text": "AudioFile[]" }, "default": "[]", "attribute": "files" }, { "kind": "method", "name": "stopAudio" }, { "kind": "method", "name": "handleSelectChange", "parameters": [ { "name": "e", "type": { "text": "ZnChangeEvent" } } ] }, { "kind": "method", "name": "togglePreview", "parameters": [ { "name": "e", "type": { "text": "CustomEvent" } } ] } ], "attributes": [ { "name": "value", "type": { "text": "string" }, "default": "''", "fieldName": "value" }, { "name": "label", "type": { "text": "string" }, "default": "''", "fieldName": "label" }, { "name": "placeholder", "type": { "text": "string" }, "default": "''", "fieldName": "placeholder" }, { "name": "files", "type": { "text": "AudioFile[]" }, "default": "[]", "fieldName": "files" } ], "superclass": { "name": "ZincElement", "module": "/src/internal/zinc-element" }, "summary": "Short summary of the component's intended use.", "tagNameWithoutPrefix": "audio-select", "tagName": "zn-audio-select", "customElement": true, "jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/audio-select\n * @status experimental\n * @since 1.0\n *\n * @slot - The default slot.\n * @slot actions - The actions slot.\n * @slot footer - The footer slot.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --example - An example CSS custom property.\n */", "documentation": "https://zinc.style/components/audio-select", "status": "experimental", "since": "1.0" } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "ZnAudioSelect", "module": "components/audio-select/audio-select.js" } } ] }, { "kind": "javascript-module", "path": "components/background/background.js", "declarations": [ { "kind": "class", "description": "", "name": "ZnBackground", "cssProperties": [ { "description": "Fallback colour when the `color` attribute is not set.", "name": "--zn-background-color" }, { "description": "Position of the background image. Defaults to `center`.", "name": "--zn-background-image-position" }, { "description": "Direction of the overlay gradient. Defaults to `110deg`.", "name": "--zn-background-overlay-angle" }, { "description": "Colour of the floating icons. Defaults to `currentColor`.", "name": "--zn-background-floating-icon-color" } ], "cssParts": [ { "description": "The component's full-size background canvas.", "name": "base" }, { "description": "The decorative background image.", "name": "image" }, { "description": "The contrast overlay between the image and content.", "name": "overlay" }, { "description": "The non-interactive layer containing the floating icons.", "name": "floating-icons" }, { "description": "Each floating `zn-icon`.", "name": "floating-icon" }, { "description": "The wrapper around the default slot.", "name": "content" } ], "slots": [ { "description": "Content displayed above the background layers.", "name": "" } ], "members": [ { "kind": "field", "name": "dependencies", "type": { "text": "object" }, "static": true, "default": "{'zn-icon': ZnIcon}" }, { "kind": "field", "name": "resizeObserver", "privacy": "private", "readonly": true, "default": "new ResizeController(this, { callback: entries => { const width = entries[0]?.contentRect.width ?? this.offsetWidth; return Math.max(1, Math.min(width * 0.05, 150)); }, })" }, { "kind": "field", "name": "image", "type": { "text": "string" }, "default": "''", "description": "URL of the decorative background image.", "attribute": "image" }, { "kind": "field", "name": "color", "type": { "text": "string" }, "default": "''", "description": "CSS colour painted beneath the image.", "attribute": "color" }, { "kind": "field", "name": "imageStrength", "type": { "text": "BackgroundImageStrength" }, "default": "'full'", "description": "Visibility of the image: `soft` (30%), `medium` (62%) or `full` (100%).", "attribute": "image-strength", "reflects": true }, { "kind": "field", "name": "motion", "type": { "text": "BackgroundMotion" }, "default": "'none'", "description": "Subtle animation applied to the image. Motion stops when reduced motion is requested.", "attribute": "motion", "reflects": true }, { "kind": "field", "name": "overlay", "type": { "text": "BackgroundOverlay" }, "default": "'soft'", "description": "Strength of the contrast gradient above the image.", "attribute": "overlay", "reflects": true }, { "kind": "field", "name": "overlayTone", "type": { "text": "BackgroundOverlayTone" }, "default": "'light'", "description": "Whether the overlay uses a light or dark contrast treatment.", "attribute": "overlay-tone", "reflects": true }, { "kind": "field", "name": "floatingIcons", "type": { "text": "string" }, "default": "''", "description": "Comma-separated Zinc icon names placed as ambient decoration. At most eight are rendered.", "attribute": "floating-icons" }, { "kind": "field", "name": "paused", "type": { "text": "boolean" }, "default": "false", "description": "Pauses background motion without changing the selected motion treatment.", "attribute": "paused", "reflects": true } ], "attributes": [ { "name": "image", "type": { "text": "string" }, "default": "''", "description": "URL of the decorative background image.", "fieldName": "image" }, { "name": "color", "type": { "text": "string" }, "default": "''", "description": "CSS colour painted beneath the image.", "fieldName": "color" }, { "name": "image-strength", "type": { "text": "BackgroundImageStrength" }, "default": "'full'", "description": "Visibility of the image: `soft` (30%), `medium` (62%) or `full` (100%).", "fieldName": "imageStrength" }, { "name": "motion", "type": { "text": "BackgroundMotion" }, "default": "'none'", "description": "Subtle animation applied to the image. Motion stops when reduced motion is requested.", "fieldName": "motion" }, { "name": "overlay", "type": { "text": "BackgroundOverlay" }, "default": "'soft'", "description": "Strength of the contrast gradient above the image.", "fieldName": "overlay" }, { "name": "overlay-tone", "type": { "text": "BackgroundOverlayTone" }, "default": "'light'", "description": "Whether the overlay uses a light or dark contrast treatment.", "fieldName": "overlayTone" }, { "name": "floating-icons", "type": { "text": "string" }, "default": "''", "description": "Comma-separated Zinc icon names placed as ambient decoration. At most eight are rendered.", "fieldName": "floatingIcons" }, { "name": "paused", "type": { "text": "boolean" }, "default": "false", "description": "Pauses background motion without changing the selected motion treatment.", "fieldName": "paused" } ], "superclass": { "name": "ZincElement", "module": "/src/internal/zinc-element" }, "summary": "Composes a colour, decorative image, image strength, optional motion and contrast overlay behind slotted content.", "tagNameWithoutPrefix": "background", "tagName": "zn-background", "customElement": true, "jsDoc": "/**\n * @summary Composes a colour, decorative image, image strength, optional motion and contrast overlay behind slotted content.\n *\n * @documentation https://zinc.style/components/background\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-icon\n *\n * @slot - Content displayed above the background layers.\n *\n * @csspart base - The component's full-size background canvas.\n * @csspart image - The decorative background image.\n * @csspart overlay - The contrast overlay between the image and content.\n * @csspart floating-icons - The non-interactive layer containing the floating icons.\n * @csspart floating-icon - Each floating `zn-icon`.\n * @csspart content - The wrapper around the default slot.\n *\n * @cssproperty --zn-background-color - Fallback colour when the `color` attribute is not set.\n * @cssproperty --zn-background-image-position - Position of the background image. Defaults to `center`.\n * @cssproperty --zn-background-overlay-angle - Direction of the overlay gradient. Defaults to `110deg`.\n * @cssproperty --zn-background-floating-icon-color - Colour of the floating icons. Defaults to `currentColor`.\n */", "documentation": "https://zinc.style/components/background", "status": "experimental", "since": "1.0", "dependencies": [ "zn-icon" ] } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "ZnBackground", "module": "components/background/background.js" } } ] }, { "kind": "javascript-module", "path": "components/bulk-actions/bulk-actions.js", "declarations": [ { "kind": "class", "description": "", "name": "ZnBulkActions", "cssProperties": [ { "description": "An example CSS custom property.", "name": "--example" } ], "cssParts": [ { "description": "The component's base wrapper.", "name": "base" } ], "slots": [ { "description": "The default slot.", "name": "" }, { "description": "An example slot.", "name": "example" } ], "members": [ { "kind": "field", "name": "dependencies", "type": { "text": "object" }, "static": true, "default": "{ 'zn-button': ZnButton, 'zn-input': ZnInput, 'zn-option': ZnOption, 'zn-select': ZnSelect, }" }, { "kind": "field", "name": "container", "type": { "text": "HTMLDivElement" } }, { "kind": "field", "name": "addRule", "type": { "text": "ZnSelect" } }, { "kind": "field", "name": "input", "type": { "text": "HTMLInputElement" } }, { "kind": "field", "name": "name", "type": { "text": "string" }, "attribute": "name" }, { "kind": "field", "name": "value", "type": { "text": "PropertyKey" }, "attribute": "value" }, { "kind": "field", "name": "actions", "type": { "text": "BulkActionData" }, "default": "[]", "attribute": "actions" }, { "kind": "field", "name": "_selectedRules", "type": { "text": "Map" }, "privacy": "private", "default": "new Map()" }, { "kind": "field", "name": "_formController", "type": { "text": "FormControlController" }, "privacy": "private", "default": "new FormControlController(this, {})" }, { "kind": "field", "name": "validationMessage", "type": { "text": "string" }, "readonly": true }, { "kind": "field", "name": "validity", "type": { "text": "ValidityState" }, "readonly": true }, { "kind": "method", "name": "_handleChange", "privacy": "private" }, { "kind": "method", "name": "_addRule", "privacy": "private", "parameters": [ { "name": "event", "type": { "text": "Event | null" } }, { "name": "value", "default": "\"\"", "type": { "text": "string" } }, { "name": "pos", "optional": true, "type": { "text": "number" } } ] }, { "kind": "method", "name": "_createInput", "privacy": "private", "return": { "type": { "text": "ZnSelect | ZnInput | null" } }, "parameters": [ { "name": "uniqueId", "type": { "text": "string" } }, { "name": "filter", "type": { "text": "BulkActionItem" } } ] }, { "kind": "method", "name": "_updateValue", "privacy": "private", "parameters": [ { "name": "id", "type": { "text": "string" } }, { "name": "event", "type": { "text": "Event | { target: ZnSelect | ZnInput | HTMLDivElement }" } } ] }, { "kind": "method", "name": "_getRulePosition", "privacy": "private", "return": { "type": { "text": "number" } }, "parameters": [ { "name": "id", "type": { "text": "string" } } ] }, { "kind": "method", "name": "_changeRule", "privacy": "private", "parameters": [ { "name": "id", "type": { "text": "string" } }, { "name": "event", "type": { "text": "ZnChangeEvent" } } ] }, { "kind": "method", "name": "_removeRule", "privacy": "private", "parameters": [ { "name": "id", "type": { "text": "string" } }, { "name": "event", "type": { "text": "Event" } } ] }, { "kind": "method", "name": "checkValidity", "return": { "type": { "text": "boolean" } } }, { "kind": "method", "name": "getForm", "return": { "type": { "text": "HTMLFormElement | null" } } }, { "kind": "method", "name": "reportValidity", "return": { "type": { "text": "boolean" } } }, { "kind": "method", "name": "setCustomValidity", "return": { "type": { "text": "void" } }, "parameters": [ { "name": "message", "type": { "text": "string" } } ] } ], "events": [ { "description": "Emitted as an example.", "name": "zn-event-name" } ], "attributes": [ { "name": "name", "type": { "text": "string" }, "fieldName": "name" }, { "name": "value", "type": { "text": "PropertyKey" }, "fieldName": "value" }, { "name": "actions", "type": { "text": "BulkActionData" }, "default": "[]", "fieldName": "actions" } ], "superclass": { "name": "ZincElement", "module": "/src/internal/zinc-element" }, "summary": "Short summary of the component's intended use.", "tagNameWithoutPrefix": "bulk-actions", "tagName": "zn-bulk-actions", "customElement": true, "jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/bulk-actions\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-button\n * @dependency zn-input\n * @dependency zn-option\n * @dependency zn-select\n *\n * @event zn-event-name - Emitted as an example.\n *\n * @slot - The default slot.\n * @slot example - An example slot.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --example - An example CSS custom property.\n */", "documentation": "https://zinc.style/components/bulk-actions", "status": "experimental", "since": "1.0", "dependencies": [ "zn-button", "zn-input", "zn-option", "zn-select" ] } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "ZnBulkActions", "module": "components/bulk-actions/bulk-actions.js" } } ] }, { "kind": "javascript-module", "path": "components/button/button.js", "declarations": [ { "kind": "class", "description": "", "name": "ZnButton", "cssParts": [ { "description": "The component's base wrapper.", "name": "base" }, { "description": "The container that wraps the prefix.", "name": "prefix" }, { "description": "The button's label.", "name": "label" }, { "description": "The container that wraps the suffix.", "name": "suffix" }, { "description": "The button's caret icon, an `` element.", "name": "caret" }, { "description": "The spinner that shows when the button is in the loading state.", "name": "spinner" } ], "slots": [ { "description": "The button's label.", "name": "" }, { "description": "A presentational prefix icon or similar element.", "name": "prefix" }, { "description": "A presentational suffix icon or similar element.", "name": "suffix" }, { "description": "Slot for custom cancel button/content when autoClick is active.", "name": "cancel" } ], "members": [ { "kind": "field", "name": "dependencies", "type": { "text": "object" }, "static": true, "default": "{ 'zn-tooltip': ZnTooltip, 'zn-icon': ZnIcon }" }, { "kind": "field", "name": "formControlController", "privacy": "private", "readonly": true, "default": "new FormControlController(this)" }, { "kind": "field", "name": "hasSlotController", "privacy": "private", "readonly": true, "default": "new HasSlotController(this, '[default]')" }, { "kind": "field", "name": "_autoClickTimeout", "type": { "text": "number | undefined" }, "privacy": "private" }, { "kind": "field", "name": "_loadingState", "type": { "text": "object" }, "privacy": "private", "default": "{ countdown: null as number | null, interval: undefined as number | undefined, }" }, { "kind": "field", "name": "button", "type": { "text": "HTMLButtonElement" } }, { "kind": "field", "name": "countdownContainer", "type": { "text": "HTMLElement[]" } }, { "kind": "field", "name": "color", "type": { "text": "'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' |\n 'transparent' | 'star' | (string & Record)" }, "default": "'default'", "attribute": "color" }, { "kind": "field", "name": "hoverColor", "type": { "text": "string" }, "attribute": "hover-color" }, { "kind": "field", "name": "text", "type": { "text": "boolean" }, "default": "false", "attribute": "text" }, { "kind": "field", "name": "outline", "type": { "text": "boolean" }, "default": "false", "attribute": "outline" }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "default": "false", "attribute": "disabled" }, { "kind": "field", "name": "grow", "type": { "text": "boolean" }, "default": "false", "attribute": "grow" }, { "kind": "field", "name": "square", "type": { "text": "boolean" }, "default": "false", "attribute": "square" }, { "kind": "field", "name": "iconButton", "type": { "text": "boolean | 'small' | 'round'" }, "default": "false", "description": "Renders the button as an icon button (40x36). Pass `small` for the\n36x36 variant or `round` for a 36x36 circle: `icon-button`,\n`icon-button=\"small\"` or `icon-button=\"round\"`.", "attribute": "icon-button" }, { "kind": "field", "name": "plain", "type": { "text": "boolean" }, "default": "false", "description": "With `icon-button`, removes the white background and border while\nkeeping the button's size.", "attribute": "plain" }, { "kind": "field", "name": "noHover", "type": { "text": "boolean" }, "default": "false", "description": "Disables the hover background, for contexts where the tint doesn't fit.", "attribute": "no-hover" }, { "kind": "field", "name": "panelBackground", "type": { "text": "boolean" }, "default": "false", "attribute": "panel-bg" }, { "kind": "field", "name": "dropdownCloser", "type": { "text": "boolean" }, "default": "false", "attribute": "dropdown-closer" }, { "kind": "field", "name": "notification", "type": { "text": "number" }, "attribute": "notification" }, { "kind": "field", "name": "mutedNotifications", "type": { "text": "boolean" }, "default": "false", "attribute": "muted-notifications" }, { "kind": "field", "name": "verticalAlign", "type": { "text": "'start' | 'center' | 'end'" }, "attribute": "verticalAlign" }, { "kind": "field", "name": "content", "type": { "text": "string" }, "default": "''", "attribute": "content" }, { "kind": "field", "name": "icon", "type": { "text": "string" }, "default": "''", "attribute": "icon" }, { "kind": "field", "name": "gaid", "type": { "text": "string" }, "default": "''", "attribute": "gaid" }, { "kind": "field", "name": "iconPosition", "type": { "text": "'left' | 'right'" }, "default": "'left'", "attribute": "icon-position" }, { "kind": "field", "name": "iconSize", "type": { "text": "string" }, "attribute": "icon-size" }, { "kind": "field", "name": "iconColor", "type": { "text": "IconColor" }, "attribute": "icon-color" }, { "kind": "field", "name": "iconFill", "type": { "text": "IconColor" }, "attribute": "icon-fill" }, { "kind": "field", "name": "iconLibrary", "type": { "text": "IconLibrary" }, "attribute": "icon-library" }, { "kind": "field", "name": "type", "type": { "text": "'button' | 'submit' | 'reset'" }, "attribute": "type" }, { "kind": "field", "name": "name", "type": { "text": "string" }, "attribute": "name" }, { "kind": "field", "name": "value", "type": { "text": "string" }, "attribute": "value" }, { "kind": "field", "name": "form", "type": { "text": "string" }, "attribute": "form" }, { "kind": "field", "name": "formAction", "type": { "text": "string" }, "attribute": "formaction" }, { "kind": "field", "name": "formEnctype", "type": { "text": "'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain'" }, "attribute": "formenctype" }, { "kind": "field", "name": "formMethod", "type": { "text": "'post' | 'get'" }, "attribute": "formmethod" }, { "kind": "field", "name": "formNoValidate", "type": { "text": "boolean" }, "attribute": "formnovalidate" }, { "kind": "field", "name": "formTarget", "type": { "text": "'_self' | '_blank' | '_parent' | '_top' | string" }, "attribute": "formtarget" }, { "kind": "field", "name": "href", "type": { "text": "string" }, "attribute": "href" }, { "kind": "field", "name": "target", "type": { "text": "'_self' | '_blank' | '_parent' | '_top' | string" }, "attribute": "target" }, { "kind": "field", "name": "dataTarget", "type": { "text": "'modal' | 'slide' | string" }, "attribute": "data-target" }, { "kind": "field", "name": "rel", "type": { "text": "string" }, "default": "'noreferrer noopener'", "attribute": "rel" }, { "kind": "field", "name": "tooltip", "type": { "text": "string" }, "attribute": "tooltip" }, { "kind": "field", "name": "label", "type": { "text": "string" }, "description": "Accessible name for the button. Icon-only buttons fall back to `tooltip`.", "attribute": "label" }, { "kind": "field", "name": "autoClick", "type": { "text": "boolean" }, "default": "false", "attribute": "auto-click" }, { "kind": "field", "name": "autoClickDelay", "type": { "text": "number" }, "default": "2000", "attribute": "auto-click-delay" }, { "kind": "field", "name": "loadingText", "type": { "text": "string" }, "default": "'Loading...'", "attribute": "loading-text" }, { "kind": "field", "name": "loadingTextPosition", "type": { "text": "'left' | 'right' | 'center' | string" }, "default": "'center'", "attribute": "loading-text-position" }, { "kind": "field", "name": "loading", "type": { "text": "boolean" }, "default": "false", "attribute": "loading" }, { "kind": "field", "name": "validity", "readonly": true }, { "kind": "field", "name": "validationMessage", "readonly": true }, { "kind": "method", "name": "handleAutoClickChange", "parameters": [ { "name": "_old", "type": { "text": "boolean" } }, { "name": "value", "type": { "text": "boolean" } } ] }, { "kind": "method", "name": "checkValidity" }, { "kind": "method", "name": "getForm", "return": { "type": { "text": "HTMLFormElement | null" } } }, { "kind": "method", "name": "reportValidity" }, { "kind": "method", "name": "setCustomValidity", "parameters": [ { "name": "message", "type": { "text": "string" } } ] }, { "kind": "method", "name": "click" }, { "kind": "field", "name": "handleClick" }, { "kind": "method", "name": "_isLink", "privacy": "private" }, { "kind": "method", "name": "_isButton", "privacy": "private" }, { "kind": "method", "name": "getIconButtonColor", "privacy": "private", "parameters": [ { "name": "color", "type": { "text": "string | undefined" } } ] }, { "kind": "method", "name": "setupAutoClick" }, { "kind": "method", "name": "updateCountdownText" }, { "kind": "method", "name": "teardownAutoClick" }, { "kind": "method", "name": "_getLoadingContainer", "privacy": "private" } ], "events": [ { "description": "Emitted when the button loses focus.", "name": "zn-blur" }, { "description": "Emitted when the button gains focus.", "name": "zn-focus" }, { "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied.", "name": "zn-invalid" } ], "attributes": [ { "name": "color", "type": { "text": "'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' |\n 'transparent' | 'star' | (string & Record)" }, "default": "'default'", "fieldName": "color" }, { "name": "hover-color", "type": { "text": "string" }, "fieldName": "hoverColor" }, { "name": "text", "type": { "text": "boolean" }, "default": "false", "fieldName": "text" }, { "name": "outline", "type": { "text": "boolean" }, "default": "false", "fieldName": "outline" }, { "name": "disabled", "type": { "text": "boolean" }, "default": "false", "fieldName": "disabled" }, { "name": "grow", "type": { "text": "boolean" }, "default": "false", "fieldName": "grow" }, { "name": "square", "type": { "text": "boolean" }, "default": "false", "fieldName": "square" }, { "name": "icon-button", "type": { "text": "boolean | 'small' | 'round'" }, "default": "false", "description": "Renders the button as an icon button (40x36). Pass `small` for the\n36x36 variant or `round` for a 36x36 circle: `icon-button`,\n`icon-button=\"small\"` or `icon-button=\"round\"`.", "fieldName": "iconButton" }, { "name": "plain", "type": { "text": "boolean" }, "default": "false", "description": "With `icon-button`, removes the white background and border while\nkeeping the button's size.", "fieldName": "plain" }, { "name": "no-hover", "type": { "text": "boolean" }, "default": "false", "description": "Disables the hover background, for contexts where the tint doesn't fit.", "fieldName": "noHover" }, { "name": "panel-bg", "type": { "text": "boolean" }, "default": "false", "fieldName": "panelBackground" }, { "name": "dropdown-closer", "type": { "text": "boolean" }, "default": "false", "fieldName": "dropdownCloser" }, { "name": "notification", "type": { "text": "number" }, "fieldName": "notification" }, { "name": "muted-notifications", "type": { "text": "boolean" }, "default": "false", "fieldName": "mutedNotifications" }, { "name": "verticalAlign", "type": { "text": "'start' | 'center' | 'end'" }, "fieldName": "verticalAlign" }, { "name": "content", "type": { "text": "string" }, "default": "''", "fieldName": "content" }, { "name": "icon", "type": { "text": "string" }, "default": "''", "fieldName": "icon" }, { "name": "gaid", "type": { "text": "string" }, "default": "''", "fieldName": "gaid" }, { "name": "icon-position", "type": { "text": "'left' | 'right'" }, "default": "'left'", "fieldName": "iconPosition" }, { "name": "icon-size", "type": { "text": "string" }, "fieldName": "iconSize" }, { "name": "icon-color", "type": { "text": "IconColor" }, "fieldName": "iconColor" }, { "name": "icon-fill", "type": { "text": "IconColor" }, "fieldName": "iconFill" }, { "name": "icon-library", "type": { "text": "IconLibrary" }, "fieldName": "iconLibrary" }, { "name": "type", "type": { "text": "'button' | 'submit' | 'reset'" }, "fieldName": "type" }, { "name": "name", "type": { "text": "string" }, "fieldName": "name" }, { "name": "value", "type": { "text": "string" }, "fieldName": "value" }, { "name": "form", "type": { "text": "string" }, "fieldName": "form" }, { "name": "formaction", "type": { "text": "string" }, "fieldName": "formAction" }, { "name": "formenctype", "type": { "text": "'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain'" }, "fieldName": "formEnctype" }, { "name": "formmethod", "type": { "text": "'post' | 'get'" }, "fieldName": "formMethod" }, { "name": "formnovalidate", "type": { "text": "boolean" }, "fieldName": "formNoValidate" }, { "name": "formtarget", "type": { "text": "'_self' | '_blank' | '_parent' | '_top' | string" }, "fieldName": "formTarget" }, { "name": "href", "type": { "text": "string" }, "fieldName": "href" }, { "name": "target", "type": { "text": "'_self' | '_blank' | '_parent' | '_top' | string" }, "fieldName": "target" }, { "name": "data-target", "type": { "text": "'modal' | 'slide' | string" }, "fieldName": "dataTarget" }, { "name": "rel", "type": { "text": "string" }, "default": "'noreferrer noopener'", "fieldName": "rel" }, { "name": "tooltip", "type": { "text": "string" }, "fieldName": "tooltip" }, { "name": "label", "type": { "text": "string" }, "description": "Accessible name for the button. Icon-only buttons fall back to `tooltip`.", "fieldName": "label" }, { "name": "auto-click", "type": { "text": "boolean" }, "default": "false", "fieldName": "autoClick" }, { "name": "auto-click-delay", "type": { "text": "number" }, "default": "2000", "fieldName": "autoClickDelay" }, { "name": "loading-text", "type": { "text": "string" }, "default": "'Loading...'", "fieldName": "loadingText" }, { "name": "loading-text-position", "type": { "text": "'left' | 'right' | 'center' | string" }, "default": "'center'", "fieldName": "loadingTextPosition" }, { "name": "loading", "type": { "text": "boolean" }, "default": "false", "fieldName": "loading" } ], "superclass": { "name": "ZincElement", "module": "/src/internal/zinc-element" }, "summary": "Buttons represent actions that are available to the user.", "tagNameWithoutPrefix": "button", "tagName": "zn-button", "customElement": true, "jsDoc": "/**\n * @summary Buttons represent actions that are available to the user.\n * @documentation https://inc.style/components/button\n * @status stable\n * @since 2.0\n *\n * @dependency zn-icon\n * @dependency zn-tooltip\n *\n * @event zn-blur - Emitted when the button loses focus.\n * @event zn-focus - Emitted when the button gains focus.\n * @event zn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @slot - The button's label.\n * @slot prefix - A presentational prefix icon or similar element.\n * @slot suffix - A presentational suffix icon or similar element.\n * @slot cancel - Slot for custom cancel button/content when autoClick is active.\n *\n * @csspart base - The component's base wrapper.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart label - The button's label.\n * @csspart suffix - The container that wraps the suffix.\n * @csspart caret - The button's caret icon, an `` element.\n * @csspart spinner - The spinner that shows when the button is in the loading state.\n */", "documentation": "https://inc.style/components/button", "status": "stable", "since": "2.0", "dependencies": [ "zn-icon", "zn-tooltip" ] } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "ZnButton", "module": "components/button/button.js" } } ] }, { "kind": "javascript-module", "path": "components/button-group/button-group.js", "declarations": [ { "kind": "class", "description": "", "name": "ZnButtonGroup", "cssProperties": [ { "description": "Use flex-grow to fill available space.", "name": "--grow" }, { "description": "Justify content at the start of the flex space.", "name": "--start" } ], "cssParts": [ { "description": "The component's base wrapper.", "name": "base" } ], "slots": [ { "description": "The default slot.", "name": "" } ], "members": [ { "kind": "field", "name": "direction", "type": { "text": "'horizontal' | 'vertical'" }, "default": "'horizontal'", "attribute": "direction" }, { "kind": "field", "name": "grow", "type": { "text": "boolean" }, "default": "false", "attribute": "grow" }, { "kind": "field", "name": "wrap", "type": { "text": "boolean" }, "default": "false", "attribute": "wrap" }, { "kind": "field", "name": "start", "type": { "text": "boolean" }, "default": "false", "attribute": "start" }, { "kind": "field", "name": "gap", "type": { "text": "boolean" }, "default": "false", "attribute": "gap" }, { "kind": "field", "name": "defaultSlot", "type": { "text": "HTMLSlotElement" } }, { "kind": "method", "name": "handleSlotChange", "privacy": "private" } ], "events": [ { "description": "Emitted as an example.", "name": "zn-event-name" } ], "attributes": [ { "name": "direction", "type": { "text": "'horizontal' | 'vertical'" }, "default": "'horizontal'", "fieldName": "direction" }, { "name": "grow", "type": { "text": "boolean" }, "default": "false", "fieldName": "grow" }, { "name": "wrap", "type": { "text": "boolean" }, "default": "false", "fieldName": "wrap" }, { "name": "start", "type": { "text": "boolean" }, "default": "false", "fieldName": "start" }, { "name": "gap", "type": { "text": "boolean" }, "default": "false", "fieldName": "gap" } ], "superclass": { "name": "ZincElement", "module": "/src/internal/zinc-element" }, "summary": "Short summary of the component's intended use.", "tagNameWithoutPrefix": "button-group", "tagName": "zn-button-group", "customElement": true, "jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/button-group\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-example\n *\n * @event zn-event-name - Emitted as an example.\n *\n * @slot - The default slot.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --grow - Use flex-grow to fill available space.\n * @cssproperty --start - Justify content at the start of the flex space.\n */", "documentation": "https://zinc.style/components/button-group", "status": "experimental", "since": "1.0", "dependencies": [ "zn-example" ] } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "ZnButtonGroup", "module": "components/button-group/button-group.js" } } ] }, { "kind": "javascript-module", "path": "components/button-menu/button-menu.js", "declarations": [ { "kind": "class", "description": "", "name": "ZnButtonMenu", "slots": [ { "description": "The default slot.", "name": "" } ], "members": [ { "kind": "field", "name": "maxWidth", "type": { "text": "number" }, "privacy": "public", "attribute": "max-width" }, { "kind": "field", "name": "containerWidth", "type": { "text": "number" }, "privacy": "public", "attribute": "containerWidth" }, { "kind": "field", "name": "limit", "type": { "text": "number" }, "privacy": "public", "default": "-1", "attribute": "limit" }, { "kind": "field", "name": "maxLevel", "type": { "text": "number" }, "privacy": "public", "default": "2", "attribute": "max-level" }, { "kind": "field", "name": "iconSize", "type": { "text": "number" }, "default": "20", "attribute": "icon-size", "reflects": true }, { "kind": "field", "name": "noGap", "type": { "text": "boolean" }, "privacy": "public", "attribute": "no-gap" }, { "kind": "field", "name": "noPadding", "type": { "text": "boolean" }, "privacy": "public", "attribute": "no-padding" }, { "kind": "field", "name": "_buttons", "type": { "text": "CustomButtonWidths[]" }, "privacy": "private", "default": "[]" }, { "kind": "field", "name": "_originalButtons", "type": { "text": "CustomButtonWidths[]" }, "privacy": "private", "default": "[]" }, { "kind": "field", "name": "_resizeRafId", "type": { "text": "number" }, "privacy": "private", "default": "0" }, { "kind": "field", "name": "resizeObserver", "privacy": "private", "readonly": true, "default": "new ResizeController(this, { target: null, callback: () => { if (this._resizeRafId) return; this._resizeRafId = requestAnimationFrame(() => { this._resizeRafId = 0; this.containerWidth = this.offsetWidth; }); }, })" }, { "kind": "method", "name": "watchContainerMaxWidth" }, { "kind": "method", "name": "calculateVisibleButtons" }, { "kind": "method", "name": "calculateMenuButtons", "parameters": [ { "name": "totalButtons", "type": { "text": "number" } }, { "name": "visibleButtons", "type": { "text": "number" } }, { "name": "buttons", "type": { "text": "CustomButtonWidths[]" } } ] }, { "kind": "method", "name": "getButtonLabel", "privacy": "private", "parameters": [ { "name": "button", "type": { "text": "ZnButton" } } ] }, { "kind": "method", "name": "addButton", "privacy": "public", "parameters": [ { "name": "button", "type": { "text": "ZnButton" } } ] }, { "kind": "method", "name": "setDynamicButtons", "privacy": "public", "parameters": [ { "name": "btns", "type": { "text": "NodeListOf" } } ] }, { "kind": "method", "name": "removeButton", "privacy": "public", "parameters": [ { "name": "id", "type": { "text": "string" } } ] }, { "kind": "method", "name": "removeAllButtons", "privacy": "public" } ], "attributes": [ { "name": "max-width", "type": { "text": "number" }, "fieldName": "maxWidth" }, { "name": "containerWidth", "type": { "text": "number" }, "fieldName": "containerWidth" }, { "name": "limit", "type": { "text": "number" }, "default": "-1", "fieldName": "limit" }, { "name": "max-level", "type": { "text": "number" }, "default": "2", "fieldName": "maxLevel" }, { "name": "icon-size", "type": { "text": "number" }, "default": "20", "fieldName": "iconSize" }, { "name": "no-gap", "type": { "text": "boolean" }, "fieldName": "noGap" }, { "name": "no-padding", "type": { "text": "boolean" }, "fieldName": "noPadding" } ], "superclass": { "name": "ZincElement", "module": "/src/internal/zinc-element" }, "summary": "Automatically hides buttons in a menu when the screen is too small.", "tagNameWithoutPrefix": "button-menu", "tagName": "zn-button-menu", "customElement": true, "jsDoc": "/**\n * @summary Automatically hides buttons in a menu when the screen is too small.\n * @documentation https://zinc.style/components/button-menu\n * @status experimental\n * @since 1.0\n *\n * @slot - The default slot.\n *\n */", "documentation": "https://zinc.style/components/button-menu", "status": "experimental", "since": "1.0" } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "ZnButtonMenu", "module": "components/button-menu/button-menu.js" } } ] }, { "kind": "javascript-module", "path": "components/channel-tile/channel-tile.js", "declarations": [ { "kind": "class", "description": "", "name": "ZnChannelTile", "cssProperties": [ { "description": "Resolved accent color (set from the `color` property).", "name": "--channel-tile-color" } ], "cssParts": [ { "description": "The component's base wrapper.", "name": "base" }, { "description": "The progress indicator (incoming countdown overlay or active progress bar).", "name": "progress" } ], "slots": [ { "description": "Replaces the primary line. Falls back to the `title` attribute (or \"Available\" when unset in the available state).", "name": "title" }, { "description": "Replaces the secondary line. Falls back to the `subtitle` attribute.", "name": "subtitle" }, { "description": "Replaces the leading icon in the active state.", "name": "leading" }, { "description": "Action content for the available state (e.g. a form). Falls back to a default accept button.", "name": "action" }, { "description": "Trailing content (e.g. status badges) in the active state.", "name": "footer" } ], "members": [ { "kind": "field", "name": "available", "type": { "text": "boolean" }, "default": "false", "description": "Renders the empty/available face instead of the active face.", "attribute": "available", "reflects": true }, { "kind": "field", "name": "incoming", "type": { "text": "boolean" }, "default": "false", "description": "(Available only) the tile is reserving an incoming item awaiting acceptance.", "attribute": "incoming", "reflects": true }, { "kind": "field", "name": "variant", "type": { "text": "string" }, "default": "''", "description": "Free-form grouping/theming key (reflected so consumers can query/style by it).", "attribute": "variant", "reflects": true }, { "kind": "field", "name": "header", "type": { "text": "string" }, "default": "''", "description": "Top-bar text (e.g. brand).", "attribute": "header" }, { "kind": "field", "name": "icon", "type": { "text": "string" }, "default": "''", "description": "Leading icon (active state).", "attribute": "icon" }, { "kind": "field", "name": "color", "type": { "text": "ChannelTileColor" }, "default": "'default'", "description": "Accent color driving the leading icon and `--channel-tile-color`.", "attribute": "color", "reflects": true }, { "kind": "field", "name": "title", "type": { "text": "string" }, "default": "''", "description": "Primary line. Defaults to \"Available\" in the available state when unset.", "attribute": "title" }, { "kind": "field", "name": "subtitle", "type": { "text": "string" }, "default": "''", "description": "Secondary line.", "attribute": "subtitle" }, { "kind": "field", "name": "progress", "type": { "text": "number" }, "default": "0", "description": "(Active only) progress bar fill, 0–100.", "attribute": "progress" }, { "kind": "field", "name": "progressColor", "type": { "text": "string" }, "default": "''", "description": "(Active only) CSS color for the progress bar fill.", "attribute": "progress-color" }, { "kind": "field", "name": "itemId", "type": { "text": "string" }, "default": "''", "description": "Identifier carried in `zn-accept` / `zn-reject` event details.", "attribute": "item-id" }, { "kind": "field", "name": "acceptUri", "type": { "text": "string" }, "default": "''", "description": "(Available only) when set, accepting fetches this URI unless `zn-accept` is canceled.", "attribute": "accept-uri" }, { "kind": "field", "name": "reservedUntil", "type": { "text": "number" }, "default": "0", "description": "(Available/incoming) epoch (seconds or millis) at which the reservation window ends.", "attribute": "reserved-until" }, { "kind": "field", "name": "autoAcceptDelay", "type": { "text": "number" }, "default": "0", "description": "(Available/incoming) auto-accept window length in milliseconds.", "attribute": "auto-accept-delay" }, { "kind": "field", "name": "rejectable", "type": { "text": "boolean" }, "default": "false", "description": "(Available/incoming) whether a reject control is offered.", "attribute": "rejectable", "reflects": true }, { "kind": "field", "name": "acceptIcon", "type": { "text": "string" }, "default": "'plus@lu'", "description": "Icon for the built-in accept button.", "attribute": "accept-icon" }, { "kind": "field", "name": "acceptGaid", "type": { "text": "string" }, "default": "''", "description": "Optional analytics id forwarded to the built-in accept button.", "attribute": "accept-gaid" }, { "kind": "field", "name": "rejectIcon", "type": { "text": "string" }, "default": "'close'", "description": "Icon for the reject control.", "attribute": "reject-icon" }, { "kind": "field", "name": "rejectLabel", "type": { "text": "string" }, "default": "'Reject'", "description": "Accessible label for the reject control.", "attribute": "reject-label" }, { "kind": "field", "name": "_tickInterval", "type": { "text": "number | undefined" }, "privacy": "private" }, { "kind": "field", "name": "_autoAcceptFired", "type": { "text": "string" }, "privacy": "private", "default": "''" }, { "kind": "method", "name": "_isCountingDown", "privacy": "private", "return": { "type": { "text": "boolean" } } }, { "kind": "method", "name": "_startTicker", "privacy": "private" }, { "kind": "method", "name": "_stopTicker", "privacy": "private" }, { "kind": "method", "name": "_maybeAutoAccept", "privacy": "private" }, { "kind": "method", "name": "_accept", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "_reservedUntilMs", "privacy": "private", "return": { "type": { "text": "number" } } }, { "kind": "method", "name": "_countdownPercent", "privacy": "private", "return": { "type": { "text": "number" } } }, { "kind": "method", "name": "_remainingSeconds", "privacy": "private", "return": { "type": { "text": "number | null" } } }, { "kind": "field", "name": "_handleReject", "privacy": "private" }, { "kind": "field", "name": "_handleClick", "privacy": "private" }, { "kind": "method", "name": "_renderLeading", "privacy": "private" }, { "kind": "method", "name": "_renderAvailableAction", "privacy": "private" } ], "events": [ { "description": "Emitted when an available tile is accepted (click or auto-accept). Cancelable — call `preventDefault()` to suppress the built-in `accept-uri` fetch.", "name": "zn-accept" }, { "description": "Emitted when the reject control is pressed.", "name": "zn-reject" } ], "attributes": [ { "name": "available", "type": { "text": "boolean" }, "default": "false", "description": "Renders the empty/available face instead of the active face.", "fieldName": "available" }, { "name": "incoming", "type": { "text": "boolean" }, "default": "false", "description": "(Available only) the tile is reserving an incoming item awaiting acceptance.", "fieldName": "incoming" }, { "name": "variant", "type": { "text": "string" }, "default": "''", "description": "Free-form grouping/theming key (reflected so consumers can query/style by it).", "fieldName": "variant" }, { "name": "header", "type": { "text": "string" }, "default": "''", "description": "Top-bar text (e.g. brand).", "fieldName": "header" }, { "name": "icon", "type": { "text": "string" }, "default": "''", "description": "Leading icon (active state).", "fieldName": "icon" }, { "name": "color", "type": { "text": "ChannelTileColor" }, "default": "'default'", "description": "Accent color driving the leading icon and `--channel-tile-color`.", "fieldName": "color" }, { "name": "title", "type": { "text": "string" }, "default": "''", "description": "Primary line. Defaults to \"Available\" in the available state when unset.", "fieldName": "title" }, { "name": "subtitle", "type": { "text": "string" }, "default": "''", "description": "Secondary line.", "fieldName": "subtitle" }, { "name": "progress", "type": { "text": "number" }, "default": "0", "description": "(Active only) progress bar fill, 0–100.", "fieldName": "progress" }, { "name": "progress-color", "type": { "text": "string" }, "default": "''", "description": "(Active only) CSS color for the progress bar fill.", "fieldName": "progressColor" }, { "name": "item-id", "type": { "text": "string" }, "default": "''", "description": "Identifier carried in `zn-accept` / `zn-reject` event details.", "fieldName": "itemId" }, { "name": "accept-uri", "type": { "text": "string" }, "default": "''", "description": "(Available only) when set, accepting fetches this URI unless `zn-accept` is canceled.", "fieldName": "acceptUri" }, { "name": "reserved-until", "type": { "text": "number" }, "default": "0", "description": "(Available/incoming) epoch (seconds or millis) at which the reservation window ends.", "fieldName": "reservedUntil" }, { "name": "auto-accept-delay", "type": { "text": "number" }, "default": "0", "description": "(Available/incoming) auto-accept window length in milliseconds.", "fieldName": "autoAcceptDelay" }, { "name": "rejectable", "type": { "text": "boolean" }, "default": "false", "description": "(Available/incoming) whether a reject control is offered.", "fieldName": "rejectable" }, { "name": "accept-icon", "type": { "text": "string" }, "default": "'plus@lu'", "description": "Icon for the built-in accept button.", "fieldName": "acceptIcon" }, { "name": "accept-gaid", "type": { "text": "string" }, "default": "''", "description": "Optional analytics id forwarded to the built-in accept button.", "fieldName": "acceptGaid" }, { "name": "reject-icon", "type": { "text": "string" }, "default": "'close'", "description": "Icon for the reject control.", "fieldName": "rejectIcon" }, { "name": "reject-label", "type": { "text": "string" }, "default": "'Reject'", "description": "Accessible label for the reject control.", "fieldName": "rejectLabel" } ], "superclass": { "name": "ZincElement", "module": "/src/internal/zinc-element" }, "summary": "A channel/queue slot tile with two faces: an active (occupied) state\nshowing an in-progress item, and an available (empty) state advertising\ncapacity — optionally reserving an incoming item with an auto-accept countdown.", "tagNameWithoutPrefix": "channel-tile", "tagName": "zn-channel-tile", "customElement": true, "jsDoc": "/**\n * @summary A channel/queue slot tile with two faces: an active (occupied) state\n * showing an in-progress item, and an available (empty) state advertising\n * capacity — optionally reserving an incoming item with an auto-accept countdown.\n * @documentation https://zinc.style/components/channel-tile\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-button\n * @dependency zn-icon\n *\n * @event zn-accept - Emitted when an available tile is accepted (click or auto-accept).\n * Cancelable — call `preventDefault()` to suppress the built-in `accept-uri` fetch.\n * @event zn-reject - Emitted when the reject control is pressed.\n *\n * @slot title - Replaces the primary line. Falls back to the `title` attribute (or \"Available\" when unset in the available state).\n * @slot subtitle - Replaces the secondary line. Falls back to the `subtitle` attribute.\n * @slot leading - Replaces the leading icon in the active state.\n * @slot action - Action content for the available state (e.g. a form). Falls back to a default accept button.\n * @slot footer - Trailing content (e.g. status badges) in the active state.\n *\n * @csspart base - The component's base wrapper.\n * @csspart progress - The progress indicator (incoming countdown overlay or active progress bar).\n *\n * @cssproperty --channel-tile-color - Resolved accent color (set from the `color` property).\n */", "documentation": "https://zinc.style/components/channel-tile", "status": "experimental", "since": "1.0", "dependencies": [ "zn-button", "zn-icon" ] } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "ZnChannelTile", "module": "components/channel-tile/channel-tile.js" } } ] }, { "kind": "javascript-module", "path": "components/chart/chart.js", "declarations": [ { "kind": "class", "description": "", "name": "ZnChart", "cssParts": [ { "description": "The component's base wrapper.", "name": "base" } ], "members": [ { "kind": "field", "name": "type", "type": { "text": "ChartType" }, "default": "'bar'", "attribute": "type" }, { "kind": "field", "name": "data", "type": { "text": "SeriesItem[]" }, "default": "[]", "attribute": "data" }, { "kind": "field", "name": "categories", "type": { "text": "string[]" }, "default": "[]", "attribute": "categories" }, { "kind": "field", "name": "yCategories", "type": { "text": "string[]" }, "default": "[]", "attribute": "y-categories" }, { "kind": "field", "name": "indicators", "type": { "text": "RadarIndicator[]" }, "default": "[]", "attribute": "indicators" }, { "kind": "field", "name": "xAxis", "type": { "text": "'datetime' | 'category' | 'numeric'" }, "attribute": "xaxis" }, { "kind": "field", "name": "datapointSize", "type": { "text": "number" }, "default": "1", "attribute": "d-size" }, { "kind": "field", "name": "stacked", "type": { "text": "boolean" }, "default": "false", "attribute": "stacked" }, { "kind": "field", "name": "live", "type": { "text": "boolean" }, "default": "false", "attribute": "live" }, { "kind": "field", "name": "dataUrl", "type": { "text": "string" }, "default": "''", "attribute": "data-url" }, { "kind": "field", "name": "liveInterval", "type": { "text": "number" }, "default": "1000", "attribute": "live-interval" }, { "kind": "field", "name": "height", "type": { "text": "number" }, "default": "300", "attribute": "height", "reflects": true }, { "kind": "field", "name": "enableAnimations", "type": { "text": "boolean | number" }, "default": "false", "attribute": "enable-animations" }, { "kind": "field", "name": "yAxisAppend", "type": { "text": "string" }, "attribute": "y-axis-append" }, { "kind": "field", "name": "colors", "type": { "text": "string[] | undefined" }, "attribute": "colors" }, { "kind": "field", "name": "syncGroup", "type": { "text": "string | undefined" }, "attribute": "sync-group" }, { "kind": "field", "name": "smooth", "type": { "text": "boolean" }, "default": "false", "attribute": "smooth" }, { "kind": "field", "name": "innerRadius", "type": { "text": "number | string | undefined" }, "attribute": "inner-radius" }, { "kind": "field", "name": "outerRadius", "type": { "text": "number | string | undefined" }, "attribute": "outer-radius" }, { "kind": "field", "name": "showLabels", "type": { "text": "boolean | undefined" }, "attribute": "show-labels" }, { "kind": "field", "name": "minValue", "type": { "text": "number | undefined" }, "attribute": "min-value" }, { "kind": "field", "name": "maxValue", "type": { "text": "number | undefined" }, "attribute": "max-value" }, { "kind": "field", "name": "scale", "type": { "text": "boolean | number" }, "default": "false", "attribute": "scale" }, { "kind": "field", "name": "chart", "type": { "text": "ECharts | undefined" }, "privacy": "private" }, { "kind": "field", "name": "echarts", "type": { "text": "EChartsModule | undefined" }, "privacy": "private" }, { "kind": "field", "name": "initPromise", "type": { "text": "Promise | undefined" }, "privacy": "private" }, { "kind": "field", "name": "liveTimer", "type": { "text": "number | undefined" }, "privacy": "private" }, { "kind": "field", "name": "resizeObserver", "privacy": "private", "readonly": true, "default": "new ResizeController(this, { target: null, skipInitial: true, callback: () => this.chart?.resize(), })" }, { "kind": "method", "name": "getUpdateComplete", "privacy": "protected", "return": { "type": { "text": "Promise" } } }, { "kind": "method", "name": "getTheme", "privacy": "private", "return": { "type": { "text": "'light' | 'dark'" } } }, { "kind": "method", "name": "getTextColor", "privacy": "private", "return": { "type": { "text": "string | undefined" } } }, { "kind": "method", "name": "getBorderColor", "privacy": "private", "return": { "type": { "text": "string | undefined" } } }, { "kind": "method", "name": "buildOption", "privacy": "private" }, { "kind": "method", "name": "initChart", "privacy": "private" }, { "kind": "method", "name": "startLive", "privacy": "private" }, { "kind": "method", "name": "reinit", "privacy": "private" } ], "attributes": [ { "name": "type", "type": { "text": "ChartType" }, "default": "'bar'", "fieldName": "type" }, { "name": "data", "type": { "text": "SeriesItem[]" }, "default": "[]", "fieldName": "data" }, { "name": "categories", "type": { "text": "string[]" }, "default": "[]", "fieldName": "categories" }, { "name": "y-categories", "type": { "text": "string[]" }, "default": "[]", "fieldName": "yCategories" }, { "name": "indicators", "type": { "text": "RadarIndicator[]" }, "default": "[]", "fieldName": "indicators" }, { "name": "xaxis", "type": { "text": "'datetime' | 'category' | 'numeric'" }, "fieldName": "xAxis" }, { "name": "d-size", "type": { "text": "number" }, "default": "1", "fieldName": "datapointSize" }, { "name": "stacked", "type": { "text": "boolean" }, "default": "false", "fieldName": "stacked" }, { "name": "live", "type": { "text": "boolean" }, "default": "false", "fieldName": "live" }, { "name": "data-url", "type": { "text": "string" }, "default": "''", "fieldName": "dataUrl" }, { "name": "live-interval", "type": { "text": "number" }, "default": "1000", "fieldName": "liveInterval" }, { "name": "height", "type": { "text": "number" }, "default": "300", "fieldName": "height" }, { "name": "enable-animations", "type": { "text": "boolean | number" }, "default": "false", "fieldName": "enableAnimations" }, { "name": "y-axis-append", "type": { "text": "string" }, "fieldName": "yAxisAppend" }, { "name": "colors", "type": { "text": "string[] | undefined" }, "fieldName": "colors" }, { "name": "sync-group", "type": { "text": "string | undefined" }, "fieldName": "syncGroup" }, { "name": "smooth", "type": { "text": "boolean" }, "default": "false", "fieldName": "smooth" }, { "name": "inner-radius", "type": { "text": "number | string | undefined" }, "fieldName": "innerRadius" }, { "name": "outer-radius", "type": { "text": "number | string | undefined" }, "fieldName": "outerRadius" }, { "name": "show-labels", "type": { "text": "boolean | undefined" }, "fieldName": "showLabels" }, { "name": "min-value", "type": { "text": "number | undefined" }, "fieldName": "minValue" }, { "name": "max-value", "type": { "text": "number | undefined" }, "fieldName": "maxValue" }, { "name": "scale", "type": { "text": "boolean | number" }, "default": "false", "fieldName": "scale" } ], "superclass": { "name": "ZincElement", "module": "/src/internal/zinc-element" }, "summary": "Chart component powered by Apache ECharts.", "tagNameWithoutPrefix": "chart", "tagName": "zn-chart", "customElement": true, "jsDoc": "/**\n * @summary Chart component powered by Apache ECharts.\n * @documentation https://zinc.style/components/data-chart\n * @status experimental\n * @since 1.0\n *\n * @csspart base - The component's base wrapper.\n */", "documentation": "https://zinc.style/components/data-chart", "status": "experimental", "since": "1.0" } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "ZnChart", "module": "components/chart/chart.js" } } ] }, { "kind": "javascript-module", "path": "components/chat-message/chat-message.js", "declarations": [ { "kind": "class", "description": "", "name": "ZnChatMessage", "cssProperties": [ { "description": "The bubble's background color.", "name": "--message-background" } ], "cssParts": [ { "description": "The component's base wrapper.", "name": "base" }, { "description": "The avatar column.", "name": "avatar" }, { "description": "The header and bubble column.", "name": "body" }, { "description": "The sender/time/badge row.", "name": "header" }, { "description": "The message bubble.", "name": "bubble" }, { "description": "The message content within the bubble.", "name": "content" }, { "description": "The attachments row beneath the message content.", "name": "attachments" }, { "description": "The card rendered for system action types.", "name": "system-card" } ], "slots": [ { "description": "The message content. Ignored when the `message` attribute is set.", "name": "" }, { "description": "Rendered in the header after the sender and time (e.g. an INTERNAL NOTE chip).", "name": "badge" }, { "description": "Attachments displayed beneath the message content. Use `zn-chat-message-attachment`, which auto-assigns itself to this slot.", "name": "attachments" }, { "description": "Action rendered at the end of the bubble (e.g. a remove icon button).", "name": "edit-dialog-trigger" }, { "description": "Pass-through for an associated dialog element.", "name": "edit-dialog" } ], "members": [ { "kind": "field", "name": "dependencies", "type": { "text": "object" }, "static": true, "default": "{ 'zn-icon': ZnIcon }" }, { "kind": "field", "name": "SYSTEM_ACTION_TYPES", "type": { "text": "readonly string[]" }, "static": true, "readonly": true, "default": "[ 'connected.agent', 'attachment.added', 'transfer', 'ended', 'customer.ended', 'customer.connected', 'customer.disconnected', ]" }, { "kind": "field", "name": "DISPLAYED_ACTION_TYPES", "type": { "text": "readonly string[]" }, "privacy": "private", "static": true, "readonly": true, "default": "[ '', 'connected.agent', 'attachment.added', 'multi.answer', 'transfer', 'ended', 'error', 'customer.ended', 'message-sending', 'customer.connected', 'customer.disconnected', 'internal', ]" }, { "kind": "field", "name": "sender", "type": { "text": "string" }, "default": "''", "description": "The sender's name, also used for the avatar.", "attribute": "sender" }, { "kind": "field", "name": "message", "type": { "text": "string" }, "default": "''", "description": "The message body as an HTML string. When set, it is sanitized (scripts and event\nhandlers stripped), newlines become line breaks and bare URLs become links. When\nomitted the default slot is rendered instead.", "attribute": "message" }, { "kind": "field", "name": "time", "type": { "text": "string" }, "default": "''", "description": "Unix timestamp (seconds) of the message, shown as HH:MM (with date if not today).", "attribute": "time" }, { "kind": "field", "name": "avatar", "type": { "text": "string" }, "default": "''", "description": "Overrides the avatar source. Defaults to `sender`.", "attribute": "avatar" }, { "kind": "field", "name": "actionType", "type": { "text": "ChatMessageActionType" }, "default": "''", "description": "The kind of message. Drives system-card rendering, the sending state and badges.", "attribute": "action-type", "reflects": true }, { "kind": "field", "name": "customerInitiated", "type": { "text": "boolean" }, "default": "false", "description": "Marks the message as initiated by the customer (affects styling and grouping).", "attribute": "customer-initiated", "reflects": true }, { "kind": "field", "name": "agentInitiated", "type": { "text": "boolean" }, "default": "false", "description": "Marks the message as initiated by an agent (affects styling and grouping).", "attribute": "agent-initiated", "reflects": true }, { "kind": "field", "name": "hideSender", "type": { "text": "boolean" }, "default": "false", "description": "Hides the sender's name in the message header.", "attribute": "hide-sender", "reflects": true }, { "kind": "field", "name": "hasAttachments", "type": { "text": "boolean" }, "privacy": "private", "default": "false", "description": "Whether any element is assigned to the `attachments` slot — drives the attachments row visibility." }, { "kind": "method", "name": "handleAttachmentsSlotChange", "privacy": "private" }, { "kind": "method", "name": "syncHasAttachments", "privacy": "private" }, { "kind": "method", "name": "isSystemMessage", "privacy": "private" }, { "kind": "method", "name": "renderSystemCard", "privacy": "private" }, { "kind": "method", "name": "systemLabel", "privacy": "private" }, { "kind": "method", "name": "renderHeader", "privacy": "private" }, { "kind": "method", "name": "renderContent", "privacy": "private" }, { "kind": "method", "name": "getTime", "privacy": "private", "description": "HH:MM only — used on the system card." }, { "kind": "method", "name": "getSentTime", "privacy": "private", "description": "HH:MM, prefixed with the date when the message is not from today." } ], "attributes": [ { "name": "sender", "type": { "text": "string" }, "default": "''", "description": "The sender's name, also used for the avatar.", "fieldName": "sender" }, { "name": "message", "type": { "text": "string" }, "default": "''", "description": "The message body as an HTML string. When set, it is sanitized (scripts and event\nhandlers stripped), newlines become line breaks and bare URLs become links. When\nomitted the default slot is rendered instead.", "fieldName": "message" }, { "name": "time", "type": { "text": "string" }, "default": "''", "description": "Unix timestamp (seconds) of the message, shown as HH:MM (with date if not today).", "fieldName": "time" }, { "name": "avatar", "type": { "text": "string" }, "default": "''", "description": "Overrides the avatar source. Defaults to `sender`.", "fieldName": "avatar" }, { "name": "action-type", "type": { "text": "ChatMessageActionType" }, "default": "''", "description": "The kind of message. Drives system-card rendering, the sending state and badges.", "fieldName": "actionType" }, { "name": "customer-initiated", "type": { "text": "boolean" }, "default": "false", "description": "Marks the message as initiated by the customer (affects styling and grouping).", "fieldName": "customerInitiated" }, { "name": "agent-initiated", "type": { "text": "boolean" }, "default": "false", "description": "Marks the message as initiated by an agent (affects styling and grouping).", "fieldName": "agentInitiated" }, { "name": "hide-sender", "type": { "text": "boolean" }, "default": "false", "description": "Hides the sender's name in the message header.", "fieldName": "hideSender" } ], "superclass": { "name": "ZincElement", "module": "/src/internal/zinc-element" }, "summary": "A single message in a chat-style conversation: avatar, sender,\ntime, optional badge, and a message bubble with optional actions. Also renders\nsystem events (connections, transfers, etc.) as a centred card.", "tagNameWithoutPrefix": "chat-message", "tagName": "zn-chat-message", "customElement": true, "jsDoc": "/**\n * @summary A single message in a chat-style conversation: avatar, sender,\n * time, optional badge, and a message bubble with optional actions. Also renders\n * system events (connections, transfers, etc.) as a centred card.\n * @documentation https://zinc.style/components/chat-message\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-icon\n *\n * @slot - The message content. Ignored when the `message` attribute is set.\n * @slot badge - Rendered in the header after the sender and time (e.g. an INTERNAL NOTE chip).\n * @slot attachments - Attachments displayed beneath the message content. Use `zn-chat-message-attachment`,\n * which auto-assigns itself to this slot.\n * @slot edit-dialog-trigger - Action rendered at the end of the bubble (e.g. a remove icon button).\n * @slot edit-dialog - Pass-through for an associated dialog element.\n *\n * @csspart base - The component's base wrapper.\n * @csspart avatar - The avatar column.\n * @csspart body - The header and bubble column.\n * @csspart header - The sender/time/badge row.\n * @csspart bubble - The message bubble.\n * @csspart content - The message content within the bubble.\n * @csspart attachments - The attachments row beneath the message content.\n * @csspart system-card - The card rendered for system action types.\n *\n * @cssproperty --message-background - The bubble's background color.\n */", "documentation": "https://zinc.style/components/chat-message", "status": "experimental", "since": "1.0", "dependencies": [ "zn-icon" ] } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "ZnChatMessage", "module": "components/chat-message/chat-message.js" } } ] }, { "kind": "javascript-module", "path": "components/chat-message-attachment/chat-message-attachment.js", "declarations": [ { "kind": "class", "description": "", "name": "ZnChatMessageAttachment", "cssParts": [ { "description": "The attachment link.", "name": "base" }, { "description": "The leading icon.", "name": "icon" }, { "description": "The attachment label.", "name": "label" } ], "slots": [ { "description": "The attachment label. Falls back to the `name` attribute when empty.", "name": "" } ], "members": [ { "kind": "field", "name": "dependencies", "type": { "text": "object" }, "static": true, "default": "{ 'zn-icon': ZnIcon }" }, { "kind": "field", "name": "href", "type": { "text": "string" }, "default": "''", "description": "The URL the attachment links to.", "attribute": "href" }, { "kind": "field", "name": "name", "type": { "text": "string" }, "default": "''", "description": "The attachment label (e.g. the file name). Used when the default slot is empty.", "attribute": "name" }, { "kind": "field", "name": "icon", "type": { "text": "string" }, "default": "'paperclip@lu'", "description": "The leading icon name.", "attribute": "icon" }, { "kind": "field", "name": "target", "type": { "text": "string" }, "default": "'_blank'", "description": "Where to open the link. Defaults to a new tab. Reflected so the console's\npagelet link interception (`[href]:not([target])`) skips the host and the\nbrowser handles the click natively (download / new tab) instead of\nloading the file URL as a pagelet.", "attribute": "target", "reflects": true }, { "kind": "field", "name": "download", "type": { "text": "boolean" }, "default": "false", "description": "Prompt a download rather than navigating to the link.", "attribute": "download" } ], "attributes": [ { "name": "href", "type": { "text": "string" }, "default": "''", "description": "The URL the attachment links to.", "fieldName": "href" }, { "name": "name", "type": { "text": "string" }, "default": "''", "description": "The attachment label (e.g. the file name). Used when the default slot is empty.", "fieldName": "name" }, { "name": "icon", "type": { "text": "string" }, "default": "'paperclip@lu'", "description": "The leading icon name.", "fieldName": "icon" }, { "name": "target", "type": { "text": "string" }, "default": "'_blank'", "description": "Where to open the link. Defaults to a new tab. Reflected so the console's\npagelet link interception (`[href]:not([target])`) skips the host and the\nbrowser handles the click natively (download / new tab) instead of\nloading the file URL as a pagelet.", "fieldName": "target" }, { "name": "download", "type": { "text": "boolean" }, "default": "false", "description": "Prompt a download rather than navigating to the link.", "fieldName": "download" } ], "superclass": { "name": "ZincElement", "module": "/src/internal/zinc-element" }, "summary": "A single file or link attachment for a `zn-chat-message` or `zn-content-block`.\nRenders an icon and a label as a link, styled to match the message's attachments row. It is\nintended to be used only inside a `zn-chat-message` or `zn-content-block` and is automatically\nplaced in that component's `attachments` slot.", "tagNameWithoutPrefix": "chat-message-attachment", "tagName": "zn-chat-message-attachment", "customElement": true, "jsDoc": "/**\n * @summary A single file or link attachment for a `zn-chat-message` or `zn-content-block`.\n * Renders an icon and a label as a link, styled to match the message's attachments row. It is\n * intended to be used only inside a `zn-chat-message` or `zn-content-block` and is automatically\n * placed in that component's `attachments` slot.\n * @documentation https://zinc.style/components/chat-message-attachment\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-icon\n *\n * @slot - The attachment label. Falls back to the `name` attribute when empty.\n *\n * @csspart base - The attachment link.\n * @csspart icon - The leading icon.\n * @csspart label - The attachment label.\n */", "documentation": "https://zinc.style/components/chat-message-attachment", "status": "experimental", "since": "1.0", "dependencies": [ "zn-icon" ] } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "ZnChatMessageAttachment", "module": "components/chat-message-attachment/chat-message-attachment.js" } } ] }, { "kind": "javascript-module", "path": "components/checkbox/checkbox.js", "declarations": [ { "kind": "class", "description": "", "name": "ZnCheckbox", "cssProperties": [ { "description": "Width of the built-in card image.", "name": "--zn-selection-card-image-width" }, { "description": "Height of the built-in card image.", "name": "--zn-selection-card-image-height" }, { "description": "Minimum height of a contained checkbox with an image.", "name": "--zn-selection-card-min-height" }, { "description": "Width the card text keeps before it wraps below the image.", "name": "--zn-selection-card-content-min-width" }, { "description": "Font size of a selection card title.", "name": "--zn-selection-card-title-font-size" }, { "description": "Equal inset around the contents of a selection card.", "name": "--zn-selection-card-padding" }, { "description": "Space between the image, title, and indicator gutter.", "name": "--zn-selection-card-gap" }, { "description": "Distance between a positioned control and the card edge.", "name": "--zn-selection-card-control-offset" }, { "description": "Corner radius of a contained container.", "name": "--zn-selection-card-border-radius" } ], "cssParts": [ { "description": "The component's base wrapper.", "name": "base" }, { "description": "The square container that wraps the checkbox's checked state.", "name": "control" }, { "description": "Matches the control part when the checkbox is checked.", "name": "control--checked" }, { "description": "Matches the control part when the checkbox is indeterminate.", "name": "control--indeterminate" }, { "description": "The checked icon, an `` element.", "name": "checked-icon" }, { "description": "The unchecked icon, an `` element.", "name": "unchecked-icon" }, { "description": "The indeterminate icon, an `` element.", "name": "indeterminate-icon" }, { "description": "The wrapper around the built-in image or image slot.", "name": "image-container" }, { "description": "The built-in image.", "name": "image" }, { "description": "The title inside a selection card.", "name": "card-title" }, { "description": "The container that wraps the checkbox's label.", "name": "label" }, { "description": "The container that wraps the checkbox's description.", "name": "description" }, { "description": "The container that wraps optional content that appears when a checkbox is checked.", "name": "selected-content" } ], "slots": [ { "description": "The checkbox's label.", "name": "" }, { "description": "Replaces the built-in image used by contained checkboxes.", "name": "image" }, { "description": "A description of the checkbox's label. Serves as help text for a checkbox item. Alternatively, you can use the `description` attribute.", "name": "description" }, { "description": "Use to nest rich content (like an input) inside a selected checkbox item. Use only with the contained style.", "name": "selected-content" } ], "members": [ { "kind": "field", "name": "dependencies", "type": { "text": "object" }, "static": true, "default": "{'zn-icon': ZnIcon}" }, { "kind": "field", "name": "formControlController", "privacy": "private", "readonly": true, "default": "new FormControlController(this, { value: (control: ZnCheckbox) => (control.checked ? control.value || 'on' : control.uncheckedValue || undefined), defaultValue: (control: ZnCheckbox) => control.defaultChecked, setValue: (control: ZnCheckbox, checked: boolean) => (control.checked = checked) })" }, { "kind": "field", "name": "hasSlotController", "privacy": "private", "readonly": true, "default": "new HasSlotController(this, '[default]', 'description', 'image')" }, { "kind": "field", "name": "input", "type": { "text": "HTMLInputElement" } }, { "kind": "field", "name": "hasFocus", "type": { "text": "boolean" }, "privacy": "private", "default": "false" }, { "kind": "field", "name": "title", "type": { "text": "string" }, "default": "''", "attribute": "title" }, { "kind": "field", "name": "name", "type": { "text": "string" }, "default": "''", "description": "The name of the checkbox, submitted as a name/value pair with form data.", "attribute": "name" }, { "kind": "field", "name": "value", "type": { "text": "string" }, "description": "The current value of the checkbox, submitted as a name/value pair with form data.", "attribute": "value" }, { "kind": "field", "name": "cardTitle", "type": { "text": "string" }, "default": "''", "description": "Title rendered inside the card. The default slot takes precedence when provided.", "attribute": "card-title" }, { "kind": "field", "name": "uncheckedValue", "type": { "text": "string" }, "description": "The unchecked value of the checkbox, submitted as a name/value pair with form data.", "attribute": "unchecked-value", "reflects": true }, { "kind": "field", "name": "size", "type": { "text": "'small' | 'medium' | 'large'" }, "default": "'medium'", "description": "The checkbox's size.", "attribute": "size", "reflects": true }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Disables the checkbox.", "attribute": "disabled", "reflects": true }, { "kind": "field", "name": "checked", "type": { "text": "boolean" }, "default": "false", "description": "Draws the checkbox in a checked state.", "attribute": "checked", "reflects": true }, { "kind": "field", "name": "indeterminate", "type": { "text": "boolean" }, "default": "false", "description": "Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\nall/none\" behavior when associated checkboxes have a mix of checked and unchecked states.", "attribute": "indeterminate", "reflects": true }, { "kind": "field", "name": "contained", "type": { "text": "boolean" }, "default": "false", "description": "Draws a container around the checkbox.", "attribute": "contained", "reflects": true }, { "kind": "field", "name": "square", "type": { "text": "boolean" }, "default": "false", "description": "Squares off the corners of the container drawn by `contained`, which is rounded by default.", "attribute": "square", "reflects": true }, { "kind": "field", "name": "src", "type": { "text": "string" }, "default": "''", "description": "URL for the image shown in a contained checkbox.", "attribute": "src" }, { "kind": "field", "name": "imageAlt", "type": { "text": "string" }, "default": "''", "description": "Accessible text for the built-in image. Leave empty when the image is decorative.", "attribute": "image-alt" }, { "kind": "field", "name": "imagePosition", "type": { "text": "SelectionCardImagePosition" }, "default": "'left'", "description": "Places the image above, beside, or below the checkbox's text. Requires `contained`.", "attribute": "image-position", "reflects": true }, { "kind": "field", "name": "controlPosition", "type": { "text": "SelectionCardControlPosition" }, "default": "'start'", "description": "Places the checkbox indicator within a contained card. Use `none` to hide the indicator so the card itself\nshows the selected state. Requires `contained`.", "attribute": "control-position", "reflects": true }, { "kind": "field", "name": "borderless", "type": { "text": "boolean" }, "default": "false", "description": "Removes a container around the checkbox.", "attribute": "borderless", "reflects": true }, { "kind": "field", "name": "horizontal", "type": { "text": "boolean" }, "default": "false", "description": "Applies styles relevant to checkboxes in a horizontal layout.", "attribute": "horizontal", "reflects": true }, { "kind": "field", "name": "defaultChecked", "type": { "text": "boolean" }, "default": "false", "description": "The default value of the form control. Primarily used for resetting the form control." }, { "kind": "field", "name": "form", "type": { "text": "string" }, "default": "''", "description": "By default, form controls are associated with the nearest containing `
` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.", "attribute": "form", "reflects": true }, { "kind": "field", "name": "required", "type": { "text": "boolean" }, "default": "false", "description": "Makes the checkbox a required field.", "attribute": "required", "reflects": true }, { "kind": "field", "name": "submitOnClick", "type": { "text": "boolean" }, "default": "false", "description": "Submits the form when checkbox is clicked.", "attribute": "submit-on-click", "reflects": true }, { "kind": "field", "name": "description", "type": { "text": "string" }, "default": "''", "description": "The checkbox's help text. If you need to display HTML, use the `description` slot instead.", "attribute": "description" }, { "kind": "field", "name": "label", "type": { "text": "string" }, "attribute": "label" }, { "kind": "field", "name": "labelTooltip", "type": { "text": "string" }, "attribute": "label-tooltip" }, { "kind": "field", "name": "checkedIcon", "type": { "text": "string" }, "default": "''", "description": "The icon to show when the checkbox is checked.", "attribute": "checked-icon" }, { "kind": "field", "name": "uncheckedIcon", "type": { "text": "string" }, "default": "''", "description": "The icon to show when the checkbox is unchecked.", "attribute": "unchecked-icon" }, { "kind": "field", "name": "color", "type": { "text": "ColorOption" }, "default": "'default'", "description": "The color of the checkbox.", "attribute": "color", "reflects": true }, { "kind": "field", "name": "checkedColor", "type": { "text": "ColorOption" }, "description": "The color of the checkbox when checked. Overrides `color`.", "attribute": "checked-color" }, { "kind": "field", "name": "uncheckedColor", "type": { "text": "ColorOption" }, "description": "The color of the checkbox when unchecked. Overrides `color`.", "attribute": "unchecked-color" }, { "kind": "field", "name": "validity", "description": "Gets the validity state object", "readonly": true }, { "kind": "field", "name": "isChecked", "readonly": true }, { "kind": "field", "name": "validationMessage", "description": "Gets the validation message", "readonly": true }, { "kind": "method", "name": "handleClick", "privacy": "private" }, { "kind": "method", "name": "handleBlur", "privacy": "private" }, { "kind": "method", "name": "handleInput", "privacy": "private" }, { "kind": "method", "name": "handleInvalid", "privacy": "private", "parameters": [ { "name": "event", "type": { "text": "Event" } } ] }, { "kind": "method", "name": "handleFocus", "privacy": "private" }, { "kind": "method", "name": "handleSelectedContentClick", "privacy": "private", "parameters": [ { "name": "event", "type": { "text": "MouseEvent" } } ] }, { "kind": "method", "name": "handleDisabledChange" }, { "kind": "method", "name": "handleStateChange" }, { "kind": "method", "name": "click", "description": "Simulates a click on the checkbox." }, { "kind": "method", "name": "focus", "parameters": [ { "name": "options", "optional": true, "type": { "text": "FocusOptions" } } ], "description": "Sets focus on the checkbox." }, { "kind": "method", "name": "blur", "description": "Removes focus from the checkbox." }, { "kind": "method", "name": "checkValidity", "description": "Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid." }, { "kind": "method", "name": "getForm", "return": { "type": { "text": "HTMLFormElement | null" } }, "description": "Gets the associated form, if one exists." }, { "kind": "method", "name": "reportValidity", "description": "Checks for validity and shows the browser's validation message if the control is invalid." }, { "kind": "method", "name": "setCustomValidity", "parameters": [ { "name": "message", "type": { "text": "string" } } ], "description": "Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear\nthe custom validation message, call this method with an empty string." } ], "events": [ { "description": "Emitted when the checkbox loses focus.", "name": "zn-blur" }, { "description": "Emitted when the checked state changes.", "name": "zn-change" }, { "description": "Emitted when the checkbox gains focus.", "name": "zn-focus" }, { "description": "Emitted when the checkbox receives input.", "name": "zn-input" }, { "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied.", "name": "zn-invalid" } ], "attributes": [ { "name": "title", "type": { "text": "string" }, "default": "''", "fieldName": "title" }, { "name": "name", "type": { "text": "string" }, "default": "''", "description": "The name of the checkbox, submitted as a name/value pair with form data.", "fieldName": "name" }, { "name": "value", "type": { "text": "string" }, "description": "The current value of the checkbox, submitted as a name/value pair with form data.", "fieldName": "value" }, { "name": "card-title", "type": { "text": "string" }, "default": "''", "description": "Title rendered inside the card. The default slot takes precedence when provided.", "fieldName": "cardTitle" }, { "name": "unchecked-value", "type": { "text": "string" }, "description": "The unchecked value of the checkbox, submitted as a name/value pair with form data.", "fieldName": "uncheckedValue" }, { "name": "size", "type": { "text": "'small' | 'medium' | 'large'" }, "default": "'medium'", "description": "The checkbox's size.", "fieldName": "size" }, { "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Disables the checkbox.", "fieldName": "disabled" }, { "name": "checked", "type": { "text": "boolean" }, "default": "false", "description": "Draws the checkbox in a checked state.", "fieldName": "checked" }, { "name": "indeterminate", "type": { "text": "boolean" }, "default": "false", "description": "Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\nall/none\" behavior when associated checkboxes have a mix of checked and unchecked states.", "fieldName": "indeterminate" }, { "name": "contained", "type": { "text": "boolean" }, "default": "false", "description": "Draws a container around the checkbox.", "fieldName": "contained" }, { "name": "square", "type": { "text": "boolean" }, "default": "false", "description": "Squares off the corners of the container drawn by `contained`, which is rounded by default.", "fieldName": "square" }, { "name": "src", "type": { "text": "string" }, "default": "''", "description": "URL for the image shown in a contained checkbox.", "fieldName": "src" }, { "name": "image-alt", "type": { "text": "string" }, "default": "''", "description": "Accessible text for the built-in image. Leave empty when the image is decorative.", "fieldName": "imageAlt" }, { "name": "image-position", "type": { "text": "SelectionCardImagePosition" }, "default": "'left'", "description": "Places the image above, beside, or below the checkbox's text. Requires `contained`.", "fieldName": "imagePosition" }, { "name": "control-position", "type": { "text": "SelectionCardControlPosition" }, "default": "'start'", "description": "Places the checkbox indicator within a contained card. Use `none` to hide the indicator so the card itself\nshows the selected state. Requires `contained`.", "fieldName": "controlPosition" }, { "name": "borderless", "type": { "text": "boolean" }, "default": "false", "description": "Removes a container around the checkbox.", "fieldName": "borderless" }, { "name": "horizontal", "type": { "text": "boolean" }, "default": "false", "description": "Applies styles relevant to checkboxes in a horizontal layout.", "fieldName": "horizontal" }, { "name": "form", "type": { "text": "string" }, "default": "''", "description": "By default, form controls are associated with the nearest containing `` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.", "fieldName": "form" }, { "name": "required", "type": { "text": "boolean" }, "default": "false", "description": "Makes the checkbox a required field.", "fieldName": "required" }, { "name": "submit-on-click", "type": { "text": "boolean" }, "default": "false", "description": "Submits the form when checkbox is clicked.", "fieldName": "submitOnClick" }, { "name": "description", "type": { "text": "string" }, "default": "''", "description": "The checkbox's help text. If you need to display HTML, use the `description` slot instead.", "fieldName": "description" }, { "name": "label", "type": { "text": "string" }, "fieldName": "label" }, { "name": "label-tooltip", "type": { "text": "string" }, "fieldName": "labelTooltip" }, { "name": "checked-icon", "type": { "text": "string" }, "default": "''", "description": "The icon to show when the checkbox is checked.", "fieldName": "checkedIcon" }, { "name": "unchecked-icon", "type": { "text": "string" }, "default": "''", "description": "The icon to show when the checkbox is unchecked.", "fieldName": "uncheckedIcon" }, { "name": "color", "type": { "text": "ColorOption" }, "default": "'default'", "description": "The color of the checkbox.", "fieldName": "color" }, { "name": "checked-color", "type": { "text": "ColorOption" }, "description": "The color of the checkbox when checked. Overrides `color`.", "fieldName": "checkedColor" }, { "name": "unchecked-color", "type": { "text": "ColorOption" }, "description": "The color of the checkbox when unchecked. Overrides `color`.", "fieldName": "uncheckedColor" } ], "superclass": { "name": "ZincElement", "module": "/src/internal/zinc-element" }, "summary": "Short summary of the component's intended use.", "tagNameWithoutPrefix": "checkbox", "tagName": "zn-checkbox", "customElement": true, "jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/checkbox\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-icon\n *\n * @slot - The checkbox's label.\n * @slot image - Replaces the built-in image used by contained checkboxes.\n * @slot description - A description of the checkbox's label. Serves as help text for a checkbox item. Alternatively, you can use the `description` attribute.\n * @slot selected-content - Use to nest rich content (like an input) inside a selected checkbox item. Use only with the contained style.\n *\n * @event zn-blur - Emitted when the checkbox loses focus.\n * @event zn-change - Emitted when the checked state changes.\n * @event zn-focus - Emitted when the checkbox gains focus.\n * @event zn-input - Emitted when the checkbox receives input.\n * @event zn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart base - The component's base wrapper.\n * @csspart control - The square container that wraps the checkbox's checked state.\n * @csspart control--checked - Matches the control part when the checkbox is checked.\n * @csspart control--indeterminate - Matches the control part when the checkbox is indeterminate.\n * @csspart checked-icon - The checked icon, an `` element.\n * @csspart unchecked-icon - The unchecked icon, an `` element.\n * @csspart indeterminate-icon - The indeterminate icon, an `` element.\n * @csspart image-container - The wrapper around the built-in image or image slot.\n * @csspart image - The built-in image.\n * @csspart card-title - The title inside a selection card.\n * @csspart label - The container that wraps the checkbox's label.\n * @csspart description - The container that wraps the checkbox's description.\n * @csspart selected-content - The container that wraps optional content that appears when a checkbox is checked.\n *\n * @cssproperty --zn-selection-card-image-width - Width of the built-in card image.\n * @cssproperty --zn-selection-card-image-height - Height of the built-in card image.\n * @cssproperty --zn-selection-card-min-height - Minimum height of a contained checkbox with an image.\n * @cssproperty --zn-selection-card-content-min-width - Width the card text keeps before it wraps below the image.\n * @cssproperty --zn-selection-card-title-font-size - Font size of a selection card title.\n * @cssproperty --zn-selection-card-padding - Equal inset around the contents of a selection card.\n * @cssproperty --zn-selection-card-gap - Space between the image, title, and indicator gutter.\n * @cssproperty --zn-selection-card-control-offset - Distance between a positioned control and the card edge.\n * @cssproperty --zn-selection-card-border-radius - Corner radius of a contained container.\n */", "documentation": "https://zinc.style/components/checkbox", "status": "experimental", "since": "1.0", "dependencies": [ "zn-icon" ] } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "ZnCheckbox", "module": "components/checkbox/checkbox.js" } } ] }, { "kind": "javascript-module", "path": "components/checkbox-group/checkbox-group.js", "declarations": [ { "kind": "class", "description": "", "name": "ZnCheckboxGroup", "cssProperties": [ { "description": "Minimum column width used by the horizontal contained grid, or the card basis when `wrap` is set.", "name": "--zn-checkbox-group-column-width" } ], "cssParts": [ { "description": "The form control that wraps the label, input, and help text.", "name": "form-control" }, { "description": "The label's wrapper.", "name": "form-control-label" }, { "description": "The input's wrapper.", "name": "form-control-input" }, { "description": "The help text's wrapper.", "name": "form-control-help-text" } ], "slots": [ { "description": "The default slot where `` elements are placed.", "name": "" }, { "description": "The checkbox group's label. Required for proper accessibility. Alternatively, you can use the `label` attribute.", "name": "label" }, { "description": "Used to add text that is displayed in a tooltip next to the label. Alternatively, you can use the `label-tooltip` attribute.", "name": "label-tooltip" }, { "description": "Text that describes how to use the checkbox group. Alternatively, you can use the `help-text` attribute.", "name": "help-text" } ], "members": [ { "kind": "field", "name": "formControlController", "privacy": "protected", "readonly": true, "default": "new FormControlController(this)" }, { "kind": "field", "name": "hasSlotController", "privacy": "private", "readonly": true, "default": "new HasSlotController(this, 'help-text', 'label')" }, { "kind": "field", "name": "customValidityMessage", "type": { "text": "string" }, "privacy": "private", "default": "''" }, { "kind": "field", "name": "validationTimeout", "type": { "text": "number" }, "privacy": "private" }, { "kind": "field", "name": "defaultSlot", "type": { "text": "HTMLSlotElement" } }, { "kind": "field", "name": "validationInput", "type": { "text": "HTMLInputElement" } }, { "kind": "field", "name": "errorMessage", "type": { "text": "string" }, "privacy": "private", "default": "''" }, { "kind": "field", "name": "label", "type": { "text": "string" }, "default": "''", "description": "The checkbox group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot instead.", "attribute": "label" }, { "kind": "field", "name": "labelTooltip", "type": { "text": "string" }, "default": "''", "description": "Text that appears in a tooltip next to the label. If you need to display HTML in the tooltip, use the `label-tooltip` slot instead.", "attribute": "label-tooltip" }, { "kind": "field", "name": "helpText", "type": { "text": "string" }, "default": "''", "description": "The checkbox groups's help text. If you need to display HTML, use the `help-text` slot instead.", "attribute": "help-text" }, { "kind": "field", "name": "name", "type": { "text": "string" }, "default": "''", "description": "The name of the checkbox group, submitted as a name/value pair with form data.", "attribute": "name" }, { "kind": "field", "name": "value", "type": { "text": "string[]" }, "default": "[]", "description": "The current value of the checkbox group, submitted as a name/value pair with form data.", "attribute": "value", "reflects": true }, { "kind": "field", "name": "size", "type": { "text": "'small' | 'medium' | 'large'" }, "default": "'medium'", "description": "The checkbox group's size. This size will be applied to all child checkboxes.", "attribute": "size", "reflects": true }, { "kind": "field", "name": "horizontal", "type": { "text": "boolean" }, "default": "false", "description": "The checkbox group's orientation. Changes the group's layout from the default (vertical) to horizontal.", "attribute": "horizontal", "reflects": true }, { "kind": "field", "name": "contained", "type": { "text": "boolean" }, "default": "false", "description": "The checkbox group's style. Changes the group's style from the default (plain) style to the 'contained' style. This style will be applied to all child checkboxes.", "attribute": "contained", "reflects": true }, { "kind": "field", "name": "square", "type": { "text": "boolean" }, "default": "false", "description": "Squares off the corners of every contained checkbox in the group, which are rounded by default.", "attribute": "square", "reflects": true }, { "kind": "field", "name": "wrap", "type": { "text": "boolean" }, "default": "false", "description": "Lays horizontal contained checkboxes out as a wrapping row instead of an equal-width grid, so each one sizes from\n`--zn-checkbox-group-column-width` (set it to `auto` to size from content) and wraps onto a new line when needed.", "attribute": "wrap", "reflects": true }, { "kind": "field", "name": "form", "type": { "text": "string" }, "default": "''", "description": "By default, form controls are associated with the nearest containing `` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.", "attribute": "form", "reflects": true }, { "kind": "field", "name": "required", "type": { "text": "boolean" }, "default": "false", "description": "Ensures at least one child checkbox is checked before allowing the containing form to submit.", "attribute": "required", "reflects": true }, { "kind": "field", "name": "validity", "description": "Gets the validity state object", "readonly": true }, { "kind": "field", "name": "validationMessage", "description": "Gets the validation message", "readonly": true }, { "kind": "method", "name": "getAllCheckboxes", "privacy": "private" }, { "kind": "method", "name": "handleCheckboxClick", "privacy": "private", "parameters": [ { "name": "event", "type": { "text": "MouseEvent" } } ] }, { "kind": "method", "name": "handleInvalid", "privacy": "private", "parameters": [ { "name": "event", "type": { "text": "Event" } } ] }, { "kind": "method", "name": "syncCheckboxElements", "privacy": "private" }, { "kind": "method", "name": "syncCheckboxes", "privacy": "private" }, { "kind": "method", "name": "updateCheckboxValidity", "privacy": "private" }, { "kind": "method", "name": "getValueFromCheckboxes", "privacy": "private" }, { "kind": "method", "name": "addEventListenerToCheckboxes", "privacy": "private" }, { "kind": "method", "name": "handleSizeChange" }, { "kind": "method", "name": "handleValueChange" }, { "kind": "method", "name": "checkValidity", "description": "Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid." }, { "kind": "method", "name": "getForm", "return": { "type": { "text": "HTMLFormElement | null" } }, "description": "Gets the associated form, if one exists." }, { "kind": "method", "name": "reportValidity", "return": { "type": { "text": "boolean" } }, "description": "Checks for validity and shows the browser's validation message if the control is invalid." }, { "kind": "method", "name": "setCustomValidity", "parameters": [ { "name": "message", "default": "''" } ], "description": "Sets a custom validation message. Pass an empty string to restore validity." } ], "events": [ { "description": "Emitted when the checkbox group's selected value changes.", "name": "zn-change" }, { "description": "Emitted when the checkbox group receives user input.", "name": "zn-input" }, { "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied.", "name": "zn-invalid" } ], "attributes": [ { "name": "label", "type": { "text": "string" }, "default": "''", "description": "The checkbox group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot instead.", "fieldName": "label" }, { "name": "label-tooltip", "type": { "text": "string" }, "default": "''", "description": "Text that appears in a tooltip next to the label. If you need to display HTML in the tooltip, use the `label-tooltip` slot instead.", "fieldName": "labelTooltip" }, { "name": "help-text", "type": { "text": "string" }, "default": "''", "description": "The checkbox groups's help text. If you need to display HTML, use the `help-text` slot instead.", "fieldName": "helpText" }, { "name": "name", "type": { "text": "string" }, "default": "''", "description": "The name of the checkbox group, submitted as a name/value pair with form data.", "fieldName": "name" }, { "name": "value", "type": { "text": "string[]" }, "default": "[]", "description": "The current value of the checkbox group, submitted as a name/value pair with form data.", "fieldName": "value" }, { "name": "size", "type": { "text": "'small' | 'medium' | 'large'" }, "default": "'medium'", "description": "The checkbox group's size. This size will be applied to all child checkboxes.", "fieldName": "size" }, { "name": "horizontal", "type": { "text": "boolean" }, "default": "false", "description": "The checkbox group's orientation. Changes the group's layout from the default (vertical) to horizontal.", "fieldName": "horizontal" }, { "name": "contained", "type": { "text": "boolean" }, "default": "false", "description": "The checkbox group's style. Changes the group's style from the default (plain) style to the 'contained' style. This style will be applied to all child checkboxes.", "fieldName": "contained" }, { "name": "square", "type": { "text": "boolean" }, "default": "false", "description": "Squares off the corners of every contained checkbox in the group, which are rounded by default.", "fieldName": "square" }, { "name": "wrap", "type": { "text": "boolean" }, "default": "false", "description": "Lays horizontal contained checkboxes out as a wrapping row instead of an equal-width grid, so each one sizes from\n`--zn-checkbox-group-column-width` (set it to `auto` to size from content) and wraps onto a new line when needed.", "fieldName": "wrap" }, { "name": "form", "type": { "text": "string" }, "default": "''", "description": "By default, form controls are associated with the nearest containing `` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.", "fieldName": "form" }, { "name": "required", "type": { "text": "boolean" }, "default": "false", "description": "Ensures at least one child checkbox is checked before allowing the containing form to submit.", "fieldName": "required" } ], "superclass": { "name": "ZincElement", "module": "/src/internal/zinc-element" }, "summary": "Shotrt summary of the component's intended use.", "tagNameWithoutPrefix": "checkbox-group", "tagName": "zn-checkbox-group", "customElement": true, "jsDoc": "/**\n * @summary Shotrt summary of the component's intended use.\n * @documentation https://zinc.style/components/checkbox-group\n * @status experimental\n * @since 1.0\n *\n * @slot - The default slot where `` elements are placed.\n * @slot label - The checkbox group's label. Required for proper accessibility. Alternatively, you can use the `label` attribute.\n * @slot label-tooltip - Used to add text that is displayed in a tooltip next to the label. Alternatively, you can use the `label-tooltip` attribute.\n * @slot help-text - Text that describes how to use the checkbox group. Alternatively, you can use the `help-text` attribute.\n *\n * @event zn-change - Emitted when the checkbox group's selected value changes.\n * @event zn-input - Emitted when the checkbox group receives user input.\n * @event zn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart form-control - The form control that wraps the label, input, and help text.\n * @csspart form-control-label - The label's wrapper.\n * @csspart form-control-input - The input's wrapper.\n * @csspart form-control-help-text - The help text's wrapper.\n *\n * @cssproperty --zn-checkbox-group-column-width - Minimum column width used by the horizontal contained grid, or the card basis when `wrap` is set.\n */", "documentation": "https://zinc.style/components/checkbox-group", "status": "experimental", "since": "1.0" } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "ZnCheckboxGroup", "module": "components/checkbox-group/checkbox-group.js" } } ] }, { "kind": "javascript-module", "path": "components/chip/chip.js", "declarations": [ { "kind": "class", "description": "", "name": "ZnChip", "cssProperties": [ { "description": "An example CSS custom property.", "name": "--example" } ], "cssParts": [ { "description": "The component's base wrapper.", "name": "base" } ], "slots": [ { "description": "The default slot.", "name": "" }, { "description": "An example slot.", "name": "example" } ], "members": [ { "kind": "field", "name": "icon", "type": { "text": "string" }, "default": "''", "attribute": "icon" }, { "kind": "field", "name": "caption", "type": { "text": "string" }, "default": "''", "attribute": "caption" }, { "kind": "field", "name": "iconSize", "type": { "text": "number" }, "default": "18", "attribute": "icon-size" }, { "kind": "field", "name": "type", "type": { "text": "'info' | 'success' | 'warning' | 'error' | 'primary' |\n 'transparent' | 'custom' | 'neutral'" }, "default": "'neutral'", "attribute": "type" }, { "kind": "field", "name": "flush", "type": { "text": "boolean" }, "default": "false", "attribute": "flush", "reflects": true }, { "kind": "field", "name": "flushX", "type": { "text": "boolean" }, "default": "false", "attribute": "flush-x", "reflects": true }, { "kind": "field", "name": "flushY", "type": { "text": "boolean" }, "default": "false", "attribute": "flush-y", "reflects": true }, { "kind": "field", "name": "hasSlotController", "privacy": "private", "readonly": true, "default": "new HasSlotController(this, '[default]', 'action')" } ], "events": [ { "description": "Emitted as an example.", "name": "zn-event-name" } ], "attributes": [ { "name": "icon", "type": { "text": "string" }, "default": "''", "fieldName": "icon" }, { "name": "caption", "type": { "text": "string" }, "default": "''", "fieldName": "caption" }, { "name": "icon-size", "type": { "text": "number" }, "default": "18", "fieldName": "iconSize" }, { "name": "type", "type": { "text": "'info' | 'success' | 'warning' | 'error' | 'primary' |\n 'transparent' | 'custom' | 'neutral'" }, "default": "'neutral'", "fieldName": "type" }, { "name": "flush", "type": { "text": "boolean" }, "default": "false", "fieldName": "flush" }, { "name": "flush-x", "type": { "text": "boolean" }, "default": "false", "fieldName": "flushX" }, { "name": "flush-y", "type": { "text": "boolean" }, "default": "false", "fieldName": "flushY" } ], "superclass": { "name": "ZincElement", "module": "/src/internal/zinc-element" }, "summary": "Short summary of the component's intended use.", "tagNameWithoutPrefix": "chip", "tagName": "zn-chip", "customElement": true, "jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/chip\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-example\n *\n * @event zn-event-name - Emitted as an example.\n *\n * @slot - The default slot.\n * @slot example - An example slot.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --example - An example CSS custom property.\n */", "documentation": "https://zinc.style/components/chip", "status": "experimental", "since": "1.0", "dependencies": [ "zn-example" ] } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "ZnChip", "module": "components/chip/chip.js" } } ] }, { "kind": "javascript-module", "path": "components/collapsible/collapsible.js", "declarations": [ { "kind": "class", "description": "", "name": "ZnCollapsible", "cssParts": [ { "description": "The header row (toggle).", "name": "header" }, { "description": "The caption text.", "name": "caption" }, { "description": "The expandable content wrapper.", "name": "content" } ], "slots": [ { "description": "Clicking will toggle the show state of the data", "name": "header" } ], "members": [ { "kind": "field", "name": "caption", "type": { "text": "string" }, "default": "''", "attribute": "caption", "reflects": true }, { "kind": "field", "name": "description", "type": { "text": "string" }, "attribute": "description", "reflects": true }, { "kind": "field", "name": "label", "type": { "text": "string" }, "default": "''", "attribute": "label", "reflects": true }, { "kind": "field", "name": "showNumber", "type": { "text": "boolean" }, "default": "false", "attribute": "show-number", "reflects": true }, { "kind": "field", "name": "countElement", "type": { "text": "string" }, "default": "'*'", "attribute": "count-element" }, { "kind": "field", "name": "expanded", "type": { "text": "boolean" }, "default": "false", "attribute": "expanded", "reflects": true }, { "kind": "field", "name": "defaultState", "type": { "text": "'open' | 'closed'" }, "attribute": "default" }, { "kind": "field", "name": "localStorage", "type": { "text": "boolean" }, "attribute": "local-storage", "reflects": true }, { "kind": "field", "name": "storeKey", "type": { "text": "string" }, "default": "\"\"", "attribute": "store-key", "reflects": true }, { "kind": "field", "name": "storeTtl", "type": { "text": "number" }, "default": "0", "attribute": "store-ttl", "reflects": true }, { "kind": "field", "name": "flush", "type": { "text": "boolean" }, "default": "false", "attribute": "flush", "reflects": true }, { "kind": "field", "name": "numberOfItems", "type": { "text": "number" }, "default": "0" }, { "kind": "field", "name": "animating", "type": { "text": "boolean" }, "privacy": "private", "default": "false" }, { "kind": "field", "name": "animatingTimer", "type": { "text": "ReturnType | undefined" }, "privacy": "private" }, { "kind": "field", "name": "_store", "type": { "text": "Store" }, "privacy": "protected" }, { "kind": "field", "name": "hasSlotController", "privacy": "private", "readonly": true, "default": "new HasSlotController(this, '[default]', 'header', 'caption', 'label', 'description')" }, { "kind": "field", "name": "observer", "privacy": "private", "readonly": true, "default": "new MutationController(this, { target: null, config: { childList: true, subtree: true }, callback: () => this.recalculateNumberOfItems(), })" }, { "kind": "field", "name": "showArrow", "type": { "text": "boolean" }, "privacy": "private", "default": "true" }, { "kind": "field", "name": "handleCaptionToggle", "privacy": "public" }, { "kind": "method", "name": "startAnimating", "privacy": "private" }, { "kind": "method", "name": "stopAnimating", "privacy": "private" }, { "kind": "field", "name": "handleTransitionEnd", "privacy": "private" }, { "kind": "field", "name": "handleCollapse" }, { "kind": "field", "name": "recalculateNumberOfItems", "privacy": "public" } ], "attributes": [ { "name": "caption", "type": { "text": "string" }, "default": "''", "fieldName": "caption" }, { "name": "description", "type": { "text": "string" }, "fieldName": "description" }, { "name": "label", "type": { "text": "string" }, "default": "''", "fieldName": "label" }, { "name": "show-number", "type": { "text": "boolean" }, "default": "false", "fieldName": "showNumber" }, { "name": "count-element", "type": { "text": "string" }, "default": "'*'", "fieldName": "countElement" }, { "name": "expanded", "type": { "text": "boolean" }, "default": "false", "fieldName": "expanded" }, { "name": "default", "type": { "text": "'open' | 'closed'" }, "fieldName": "defaultState" }, { "name": "local-storage", "type": { "text": "boolean" }, "fieldName": "localStorage" }, { "name": "store-key", "type": { "text": "string" }, "default": "\"\"", "fieldName": "storeKey" }, { "name": "store-ttl", "type": { "text": "number" }, "default": "0", "fieldName": "storeTtl" }, { "name": "flush", "type": { "text": "boolean" }, "default": "false", "fieldName": "flush" } ], "superclass": { "name": "ZincElement", "module": "/src/internal/zinc-element" }, "summary": "Toggles between showing and hiding content when clicked", "tagNameWithoutPrefix": "collapsible", "tagName": "zn-collapsible", "customElement": true, "jsDoc": "/**\n * @summary Toggles between showing and hiding content when clicked\n * @documentation https://zinc.style/components/collapsible\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-icon - The icon element\n *\n * @slot header - Clicking will toggle the show state of the data\n *\n * @csspart header - The header row (toggle).\n * @csspart caption - The caption text.\n * @csspart content - The expandable content wrapper.\n */", "documentation": "https://zinc.style/components/collapsible", "status": "experimental", "since": "1.0", "dependencies": [ "zn-icon" ] } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "ZnCollapsible", "module": "components/collapsible/collapsible.js" } } ] }, { "kind": "javascript-module", "path": "components/color-select/color-select.js", "declarations": [ { "kind": "class", "description": "", "name": "ZnColorSelect", "cssParts": [ { "description": "The color swatch shown in the closed control.", "name": "swatch" }, { "description": "The container that wraps the swatch and expand button (forwarded from zn-select).", "name": "combobox" }, { "description": "The help text's wrapper (forwarded from zn-select).", "name": "form-control-help-text" }, { "description": "The select's wrapper (forwarded from zn-select).", "name": "form-control-input" } ], "members": [ { "kind": "field", "name": "dependencies", "type": { "text": "object" }, "static": true, "default": "{ 'zn-select': ZnSelect, 'zn-option': ZnOption, }" }, { "kind": "field", "name": "select", "type": { "text": "ZnSelect" } }, { "kind": "field", "name": "name", "type": { "text": "string" }, "description": "The name of the select. Used for form submission.", "attribute": "name" }, { "kind": "field", "name": "value", "type": { "text": "string" }, "default": "''", "description": "The selected color (lowercase name, e.g. \"red\"). Used for form submission.", "attribute": "value" }, { "kind": "field", "name": "label", "type": { "text": "string" }, "default": "''", "description": "The select's label.", "attribute": "label" }, { "kind": "field", "name": "helpText", "type": { "text": "string" }, "default": "''", "description": "The select's help text.", "attribute": "help-text" }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Disables the select.", "attribute": "disabled", "reflects": true }, { "kind": "field", "name": "required", "type": { "text": "boolean" }, "default": "false", "description": "Makes the select a required field.", "attribute": "required", "reflects": true }, { "kind": "field", "name": "clearable", "type": { "text": "boolean" }, "default": "false", "description": "Shows a clear button when a color is selected.", "attribute": "clearable" }, { "kind": "field", "name": "formControlController", "privacy": "private", "readonly": true, "default": "new FormControlController(this)" }, { "kind": "field", "name": "validity", "type": { "text": "ValidityState" }, "readonly": true }, { "kind": "field", "name": "validationMessage", "type": { "text": "string" }, "readonly": true }, { "kind": "method", "name": "checkValidity", "return": { "type": { "text": "boolean" } } }, { "kind": "method", "name": "getForm", "return": { "type": { "text": "HTMLFormElement | null" } } }, { "kind": "method", "name": "reportValidity", "return": { "type": { "text": "boolean" } } }, { "kind": "method", "name": "setCustomValidity", "return": { "type": { "text": "void" } }, "parameters": [ { "name": "message", "type": { "text": "string" } } ] }, { "kind": "method", "name": "handleValueChange" }, { "kind": "field", "name": "handleInput", "privacy": "private" }, { "kind": "field", "name": "handleClear", "privacy": "private" } ], "events": [ { "description": "Emitted when the selected color changes.", "name": "zn-input" }, { "description": "Emitted when the clear button is activated.", "name": "zn-clear" } ], "attributes": [ { "name": "name", "type": { "text": "string" }, "description": "The name of the select. Used for form submission.", "fieldName": "name" }, { "name": "value", "type": { "text": "string" }, "default": "''", "description": "The selected color (lowercase name, e.g. \"red\"). Used for form submission.", "fieldName": "value" }, { "name": "label", "type": { "text": "string" }, "default": "''", "description": "The select's label.", "fieldName": "label" }, { "name": "help-text", "type": { "text": "string" }, "default": "''", "description": "The select's help text.", "fieldName": "helpText" }, { "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Disables the select.", "fieldName": "disabled" }, { "name": "required", "type": { "text": "boolean" }, "default": "false", "description": "Makes the select a required field.", "fieldName": "required" }, { "name": "clearable", "type": { "text": "boolean" }, "default": "false", "description": "Shows a clear button when a color is selected.", "fieldName": "clearable" } ], "superclass": { "name": "ZincElement", "module": "/src/internal/zinc-element" }, "summary": "A simple color picker. The dropdown lists color swatches with names; the closed control shows only the selected color's swatch.", "tagNameWithoutPrefix": "color-select", "tagName": "zn-color-select", "customElement": true, "jsDoc": "/**\n * @summary A simple color picker. The dropdown lists color swatches with names; the closed control shows only the selected color's swatch.\n * @documentation https://zinc.style/components/color-select\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-select\n * @dependency zn-option\n *\n * @event zn-input - Emitted when the selected color changes.\n * @event zn-clear - Emitted when the clear button is activated.\n *\n * @csspart swatch - The color swatch shown in the closed control.\n * @csspart combobox - The container that wraps the swatch and expand button (forwarded from zn-select).\n * @csspart form-control-help-text - The help text's wrapper (forwarded from zn-select).\n * @csspart form-control-input - The select's wrapper (forwarded from zn-select).\n */", "documentation": "https://zinc.style/components/color-select", "status": "experimental", "since": "1.0", "dependencies": [ "zn-select", "zn-option" ] } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "ZnColorSelect", "module": "components/color-select/color-select.js" } } ] }, { "kind": "javascript-module", "path": "components/cols/cols.js", "declarations": [ { "kind": "class", "description": "", "name": "ZnCols", "cssProperties": [ { "description": "An example CSS custom property.", "name": "--example" } ], "cssParts": [ { "description": "The component's base wrapper.", "name": "base" } ], "slots": [ { "description": "The default slot.", "name": "" }, { "description": "An example slot.", "name": "example" } ], "members": [ { "kind": "field", "name": "layout", "type": { "text": "string" }, "default": "''", "attribute": "layout", "reflects": true }, { "kind": "field", "name": "stackAt", "type": { "text": "string" }, "default": "''", "description": "Container width the columns collapse to a single column below, as one of the named zinc\ncontainer sizes (sm, smp, ph, md, lg, hd, 3k, 4k). Defaults to `lg` when a child declares\n`stack-order` or `stack-split`, otherwise the columns never explicitly stack.", "attribute": "stack-at", "reflects": true }, { "kind": "field", "name": "maxColumns", "type": { "text": "number" }, "default": "0", "attribute": "mc", "reflects": true }, { "kind": "field", "name": "noGap", "type": { "text": "boolean" }, "default": "false", "attribute": "no-gap" }, { "kind": "field", "name": "border", "type": { "text": "boolean" }, "default": "false", "attribute": "border" }, { "kind": "field", "name": "pad", "type": { "text": "boolean" }, "attribute": "pad" }, { "kind": "field", "name": "divide", "type": { "text": "boolean" }, "default": "false", "attribute": "divide" }, { "kind": "field", "name": "padX", "type": { "text": "boolean" }, "attribute": "pad-x" }, { "kind": "field", "name": "padY", "type": { "text": "boolean" }, "attribute": "pad-y" }, { "kind": "field", "name": "childObserver", "type": { "text": "MutationObserver" }, "privacy": "private", "readonly": true, "default": "new MutationObserver(() => this.requestUpdate())" }, { "kind": "method", "name": "stackOrder", "privacy": "private", "return": { "type": { "text": "number | null" } }, "parameters": [ { "name": "element", "type": { "text": "Element" } } ], "description": "Reads the `stack-order` attribute of an element, returning null when it does not declare one." }, { "kind": "method", "name": "applyStackOrder", "privacy": "private", "return": { "type": { "text": "number | null" } }, "parameters": [ { "name": "element", "type": { "text": "HTMLElement" } }, { "name": "promoted", "type": { "text": "boolean" } } ], "description": "Applies the declared stack order to an element. `--zn-stacked` is 0 until the container\nquery in our stylesheet flips it to 1, so ordering only kicks in once stacked." } ], "events": [ { "description": "Emitted as an example.", "name": "zn-event-name" } ], "attributes": [ { "name": "layout", "type": { "text": "string" }, "default": "''", "fieldName": "layout" }, { "name": "stack-at", "type": { "text": "string" }, "default": "''", "description": "Container width the columns collapse to a single column below, as one of the named zinc\ncontainer sizes (sm, smp, ph, md, lg, hd, 3k, 4k). Defaults to `lg` when a child declares\n`stack-order` or `stack-split`, otherwise the columns never explicitly stack.", "fieldName": "stackAt" }, { "name": "mc", "type": { "text": "number" }, "default": "0", "fieldName": "maxColumns" }, { "name": "no-gap", "type": { "text": "boolean" }, "default": "false", "fieldName": "noGap" }, { "name": "border", "type": { "text": "boolean" }, "default": "false", "fieldName": "border" }, { "name": "pad", "type": { "text": "boolean" }, "fieldName": "pad" }, { "name": "divide", "type": { "text": "boolean" }, "default": "false", "fieldName": "divide" }, { "name": "pad-x", "type": { "text": "boolean" }, "fieldName": "padX" }, { "name": "pad-y", "type": { "text": "boolean" }, "fieldName": "padY" } ], "superclass": { "name": "ZincElement", "module": "/src/internal/zinc-element" }, "summary": "Short summary of the component's intended use.", "tagNameWithoutPrefix": "cols", "tagName": "zn-cols", "customElement": true, "jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/columns\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-example\n *\n * @event zn-event-name - Emitted as an example.\n *\n * @slot - The default slot.\n * @slot example - An example slot.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --example - An example CSS custom property.\n */", "documentation": "https://zinc.style/components/columns", "status": "experimental", "since": "1.0", "dependencies": [ "zn-example" ] } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "ZnCols", "module": "components/cols/cols.js" } } ] }, { "kind": "javascript-module", "path": "components/confirm/confirm.js", "declarations": [ { "kind": "class", "description": "", "name": "ZnConfirm", "cssProperties": [ { "description": "An example CSS custom property.", "name": "--example" } ], "cssParts": [ { "description": "The component's base wrapper.", "name": "base" } ], "slots": [ { "description": "The default slot.", "name": "" }, { "description": "An example slot.", "name": "example" } ], "members": [ { "kind": "field", "name": "dependencies", "type": { "text": "object" }, "static": true, "default": "{ 'zn-dialog': ZnDialog }" }, { "kind": "field", "name": "hasSlotController", "privacy": "private", "readonly": true, "default": "new HasSlotController(this, '[default]', 'footer')" }, { "kind": "field", "name": "variant", "type": { "text": "'default' | 'warning' | 'announcement'" }, "default": "'default'", "description": "The dialog's theme variant.", "attribute": "variant", "reflects": true }, { "kind": "field", "name": "size", "type": { "text": "'small' | 'medium' | 'large'" }, "default": "'medium'", "description": "The dialog's size.", "attribute": "size", "reflects": true }, { "kind": "field", "name": "type", "type": { "text": "'warning' | 'error' | 'success' | 'info'" }, "default": "'warning'", "description": "The dialogs type, which will determine the icon and color.", "attribute": "type" }, { "kind": "field", "name": "open", "type": { "text": "boolean" }, "default": "false", "description": "Indicated whether of not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the dialog's state.", "attribute": "open", "reflects": true }, { "kind": "field", "name": "caption", "type": { "text": "string" }, "default": "''", "attribute": "caption" }, { "kind": "field", "name": "action", "type": { "text": "string" }, "default": "''", "attribute": "action" }, { "kind": "field", "name": "content", "type": { "text": "string" }, "default": "''", "attribute": "content" }, { "kind": "field", "name": "confirmText", "type": { "text": "string" }, "default": "\"Confirm\"", "attribute": "confirmText" }, { "kind": "field", "name": "cancelText", "type": { "text": "string" }, "default": "\"Cancel\"", "attribute": "cancelText" }, { "kind": "field", "name": "hideIcon", "type": { "text": "boolean" }, "default": "false", "attribute": "hide-icon" }, { "kind": "field", "name": "showLoading", "type": { "text": "boolean" }, "default": "false", "description": "Show a loading state when the dialog is submitted.", "attribute": "show-loading" }, { "kind": "field", "name": "trigger", "type": { "text": "string" }, "description": "The dialog's trigger element. This is used to open the dialog when clicked. If you do not provide a trigger, you\nwill need to manually open the dialog using the `show()` method.", "attribute": "trigger", "reflects": true }, { "kind": "field", "name": "announcement", "type": { "text": "string" }, "default": "''", "description": "The Dialogs announcement text.", "attribute": "announcement" }, { "kind": "field", "name": "footerText", "type": { "text": "string" }, "default": "''", "description": "The Dialogs footer text.", "attribute": "footer-text" }, { "kind": "field", "name": "dialog", "type": { "text": "ZnDialog" } }, { "kind": "field", "name": "loading", "type": { "text": "boolean" }, "privacy": "private", "default": "false", "description": "Internal loading state used when showLoading is enabled" }, { "kind": "method", "name": "updateTriggers" }, { "kind": "field", "name": "show" }, { "kind": "method", "name": "hide" }, { "kind": "method", "name": "submitDialog" } ], "events": [ { "description": "Emitted as an example.", "name": "zn-event-name" } ], "attributes": [ { "name": "variant", "type": { "text": "'default' | 'warning' | 'announcement'" }, "default": "'default'", "description": "The dialog's theme variant.", "fieldName": "variant" }, { "name": "size", "type": { "text": "'small' | 'medium' | 'large'" }, "default": "'medium'", "description": "The dialog's size.", "fieldName": "size" }, { "name": "type", "type": { "text": "'warning' | 'error' | 'success' | 'info'" }, "default": "'warning'", "description": "The dialogs type, which will determine the icon and color.", "fieldName": "type" }, { "name": "open", "type": { "text": "boolean" }, "default": "false", "description": "Indicated whether of not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the dialog's state.", "fieldName": "open" }, { "name": "caption", "type": { "text": "string" }, "default": "''", "fieldName": "caption" }, { "name": "action", "type": { "text": "string" }, "default": "''", "fieldName": "action" }, { "name": "content", "type": { "text": "string" }, "default": "''", "fieldName": "content" }, { "name": "confirmText", "type": { "text": "string" }, "default": "\"Confirm\"", "fieldName": "confirmText" }, { "name": "cancelText", "type": { "text": "string" }, "default": "\"Cancel\"", "fieldName": "cancelText" }, { "name": "hide-icon", "type": { "text": "boolean" }, "default": "false", "fieldName": "hideIcon" }, { "name": "show-loading", "type": { "text": "boolean" }, "default": "false", "description": "Show a loading state when the dialog is submitted.", "fieldName": "showLoading" }, { "name": "trigger", "type": { "text": "string" }, "description": "The dialog's trigger element. This is used to open the dialog when clicked. If you do not provide a trigger, you\nwill need to manually open the dialog using the `show()` method.", "fieldName": "trigger" }, { "name": "announcement", "type": { "text": "string" }, "default": "''", "description": "The Dialogs announcement text.", "fieldName": "announcement" }, { "name": "footer-text", "type": { "text": "string" }, "default": "''", "description": "The Dialogs footer text.", "fieldName": "footerText" } ], "superclass": { "name": "ZincElement", "module": "/src/internal/zinc-element" }, "summary": "Short summary of the component's intended use.", "tagNameWithoutPrefix": "confirm", "tagName": "zn-confirm", "customElement": true, "jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/confirm-modal\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-example\n *\n * @event zn-event-name - Emitted as an example.\n *\n * @slot - The default slot.\n * @slot example - An example slot.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --example - An example CSS custom property.\n */", "documentation": "https://zinc.style/components/confirm-modal", "status": "experimental", "since": "1.0", "dependencies": [ "zn-example" ] } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "ZnConfirm", "module": "components/confirm/confirm.js" } } ] }, { "kind": "javascript-module", "path": "components/content-block/content-block.js", "declarations": [ { "kind": "class", "description": "", "name": "ContentBlock", "cssParts": [ { "description": "The attachments row at the bottom of the content.", "name": "attachments" }, { "description": "The attachment count indicator in the header.", "name": "header-attachments" } ], "slots": [ { "description": "Attachments displayed at the bottom of the content when the block is expanded. Use `zn-chat-message-attachment`, which auto-assigns itself to this slot.", "name": "attachments" } ], "members": [ { "kind": "field", "name": "time", "type": { "text": "string" }, "default": "''", "attribute": "time" }, { "kind": "field", "name": "sender", "type": { "text": "string" }, "default": "''", "attribute": "sender" }, { "kind": "field", "name": "avatar", "type": { "text": "string" }, "default": "''", "attribute": "avatar" }, { "kind": "field", "name": "subject", "type": { "text": "string" }, "default": "''", "description": "The message subject, shown in the header after the sender.", "attribute": "subject" }, { "kind": "field", "name": "subjectPlaceholder", "type": { "text": "string" }, "default": "''", "description": "Placeholder shown dimmed in place of the subject when `subject` is empty\n(e.g. \"This message has no subject.\"). Omit both for content without a\nsubject line (e.g. notes).", "attribute": "subject-placeholder" }, { "kind": "field", "name": "outbound", "type": { "text": "boolean" }, "default": "false", "attribute": "outbound", "reflects": true }, { "kind": "field", "name": "noCollapse", "type": { "text": "boolean" }, "default": "false", "attribute": "no-collapse" }, { "kind": "field", "name": "short", "type": { "text": "boolean" }, "default": "false", "attribute": "short", "reflects": true }, { "kind": "field", "name": "defaultDisplay", "type": { "text": "'text' | 'html'" }, "default": "'text'", "attribute": "default-display", "reflects": true }, { "kind": "field", "name": "htmlNodes", "type": { "text": "Node[]" } }, { "kind": "field", "name": "iframe", "type": { "text": "Promise" } }, { "kind": "field", "name": "hasSlotController", "privacy": "private", "readonly": true, "default": "new HasSlotController(this, 'text', 'html')" }, { "kind": "field", "name": "attachmentCount", "type": { "text": "number" }, "privacy": "private", "default": "0" }, { "kind": "field", "name": "_textRows", "type": { "text": "TextRow[]" }, "privacy": "private", "default": "[]" }, { "kind": "field", "name": "_footerObserver", "privacy": "private", "readonly": true, "default": "new MutationController(this, { target: null, config: {subtree: true, childList: true, attributes: true, attributeFilter: ['href', 'download', 'caption']}, callback: () => this._debouncedReplace(), })" }, { "kind": "field", "name": "_replaceDebounce", "type": { "text": "number" }, "privacy": "private", "default": "0" }, { "kind": "method", "name": "_collapseContent", "privacy": "private", "parameters": [ { "name": "e", "type": { "text": "Event" } } ] }, { "kind": "method", "name": "_toggleText", "privacy": "private" }, { "kind": "method", "name": "_toggleHtml", "privacy": "private" }, { "kind": "method", "name": "_resizeIframe", "privacy": "private", "parameters": [ { "name": "iframe", "optional": true, "type": { "text": "HTMLIFrameElement" } } ] }, { "kind": "method", "name": "handleAttachmentsSlotChange", "privacy": "private" }, { "kind": "method", "name": "syncAttachmentCount", "privacy": "private" }, { "kind": "method", "name": "truncateText", "privacy": "protected" }, { "kind": "method", "name": "_handleSlotChange", "privacy": "private", "parameters": [ { "name": "e", "type": { "text": "Event" } } ] }, { "kind": "method", "name": "_debouncedReplace", "privacy": "private" }, { "kind": "method", "name": "_replaceImagePlaceholders", "privacy": "private" }, { "kind": "method", "name": "getTextSections", "privacy": "protected", "return": { "type": { "text": "TextRow[]" } } }, { "kind": "method", "name": "showReply", "parameters": [ { "name": "e", "type": { "text": "MouseEvent" } } ] } ], "attributes": [ { "name": "time", "type": { "text": "string" }, "default": "''", "fieldName": "time" }, { "name": "sender", "type": { "text": "string" }, "default": "''", "fieldName": "sender" }, { "name": "avatar", "type": { "text": "string" }, "default": "''", "fieldName": "avatar" }, { "name": "subject", "type": { "text": "string" }, "default": "''", "description": "The message subject, shown in the header after the sender.", "fieldName": "subject" }, { "name": "subject-placeholder", "type": { "text": "string" }, "default": "''", "description": "Placeholder shown dimmed in place of the subject when `subject` is empty\n(e.g. \"This message has no subject.\"). Omit both for content without a\nsubject line (e.g. notes).", "fieldName": "subjectPlaceholder" }, { "name": "outbound", "type": { "text": "boolean" }, "default": "false", "fieldName": "outbound" }, { "name": "no-collapse", "type": { "text": "boolean" }, "default": "false", "fieldName": "noCollapse" }, { "name": "short", "type": { "text": "boolean" }, "default": "false", "fieldName": "short" }, { "name": "default-display", "type": { "text": "'text' | 'html'" }, "default": "'text'", "fieldName": "defaultDisplay" } ], "superclass": { "name": "ZincElement", "module": "/src/internal/zinc-element" }, "summary": "Short summary of the component's intended use.", "tagNameWithoutPrefix": "content-block", "tagName": "zn-content-block", "customElement": true, "jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/content-block\n * @status experimental\n * @since 1.0\n *\n * @slot attachments - Attachments displayed at the bottom of the content when the block is\n * expanded. Use `zn-chat-message-attachment`, which auto-assigns itself to this slot.\n *\n * @csspart attachments - The attachments row at the bottom of the content.\n * @csspart header-attachments - The attachment count indicator in the header.\n */", "documentation": "https://zinc.style/components/content-block", "status": "experimental", "since": "1.0" } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "ContentBlock", "module": "components/content-block/content-block.js" } } ] }, { "kind": "javascript-module", "path": "components/copy-button/copy-button.js", "declarations": [ { "kind": "class", "description": "", "name": "ZnCopyButton", "cssProperties": [ { "description": "An example CSS custom property.", "name": "--example" } ], "cssParts": [ { "description": "The component's base wrapper.", "name": "base" } ], "slots": [ { "description": "The default slot.", "name": "" }, { "description": "An example slot.", "name": "example" } ], "members": [ { "kind": "field", "name": "copyIcon", "type": { "text": "HTMLSlotElement" } }, { "kind": "field", "name": "successIcon", "type": { "text": "HTMLSlotElement" } }, { "kind": "field", "name": "errorIcon", "type": { "text": "HTMLSlotElement" } }, { "kind": "field", "name": "tooltip", "type": { "text": "ZnTooltip" } }, { "kind": "field", "name": "isCopying", "type": { "text": "boolean" }, "default": "false" }, { "kind": "field", "name": "status", "type": { "text": "'rest' | 'success' | 'error'" }, "default": "'rest'" }, { "kind": "field", "name": "value", "type": { "text": "string" }, "default": "''", "attribute": "value" }, { "kind": "field", "name": "copyLabel", "type": { "text": "string" }, "default": "''", "attribute": "copy-label" }, { "kind": "field", "name": "src", "type": { "text": "string" }, "default": "''", "attribute": "src" }, { "kind": "field", "name": "size", "type": { "text": "number" }, "default": "24", "attribute": "size", "reflects": true }, { "kind": "field", "name": "from", "type": { "text": "string" }, "default": "''", "description": "An id that references an element in the same document from which data will be copied. If both this and `value` are\npresent, this value will take precedence. By default, the target element's `textContent` will be copied. To copy an\nattribute, append the attribute name wrapped in square brackets, e.g. `from=\"el[value]\"`. To copy a property,\nappend a dot and the property name, e.g. `from=\"el.value\"`.", "attribute": "from" }, { "kind": "method", "name": "showStatus", "privacy": "private", "parameters": [ { "name": "status", "type": { "text": "'success' | 'error'" } } ] }, { "kind": "method", "name": "handleCopy", "privacy": "private" } ], "events": [ { "description": "Emitted as an example.", "name": "zn-event-name" } ], "attributes": [ { "name": "value", "type": { "text": "string" }, "default": "''", "fieldName": "value" }, { "name": "copy-label", "type": { "text": "string" }, "default": "''", "fieldName": "copyLabel" }, { "name": "src", "type": { "text": "string" }, "default": "''", "fieldName": "src" }, { "name": "size", "type": { "text": "number" }, "default": "24", "fieldName": "size" }, { "name": "from", "type": { "text": "string" }, "default": "''", "description": "An id that references an element in the same document from which data will be copied. If both this and `value` are\npresent, this value will take precedence. By default, the target element's `textContent` will be copied. To copy an\nattribute, append the attribute name wrapped in square brackets, e.g. `from=\"el[value]\"`. To copy a property,\nappend a dot and the property name, e.g. `from=\"el.value\"`.", "fieldName": "from" } ], "superclass": { "name": "ZincElement", "module": "/src/internal/zinc-element" }, "summary": "Short summary of the component's intended use.", "tagNameWithoutPrefix": "copy-button", "tagName": "zn-copy-button", "customElement": true, "jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/copy-button\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-example\n *\n * @event zn-event-name - Emitted as an example.\n *\n * @slot - The default slot.\n * @slot example - An example slot.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --example - An example CSS custom property.\n */", "documentation": "https://zinc.style/components/copy-button", "status": "experimental", "since": "1.0", "dependencies": [ "zn-example" ] } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "ZnCopyButton", "module": "components/copy-button/copy-button.js" } } ] }, { "kind": "javascript-module", "path": "components/data-select/data-select.js", "declarations": [ { "kind": "class", "description": "", "name": "ZnDataSelect", "cssParts": [ { "description": "The container that wraps the prefix, combobox, clear icon, and expand button (forwarded from zn-select).", "name": "combobox" }, { "description": "The container that wraps the expand icon (forwarded from zn-select).", "name": "expand-icon" }, { "description": "The help text's wrapper (forwarded from zn-select).", "name": "form-control-help-text" }, { "description": "The select's wrapper (forwarded from zn-select).", "name": "form-control-input" }, { "description": "The element that displays the selected option's label (forwarded from zn-select).", "name": "display-input" } ], "slots": [ { "description": "The select's label. Alternatively, you can use the `label` attribute.", "name": "label" }, { "description": "Used to add text that is displayed in a tooltip next to the label. Alternatively, you can use the `label-tooltip` attribute.", "name": "label-tooltip" }, { "description": "Used to add contextual text that is displayed above the select, on the right. Alternatively, you can use the `context-note` attribute.", "name": "context-note" }, { "description": "Text that describes how to use the select. Alternatively, you can use the `help-text` attribute.", "name": "help-text" } ], "members": [ { "kind": "field", "name": "dependencies", "type": { "text": "object" }, "static": true, "default": "{ 'zn-select': ZnSelect, 'zn-option': ZnOption, }" }, { "kind": "field", "name": "select", "type": { "text": "ZnSelect" } }, { "kind": "field", "name": "name", "type": { "text": "string" }, "description": "The name of the select. Used for form submission.", "attribute": "name" }, { "kind": "field", "name": "value", "type": { "text": "string | string[]" }, "default": "''", "description": "The value of the select. Used for form submission. When `multiple` is enabled, this is an array of strings.", "attribute": "value" }, { "kind": "field", "name": "defaultValue", "type": { "text": "string | string[]" }, "default": "''", "description": "The default value of the form control. Primarily used for resetting the form control." }, { "kind": "field", "name": "provider", "type": { "text": "'color' | 'currency' | 'country' | 'phone' | 'us-state'" }, "description": "The provider of the select.", "attribute": "provider" }, { "kind": "field", "name": "iconPosition", "type": { "text": "'start' | 'end' | 'none'" }, "default": "'none'", "description": "The position of the icon.", "attribute": "icon-position" }, { "kind": "field", "name": "filter", "type": { "text": "string[]" }, "description": "An array of keys to use for filtering the options in the selected provider.", "attribute": "filter" }, { "kind": "field", "name": "size", "type": { "text": "'small' | 'medium' | 'large'" }, "default": "'medium'", "description": "The selects size.", "attribute": "size", "reflects": true }, { "kind": "field", "name": "clearable", "type": { "text": "boolean" }, "description": "Should we show the clear button", "attribute": "clearable" }, { "kind": "field", "name": "allowAll", "type": { "text": "boolean" }, "default": "false", "description": "Include an \"All\" option at the top.", "attribute": "allow-all" }, { "kind": "field", "name": "allowCommon", "type": { "text": "boolean" }, "default": "false", "description": "Include a \"Common\" option that selects multiple common currencies.", "attribute": "allow-common" }, { "kind": "field", "name": "label", "type": { "text": "string" }, "default": "''", "description": "The selects label. If you need to display HTML, use the `label` slot instead.", "attribute": "label" }, { "kind": "field", "name": "labelTooltip", "type": { "text": "string" }, "default": "''", "description": "Text that appears in a tooltip next to the label. If you need to display HTML in the tooltip, use the `label-tooltip` slot instead.", "attribute": "label-tooltip" }, { "kind": "field", "name": "contextNote", "type": { "text": "string" }, "default": "''", "description": "Text that appears above the input, on the right, to add additional context. If you need to display HTML in this text, use the `context-note` slot instead.", "attribute": "context-note" }, { "kind": "field", "name": "placement", "type": { "text": "'top' | 'bottom'" }, "default": "'bottom'", "description": "The preferred placement of the selects menu. Note that the actual placement may vary as needed to keep the listbox\ninside the viewport.", "attribute": "placement", "reflects": true }, { "kind": "field", "name": "helpText", "type": { "text": "string" }, "default": "''", "description": "The selects help text. If you need to display HTML, use the `help-text` slot instead.", "attribute": "help-text" }, { "kind": "field", "name": "required", "type": { "text": "boolean" }, "default": "false", "description": "The selects required attribute.", "attribute": "required", "reflects": true }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Disables the select.", "attribute": "disabled", "reflects": true }, { "kind": "field", "name": "iconOnly", "type": { "text": "boolean" }, "default": "false", "attribute": "icon-only", "reflects": true }, { "kind": "field", "name": "multiple", "type": { "text": "boolean" }, "default": "false", "attribute": "multiple" }, { "kind": "field", "name": "selectFirst", "type": { "text": "boolean" }, "default": "false", "attribute": "select-first" }, { "kind": "field", "name": "distinct", "type": { "text": "string" }, "default": "\"\"", "attribute": "distinct" }, { "kind": "field", "name": "conditional", "type": { "text": "string" }, "default": "\"\"", "attribute": "conditional" }, { "kind": "field", "name": "formControlController", "privacy": "protected", "readonly": true, "default": "new FormControlController(this)" }, { "kind": "field", "name": "selectObserver", "privacy": "private", "readonly": true, "default": "new MutationController(this, { target: null, config: {attributes: true, attributeFilter: ['disabled']}, callback: () => this._syncDisabledState(), })" }, { "kind": "field", "name": "validationMessage", "readonly": true }, { "kind": "field", "name": "validity", "type": { "text": "ValidityState" }, "readonly": true }, { "kind": "method", "name": "checkValidity", "return": { "type": { "text": "boolean" } } }, { "kind": "method", "name": "getForm", "return": { "type": { "text": "HTMLFormElement | null" } } }, { "kind": "method", "name": "reportValidity", "return": { "type": { "text": "boolean" } } }, { "kind": "method", "name": "setCustomValidity", "return": { "type": { "text": "void" } }, "parameters": [ { "name": "message", "type": { "text": "string" } } ] }, { "kind": "field", "name": "closeOnTab" }, { "kind": "method", "name": "handleValueChange" }, { "kind": "field", "name": "handleInput" }, { "kind": "field", "name": "handleClear" }, { "kind": "method", "name": "getLocalProvider", "return": { "type": { "text": "LocalDataProvider" } }, "parameters": [ { "name": "name", "type": { "text": "string" } } ] }, { "kind": "field", "name": "blur" }, { "kind": "method", "name": "_updatePrefix", "privacy": "private" }, { "kind": "method", "name": "_updateIconEmptyState", "privacy": "private" }, { "kind": "method", "name": "getPlaceholder", "privacy": "private", "parameters": [ { "name": "localProvider", "type": { "text": "LocalDataProvider" } } ] }, { "kind": "method", "name": "_observeSelectDisabled", "privacy": "private" }, { "kind": "method", "name": "_syncDisabledState", "privacy": "private" }, { "kind": "method", "name": "_normalizeValue", "privacy": "private" } ], "events": [ { "description": "Emitted when the select's value changes.", "name": "zn-input" }, { "description": "Emitted when the clear button is activated.", "name": "zn-clear" }, { "description": "Emitted when the select loses focus.", "name": "blur" } ], "attributes": [ { "name": "name", "type": { "text": "string" }, "description": "The name of the select. Used for form submission.", "fieldName": "name" }, { "name": "value", "type": { "text": "string | string[]" }, "default": "''", "description": "The value of the select. Used for form submission. When `multiple` is enabled, this is an array of strings.", "fieldName": "value" }, { "name": "provider", "type": { "text": "'color' | 'currency' | 'country' | 'phone' | 'us-state'" }, "description": "The provider of the select.", "fieldName": "provider" }, { "name": "icon-position", "type": { "text": "'start' | 'end' | 'none'" }, "default": "'none'", "description": "The position of the icon.", "fieldName": "iconPosition" }, { "name": "filter", "type": { "text": "string[]" }, "description": "An array of keys to use for filtering the options in the selected provider.", "fieldName": "filter" }, { "name": "size", "type": { "text": "'small' | 'medium' | 'large'" }, "default": "'medium'", "description": "The selects size.", "fieldName": "size" }, { "name": "clearable", "type": { "text": "boolean" }, "description": "Should we show the clear button", "fieldName": "clearable" }, { "name": "allow-all", "type": { "text": "boolean" }, "default": "false", "description": "Include an \"All\" option at the top.", "fieldName": "allowAll" }, { "name": "allow-common", "type": { "text": "boolean" }, "default": "false", "description": "Include a \"Common\" option that selects multiple common currencies.", "fieldName": "allowCommon" }, { "name": "label", "type": { "text": "string" }, "default": "''", "description": "The selects label. If you need to display HTML, use the `label` slot instead.", "fieldName": "label" }, { "name": "label-tooltip", "type": { "text": "string" }, "default": "''", "description": "Text that appears in a tooltip next to the label. If you need to display HTML in the tooltip, use the `label-tooltip` slot instead.", "fieldName": "labelTooltip" }, { "name": "context-note", "type": { "text": "string" }, "default": "''", "description": "Text that appears above the input, on the right, to add additional context. If you need to display HTML in this text, use the `context-note` slot instead.", "fieldName": "contextNote" }, { "name": "placement", "type": { "text": "'top' | 'bottom'" }, "default": "'bottom'", "description": "The preferred placement of the selects menu. Note that the actual placement may vary as needed to keep the listbox\ninside the viewport.", "fieldName": "placement" }, { "name": "help-text", "type": { "text": "string" }, "default": "''", "description": "The selects help text. If you need to display HTML, use the `help-text` slot instead.", "fieldName": "helpText" }, { "name": "required", "type": { "text": "boolean" }, "default": "false", "description": "The selects required attribute.", "fieldName": "required" }, { "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Disables the select.", "fieldName": "disabled" }, { "name": "icon-only", "type": { "text": "boolean" }, "default": "false", "fieldName": "iconOnly" }, { "name": "multiple", "type": { "text": "boolean" }, "default": "false", "fieldName": "multiple" }, { "name": "select-first", "type": { "text": "boolean" }, "default": "false", "fieldName": "selectFirst" }, { "name": "distinct", "type": { "text": "string" }, "default": "\"\"", "fieldName": "distinct" }, { "name": "conditional", "type": { "text": "string" }, "default": "\"\"", "fieldName": "conditional" } ], "superclass": { "name": "ZincElement", "module": "/src/internal/zinc-element" }, "summary": "A select component with built-in data providers for common options like colors, currencies, and countries.", "tagNameWithoutPrefix": "data-select", "tagName": "zn-data-select", "customElement": true, "jsDoc": "/**\n * @summary A select component with built-in data providers for common options like colors, currencies, and countries.\n * @documentation https://zinc.style/components/data-select\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-select\n * @dependency zn-option\n *\n * @event zn-input - Emitted when the select's value changes.\n * @event zn-clear - Emitted when the clear button is activated.\n * @event blur - Emitted when the select loses focus.\n *\n * @slot label - The select's label. Alternatively, you can use the `label` attribute.\n * @slot label-tooltip - Used to add text that is displayed in a tooltip next to the label. Alternatively, you can use the `label-tooltip` attribute.\n * @slot context-note - Used to add contextual text that is displayed above the select, on the right. Alternatively, you can use the `context-note` attribute.\n * @slot help-text - Text that describes how to use the select. Alternatively, you can use the `help-text` attribute.\n *\n * @csspart combobox - The container that wraps the prefix, combobox, clear icon, and expand button (forwarded from zn-select).\n * @csspart expand-icon - The container that wraps the expand icon (forwarded from zn-select).\n * @csspart form-control-help-text - The help text's wrapper (forwarded from zn-select).\n * @csspart form-control-input - The select's wrapper (forwarded from zn-select).\n * @csspart display-input - The element that displays the selected option's label (forwarded from zn-select).\n */", "documentation": "https://zinc.style/components/data-select", "status": "experimental", "since": "1.0", "dependencies": [ "zn-select", "zn-option" ] } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "ZnDataSelect", "module": "components/data-select/data-select.js" } } ] }, { "kind": "javascript-module", "path": "components/data-table/data-table.js", "declarations": [ { "kind": "class", "description": "", "name": "ZnDataTable", "cssProperties": [ { "description": "An example CSS custom property.", "name": "--example" } ], "cssParts": [ { "description": "The component's base wrapper.", "name": "base" } ], "slots": [ { "description": "The default slot.", "name": "" }, { "description": "Slot for search component.", "name": "search" }, { "description": "Slot for sort component.", "name": "sort" }, { "description": "Slot for filter component.", "name": "filter" }, { "description": "Slot for top-level filter component.", "name": "filter-top" }, { "description": "Slot for delete action button.", "name": "delete-action" }, { "description": "Slot for modify action button.", "name": "modify-action" }, { "description": "Slot for create action button.", "name": "create-action" }, { "description": "Slot for additional input controls.", "name": "inputs" }, { "description": "Slot for custom empty state.", "name": "empty-state" }, { "description": "Slot for a custom no-results state, shown when a search on a no-initial-load table returns no rows.", "name": "no-results" } ], "members": [ { "kind": "field", "name": "dependencies", "type": { "text": "object" }, "static": true, "default": "{ 'zn-alert': ZnAlert, 'zn-button': ZnButton, 'zn-empty-state': ZnEmptyState, 'zn-chip': ZnChip, 'zn-hover-container': ZnHoverContainer, 'zn-dropdown': ZnDropdown, 'zn-menu': ZnMenu, 'zn-menu-item': ZnMenuItem, 'zn-button-group': ZnButtonGroup, 'zn-confirm': ZnConfirm, 'zn-skeleton': ZnSkeleton, 'zn-style': ZnStyle, 'zn-data-table-search': ZnDataTableSearch, }" }, { "kind": "field", "name": "dataUri", "type": { "text": "string" }, "attribute": "data-uri" }, { "kind": "field", "name": "data", "type": { "text": "Row[] | Row" }, "default": "[]", "attribute": "data" }, { "kind": "field", "name": "sortColumn", "type": { "text": "string" }, "attribute": "sort-column" }, { "kind": "field", "name": "sortDirection", "type": { "text": "string" }, "default": "\"asc\"", "attribute": "sort-direction" }, { "kind": "field", "name": "localSort", "type": { "text": "boolean" }, "default": "false", "attribute": "local-sort" }, { "kind": "field", "name": "filter", "type": { "text": "string" }, "default": "''", "attribute": "filter" }, { "kind": "field", "name": "search", "type": { "text": "string" }, "default": "''", "attribute": "search" }, { "kind": "field", "name": "wideColumn", "type": { "text": "string" }, "attribute": "wide-column" }, { "kind": "field", "name": "key", "type": { "text": "string" }, "default": "'id'", "attribute": "key" }, { "kind": "field", "name": "headers", "type": { "text": "Record" }, "default": "{}", "attribute": "headers" }, { "kind": "field", "name": "displayTemplates", "type": { "text": "Record" }, "default": "{}" }, { "kind": "field", "name": "hiddenHeaders", "type": { "text": "string" }, "default": "'{}'", "attribute": "hide-headers" }, { "kind": "field", "name": "hiddenColumns", "type": { "text": "string" }, "default": "'{}'", "attribute": "hide-columns" }, { "kind": "field", "name": "unsortableHeaders", "type": { "text": "string" }, "default": "'{}'", "attribute": "unsortable-headers" }, { "kind": "field", "name": "unsortable", "type": { "text": "boolean" }, "default": "false", "attribute": "unsortable" }, { "kind": "field", "name": "hidePagination", "type": { "text": "boolean" }, "attribute": "hide-pagination" }, { "kind": "field", "name": "standalone", "type": { "text": "boolean" }, "default": "false", "attribute": "standalone" }, { "kind": "field", "name": "caption", "type": { "text": "string" }, "attribute": "caption" }, { "kind": "field", "name": "emptyStateCaption", "type": { "text": "string" }, "attribute": "empty-state-caption" }, { "kind": "field", "name": "emptyStateIcon", "type": { "text": "string" }, "default": "\"data_alert\"", "attribute": "empty-state-icon" }, { "kind": "field", "name": "hideCheckboxes", "type": { "text": "boolean" }, "attribute": "hide-checkboxes" }, { "kind": "field", "name": "filters", "type": { "text": "[]" }, "default": "[]", "attribute": "filters" }, { "kind": "field", "name": "method", "type": { "text": "'GET' | 'POST'" }, "default": "'POST'", "attribute": "method" }, { "kind": "field", "name": "noInitialLoad", "type": { "text": "boolean" }, "default": "false", "attribute": "no-initial-load" }, { "kind": "field", "name": "groupBy", "type": { "text": "string" }, "default": "''", "attribute": "group-by" }, { "kind": "field", "name": "groups", "type": { "text": "string" }, "default": "''", "attribute": "groups" }, { "kind": "field", "name": "itemsPerPage", "type": { "text": "number" }, "default": "10", "attribute": "per-page-size" }, { "kind": "field", "name": "selectAllButton", "type": { "text": "ZnButton" } }, { "kind": "field", "name": "_initialLoad", "type": { "text": "boolean" }, "privacy": "private", "default": "true" }, { "kind": "field", "name": "_hasLoadedData", "type": { "text": "boolean" }, "privacy": "private", "default": "false" }, { "kind": "field", "name": "_lastLoadHadRows", "type": { "text": "boolean" }, "privacy": "private", "default": "false" }, { "kind": "field", "name": "_lastTableContent", "type": { "text": "TemplateResult" }, "privacy": "private", "default": "html``" }, { "kind": "field", "name": "resizeObserver", "privacy": "private", "readonly": true, "default": "new ResizeController(this, { target: null, callback: () => { if (this.tableContainer) { this.tableContainer.scrollIntoView({behavior: 'smooth', block: 'nearest'}); } }, })" }, { "kind": "field", "name": "page", "type": { "text": "number" }, "privacy": "private", "default": "1" }, { "kind": "field", "name": "totalPages", "type": { "text": "number" }, "privacy": "private" }, { "kind": "field", "name": "_rows", "type": { "text": "any[]" }, "privacy": "private", "default": "[]" }, { "kind": "field", "name": "numberOfRowsSelected", "type": { "text": "number" }, "privacy": "private", "default": "0" }, { "kind": "field", "name": "selectedRows", "type": { "text": "any[]" }, "privacy": "private", "default": "[]" }, { "kind": "field", "name": "tableContainer", "type": { "text": "Element | undefined" }, "privacy": "private" }, { "kind": "field", "name": "hasSlotController", "privacy": "private", "default": "new HasSlotController( this, '[default]', ActionSlots.search.valueOf(), ActionSlots.delete.valueOf(), ActionSlots.modify.valueOf(), ActionSlots.create.valueOf(), ActionSlots.filter.valueOf(), ActionSlots.sort.valueOf(), ActionSlots.inputs.valueOf(), 'empty-state', 'no-results' )" }, { "kind": "field", "name": "_dataTask", "privacy": "private", "default": "new Task(this, { task: async ([dataUri, requestParams], {signal}) => { if (dataUri === undefined || this.noInitialLoad && this._initialLoad) { return {rows: [], page: 1, perPage: this.itemsPerPage, total: 0}; } if (this.groupBy) { // we want to load all the data possible so we can group and show multiple tables this.itemsPerPage = 1000; } const requestData: DataRequest = { page: this.page, perPage: this.itemsPerPage, sortColumn: this.sortColumn, sortDirection: this.sortDirection, filter: this.filter, search: this.search, }; // get all inputs that are in the inputs slot and add them to the const inputs = this.hasSlotController.getSlots(ActionSlots.inputs.valueOf()); const params: Record = {}; if (inputs) { inputs.forEach((input) => { const allowedInputs = ['zn-input', 'zn-select', 'zn-query-builder', 'zn-multiselect', 'zn-params-select', 'zn-datepicker', 'input', 'select', 'textarea']; if (allowedInputs.includes(input.tagName.toLowerCase())) { const value = (input as AllowedInputElement).value as string || input.getAttribute('value'); const name = (input as AllowedInputElement).name || input.getAttribute('name'); if (name) { params[name] = value; } } }); Object.assign(requestData, params); } // Add any extra request params if (requestParams && typeof requestParams === 'object') { Object.assign(requestData, requestParams); } // This is also used for Rubix, so it may not work for your application. const response = await fetch(dataUri, { method: this.method, headers: { 'x-kx-fetch-style': 'zn-data-table', }, signal, credentials: 'same-origin', body: this.method === 'POST' ? JSON.stringify(requestData) : undefined }); if (!response.ok) throw new Error(response.statusText); return response.json(); }, args: () => [this.dataUri, this.requestParams] })" }, { "kind": "field", "name": "rowHasActions", "type": { "text": "boolean" }, "privacy": "private", "default": "false" }, { "kind": "field", "name": "_expandedRows", "type": { "text": "Set" }, "privacy": "private", "default": "new Set()" }, { "kind": "field", "name": "_hiddenCells", "type": { "text": "Map" }, "privacy": "private", "default": "new Map()" }, { "kind": "field", "name": "_secondaryHeaders", "type": { "text": "HeaderConfig[]" }, "privacy": "private" }, { "kind": "field", "name": "_formatTemplates", "type": { "text": "Record" }, "privacy": "private", "default": "{ dateTime: ((cell) => { const t = cell.text || ''; return html`
${t.slice(0, 10)} ${t.slice(11)}
` }) satisfies DisplayTemplate }" }, { "kind": "field", "name": "requestParams", "type": { "text": "Record" }, "default": "{}" }, { "kind": "method", "name": "refresh" }, { "kind": "method", "name": "getTemplate", "privacy": "private", "return": { "type": { "text": "DisplayTemplate | undefined" } }, "parameters": [ { "name": "name", "type": { "text": "string" } } ] }, { "kind": "field", "name": "filterChangeListener" }, { "kind": "field", "name": "searchChangeListener" }, { "kind": "method", "name": "emptyState" }, { "kind": "method", "name": "renderTable", "parameters": [ { "name": "data", "type": { "text": "Response" } } ] }, { "kind": "method", "name": "renderErrorAlert", "privacy": "private", "parameters": [ { "name": "error", "type": { "text": "ResponseError" } } ] }, { "kind": "method", "name": "humanize", "privacy": "public", "parameters": [ { "name": "str", "type": { "text": "string" } } ] }, { "kind": "method", "name": "renderTableData", "privacy": "public", "parameters": [ { "name": "data", "type": { "text": "any" } }, { "name": "error", "optional": true, "type": { "text": "ResponseError" } } ] }, { "kind": "method", "name": "getTableHeader" }, { "kind": "method", "name": "getTableFooter" }, { "kind": "method", "name": "getRowsSelected" }, { "kind": "method", "name": "getRowsPerPage" }, { "kind": "method", "name": "getPageRange", "privacy": "private", "return": { "type": { "text": "(number | 'ellipsis')[]" } } }, { "kind": "method", "name": "getPagination" }, { "kind": "method", "name": "getActions" }, { "kind": "method", "name": "goToPage", "parameters": [ { "name": "page", "type": { "text": "number" } } ] }, { "kind": "method", "name": "goToFirstPage" }, { "kind": "method", "name": "goToPreviousPage" }, { "kind": "method", "name": "goToNextPage" }, { "kind": "method", "name": "goToLastPage" }, { "kind": "method", "name": "updateRowsPerPage", "parameters": [ { "name": "event", "type": { "text": "Event" } } ] }, { "kind": "method", "name": "selectAll", "parameters": [ { "name": "event", "type": { "text": "Event" } } ] }, { "kind": "method", "name": "selectRow", "parameters": [ { "name": "e", "type": { "text": "Event" } } ] }, { "kind": "method", "name": "clearSelectedRows", "parameters": [ { "name": "event", "type": { "text": "Event" } } ] }, { "kind": "method", "name": "updateSort", "parameters": [ { "name": "key", "type": { "text": "string" } } ] }, { "kind": "method", "name": "renderCell", "return": { "type": { "text": "TemplateResult | ZincElement" } }, "parameters": [ { "name": "data", "type": { "text": "Cell" } }, { "name": "row", "optional": true, "type": { "text": "Row" } }, { "name": "header", "optional": true, "type": { "text": "HeaderConfig" } } ] }, { "kind": "method", "name": "updateActionKeys", "privacy": "private", "parameters": [ { "name": "slotName", "type": { "text": "string" } } ] }, { "kind": "method", "name": "getTableSortIcon", "privacy": "private", "parameters": [ { "name": "key", "type": { "text": "any" } } ] }, { "kind": "method", "name": "renderCellHeader", "privacy": "private", "parameters": [ { "name": "header", "type": { "text": "HeaderConfig" } } ] }, { "kind": "method", "name": "renderCellBody", "privacy": "private", "parameters": [ { "name": "index", "type": { "text": "number" } }, { "name": "value", "type": { "text": "Cell" } }, { "name": "row", "type": { "text": "Row" } } ] }, { "kind": "method", "name": "hasHiddenColumns", "privacy": "private", "return": { "type": { "text": "boolean" } } }, { "kind": "method", "name": "renderExpanderCell", "privacy": "private", "parameters": [ { "name": "row", "type": { "text": "Row" } } ] }, { "kind": "method", "name": "renderDetailsRow", "privacy": "private", "parameters": [ { "name": "row", "type": { "text": "Row" } }, { "name": "colSpan", "type": { "text": "number" } } ] }, { "kind": "method", "name": "toggleRowExpansion", "privacy": "private", "parameters": [ { "name": "e", "type": { "text": "Event" } }, { "name": "row", "type": { "text": "Row" } } ] }, { "kind": "method", "name": "isRowSelected", "privacy": "private", "return": { "type": { "text": "boolean" } }, "parameters": [ { "name": "row", "type": { "text": "Row" } } ] }, { "kind": "method", "name": "getRows", "privacy": "private", "return": { "type": { "text": "Row[]" } }, "parameters": [ { "name": "data", "type": { "text": "Response" } } ] }, { "kind": "method", "name": "getSelectedKeys", "privacy": "private", "return": { "type": { "text": "(string)[]" } } }, { "kind": "method", "name": "updateKeys", "privacy": "private" }, { "kind": "method", "name": "updateSelectAll", "privacy": "private" }, { "kind": "method", "name": "updateModifyKeys", "privacy": "private" }, { "kind": "method", "name": "updateDeleteKeys", "privacy": "private" }, { "kind": "method", "name": "extractComparable", "privacy": "private", "return": { "type": { "text": "string" } }, "parameters": [ { "name": "cell", "type": { "text": "Cell" } } ] }, { "kind": "method", "name": "sortData", "privacy": "private", "parameters": [ { "name": "a", "type": { "text": "Cell" } }, { "name": "b", "type": { "text": "Cell" } } ] }, { "kind": "method", "name": "sortLocalData", "privacy": "private", "return": { "type": { "text": "Row[]" } }, "parameters": [ { "name": "rows", "type": { "text": "Row[]" } } ] }, { "kind": "method", "name": "loadingTable", "privacy": "private" }, { "kind": "method", "name": "renderActions", "privacy": "private", "parameters": [ { "name": "row", "type": { "text": "Row" } } ] } ], "attributes": [ { "name": "data-uri", "type": { "text": "string" }, "fieldName": "dataUri" }, { "name": "data", "type": { "text": "Row[] | Row" }, "default": "[]", "fieldName": "data" }, { "name": "sort-column", "type": { "text": "string" }, "fieldName": "sortColumn" }, { "name": "sort-direction", "type": { "text": "string" }, "default": "\"asc\"", "fieldName": "sortDirection" }, { "name": "local-sort", "type": { "text": "boolean" }, "default": "false", "fieldName": "localSort" }, { "name": "filter", "type": { "text": "string" }, "default": "''", "fieldName": "filter" }, { "name": "search", "type": { "text": "string" }, "default": "''", "fieldName": "search" }, { "name": "wide-column", "type": { "text": "string" }, "fieldName": "wideColumn" }, { "name": "key", "type": { "text": "string" }, "default": "'id'", "fieldName": "key" }, { "name": "headers", "type": { "text": "Record" }, "default": "{}", "fieldName": "headers" }, { "name": "hide-headers", "type": { "text": "string" }, "default": "'{}'", "fieldName": "hiddenHeaders" }, { "name": "hide-columns", "type": { "text": "string" }, "default": "'{}'", "fieldName": "hiddenColumns" }, { "name": "unsortable-headers", "type": { "text": "string" }, "default": "'{}'", "fieldName": "unsortableHeaders" }, { "name": "unsortable", "type": { "text": "boolean" }, "default": "false", "fieldName": "unsortable" }, { "name": "hide-pagination", "type": { "text": "boolean" }, "fieldName": "hidePagination" }, { "name": "standalone", "type": { "text": "boolean" }, "default": "false", "fieldName": "standalone" }, { "name": "caption", "type": { "text": "string" }, "fieldName": "caption" }, { "name": "empty-state-caption", "type": { "text": "string" }, "fieldName": "emptyStateCaption" }, { "name": "empty-state-icon", "type": { "text": "string" }, "default": "\"data_alert\"", "fieldName": "emptyStateIcon" }, { "name": "hide-checkboxes", "type": { "text": "boolean" }, "fieldName": "hideCheckboxes" }, { "name": "filters", "type": { "text": "[]" }, "default": "[]", "fieldName": "filters" }, { "name": "method", "type": { "text": "'GET' | 'POST'" }, "default": "'POST'", "fieldName": "method" }, { "name": "no-initial-load", "type": { "text": "boolean" }, "default": "false", "fieldName": "noInitialLoad" }, { "name": "group-by", "type": { "text": "string" }, "default": "''", "fieldName": "groupBy" }, { "name": "groups", "type": { "text": "string" }, "default": "''", "fieldName": "groups" }, { "name": "per-page-size", "type": { "text": "number" }, "default": "DEFAULT_PER_PAGE", "fieldName": "itemsPerPage" } ], "superclass": { "name": "ZincElement", "module": "/src/internal/zinc-element" }, "summary": "Short summary of the component's intended use.", "tagNameWithoutPrefix": "data-table", "tagName": "zn-data-table", "customElement": true, "jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/data-table\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-alert\n * @dependency zn-button\n * @dependency zn-empty-state\n * @dependency zn-chip\n * @dependency zn-hover-container\n * @dependency zn-dropdown\n * @dependency zn-menu\n * @dependency zn-menu-item\n * @dependency zn-button-group\n * @dependency zn-confirm\n * @dependency zn-skeleton\n * @dependency zn-data-table-search\n *\n * @slot - The default slot.\n * @slot search - Slot for search component.\n * @slot sort - Slot for sort component.\n * @slot filter - Slot for filter component.\n * @slot filter-top - Slot for top-level filter component.\n * @slot delete-action - Slot for delete action button.\n * @slot modify-action - Slot for modify action button.\n * @slot create-action - Slot for create action button.\n * @slot inputs - Slot for additional input controls.\n * @slot empty-state - Slot for custom empty state.\n * @slot no-results - Slot for a custom no-results state, shown when a search on a no-initial-load table returns no rows.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --example - An example CSS custom property.\n */", "documentation": "https://zinc.style/components/data-table", "status": "experimental", "since": "1.0", "dependencies": [ "zn-alert", "zn-button", "zn-empty-state", "zn-chip", "zn-hover-container", "zn-dropdown", "zn-menu", "zn-menu-item", "zn-button-group", "zn-confirm", "zn-skeleton", "zn-data-table-search" ] } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "ZnDataTable", "module": "components/data-table/data-table.js" } } ] }, { "kind": "javascript-module", "path": "components/data-table-filter/data-table-filter.js", "declarations": [ { "kind": "class", "description": "", "name": "ZnDataTableFilter", "cssProperties": [ { "description": "An example CSS custom property.", "name": "--example" } ], "cssParts": [ { "description": "The component's base wrapper.", "name": "base" } ], "slots": [ { "description": "The default slot.", "name": "" }, { "description": "An example slot.", "name": "example" } ], "members": [ { "kind": "field", "name": "_formController", "type": { "text": "FormControlController" }, "privacy": "private", "default": "new FormControlController(this, {})" }, { "kind": "field", "name": "filters", "type": { "text": "string" }, "default": "\"\"", "attribute": "filters" }, { "kind": "field", "name": "name", "type": { "text": "string" }, "default": "\"data-table-filter\"", "attribute": "name" }, { "kind": "field", "name": "value", "type": { "text": "string" }, "attribute": "value" }, { "kind": "field", "name": "validationMessage", "type": { "text": "string" }, "readonly": true }, { "kind": "field", "name": "validity", "type": { "text": "ValidityState" }, "readonly": true }, { "kind": "method", "name": "checkValidity", "return": { "type": { "text": "boolean" } } }, { "kind": "method", "name": "getForm", "return": { "type": { "text": "HTMLFormElement | null" } } }, { "kind": "method", "name": "reportValidity", "return": { "type": { "text": "boolean" } } }, { "kind": "method", "name": "setCustomValidity", "return": { "type": { "text": "void" } } }, { "kind": "field", "name": "handleQBClear" }, { "kind": "field", "name": "handleQBReset" }, { "kind": "field", "name": "handleQBUpdate" }, { "kind": "method", "name": "closeSlideout" } ], "events": [ { "description": "Emitted as an example.", "name": "zn-event-name" } ], "attributes": [ { "name": "filters", "type": { "text": "string" }, "default": "\"\"", "fieldName": "filters" }, { "name": "name", "type": { "text": "string" }, "default": "\"data-table-filter\"", "fieldName": "name" }, { "name": "value", "type": { "text": "string" }, "fieldName": "value" } ], "superclass": { "name": "ZincElement", "module": "/src/internal/zinc-element" }, "summary": "Short summary of the component's intended use.", "tagNameWithoutPrefix": "data-table-filter", "tagName": "zn-data-table-filter", "customElement": true, "jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/data-table-filter\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-example\n *\n * @event zn-event-name - Emitted as an example.\n *\n * @slot - The default slot.\n * @slot example - An example slot.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --example - An example CSS custom property.\n */", "documentation": "https://zinc.style/components/data-table-filter", "status": "experimental", "since": "1.0", "dependencies": [ "zn-example" ] } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "ZnDataTableFilter", "module": "components/data-table-filter/data-table-filter.js" } } ] }, { "kind": "javascript-module", "path": "components/data-table-search/data-table-search.js", "declarations": [ { "kind": "class", "description": "", "name": "ZnDataTableSearch", "cssParts": [ { "description": "The component's base wrapper.", "name": "base" } ], "slots": [ { "description": "The default slot for additional form inputs.", "name": "" } ], "members": [ { "kind": "field", "name": "dependencies", "type": { "text": "object" }, "static": true, "default": "{ 'zn-input': ZnInput, }" }, { "kind": "field", "name": "_formController", "type": { "text": "FormControlController" }, "privacy": "private", "default": "new FormControlController(this, {})" }, { "kind": "field", "name": "_searchTimeout", "type": { "text": "number | undefined" }, "privacy": "private" }, { "kind": "field", "name": "name", "type": { "text": "string" }, "default": "\"search\"", "description": "The name of the search input field (default: \"search\").", "attribute": "name" }, { "kind": "field", "name": "value", "type": { "text": "string" }, "default": "\"\"", "description": "The current search value.", "attribute": "value" }, { "kind": "field", "name": "placeholder", "type": { "text": "string" }, "default": "\"Search...\"", "description": "The placeholder text for the search input (default: \"Search...\").", "attribute": "placeholder" }, { "kind": "field", "name": "helpText", "type": { "text": "string" }, "default": "\"\"", "description": "Help text displayed below the search input.", "attribute": "help-text" }, { "kind": "field", "name": "searchUri", "type": { "text": "string" }, "description": "Optional URI to use for search operations.", "attribute": "search-uri" }, { "kind": "field", "name": "debounceDelay", "type": { "text": "number" }, "default": "350", "description": "The delay in milliseconds before triggering a search (default: 500).", "attribute": "debounce-delay" }, { "kind": "field", "name": "validationMessage", "type": { "text": "string" }, "readonly": true }, { "kind": "field", "name": "validity", "type": { "text": "ValidityState" }, "readonly": true }, { "kind": "method", "name": "checkValidity", "return": { "type": { "text": "boolean" } } }, { "kind": "method", "name": "getForm", "return": { "type": { "text": "HTMLFormElement | null" } } }, { "kind": "method", "name": "reportValidity", "return": { "type": { "text": "boolean" } } }, { "kind": "method", "name": "setCustomValidity", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "getFormData", "return": { "type": { "text": "Record" } }, "description": "Collects form data from slotted input elements" }, { "kind": "field", "name": "handleInput" }, { "kind": "field", "name": "handleClear" }, { "kind": "method", "name": "emitSearchChange", "privacy": "private", "description": "Emit the search change event with form data" } ], "events": [ { "description": "Emitted when the search value changes (debounced).", "name": "zn-search-change" } ], "attributes": [ { "name": "name", "type": { "text": "string" }, "default": "\"search\"", "description": "The name of the search input field (default: \"search\").", "fieldName": "name" }, { "name": "value", "type": { "text": "string" }, "default": "\"\"", "description": "The current search value.", "fieldName": "value" }, { "name": "placeholder", "type": { "text": "string" }, "default": "\"Search...\"", "description": "The placeholder text for the search input (default: \"Search...\").", "fieldName": "placeholder" }, { "name": "help-text", "type": { "text": "string" }, "default": "\"\"", "description": "Help text displayed below the search input.", "fieldName": "helpText" }, { "name": "search-uri", "type": { "text": "string" }, "description": "Optional URI to use for search operations.", "fieldName": "searchUri" }, { "name": "debounce-delay", "type": { "text": "number" }, "default": "350", "description": "The delay in milliseconds before triggering a search (default: 500).", "fieldName": "debounceDelay" } ], "superclass": { "name": "ZincElement", "module": "/src/internal/zinc-element" }, "summary": "A search component for data tables.", "tagNameWithoutPrefix": "data-table-search", "tagName": "zn-data-table-search", "customElement": true, "jsDoc": "/**\n * @summary A search component for data tables.\n * @documentation https://zinc.style/components/data-table-search\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-input\n *\n * @event zn-search-change - Emitted when the search value changes (debounced).\n *\n * @slot - The default slot for additional form inputs.\n *\n * @csspart base - The component's base wrapper.\n *\n * @property {string} name - The name of the search input field (default: \"search\").\n * @property {string} value - The current search value.\n * @property {string} placeholder - The placeholder text for the search input (default: \"Search...\").\n * @property {string} helpText - Help text displayed below the search input.\n * @property {string} searchUri - Optional URI to use for search operations.\n * @property {number} debounceDelay - The delay in milliseconds before triggering a search (default: 500).\n */", "documentation": "https://zinc.style/components/data-table-search", "status": "experimental", "since": "1.0", "dependencies": [ "zn-input" ] } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "ZnDataTableSearch", "module": "components/data-table-search/data-table-search.js" } } ] }, { "kind": "javascript-module", "path": "components/data-table-sort/data-table-sort.js", "declarations": [ { "kind": "class", "description": "", "name": "ZnDataTableSort", "cssProperties": [ { "description": "An example CSS custom property.", "name": "--example" } ], "cssParts": [ { "description": "The component's base wrapper.", "name": "base" } ], "slots": [ { "description": "The default slot.", "name": "" }, { "description": "An example slot.", "name": "example" } ], "members": [], "events": [ { "description": "Emitted as an example.", "name": "zn-event-name" } ], "superclass": { "name": "ZincElement", "module": "/src/internal/zinc-element" }, "summary": "Short summary of the component's intended use.", "tagNameWithoutPrefix": "data-table-sort", "tagName": "zn-data-table-sort", "customElement": true, "jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/data-table-sort\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-example\n *\n * @event zn-event-name - Emitted as an example.\n *\n * @slot - The default slot.\n * @slot example - An example slot.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --example - An example CSS custom property.\n */", "documentation": "https://zinc.style/components/data-table-sort", "status": "experimental", "since": "1.0", "dependencies": [ "zn-example" ] } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "ZnDataTableSort", "module": "components/data-table-sort/data-table-sort.js" } } ] }, { "kind": "javascript-module", "path": "components/datepicker/datepicker.js", "declarations": [ { "kind": "class", "description": "", "name": "ZnDatepicker", "cssProperties": [ { "description": "Inherited input component CSS custom properties.", "name": "--zn-input-*" } ], "cssParts": [ { "description": "The component's base wrapper.", "name": "base" }, { "description": "The form control wrapper.", "name": "form-control" }, { "description": "The label element.", "name": "form-control-label" }, { "description": "The input wrapper.", "name": "form-control-input" }, { "description": "The help text element.", "name": "form-control-help-text" } ], "slots": [ { "description": "The datepicker's label. Alternatively, you can use the `label` attribute.", "name": "label" }, { "description": "Tooltip content for the label. Alternatively, you can use the `label-tooltip` attribute.", "name": "label-tooltip" }, { "description": "Additional context text displayed above the input. Alternatively, you can use the `context-note` attribute.", "name": "context-note" }, { "description": "Help text displayed below the input. Alternatively, you can use the `help-text` attribute.", "name": "help-text" }, { "description": "Content to display before the input (in addition to the default calendar icon).", "name": "prefix" }, { "description": "Content to display after the input.", "name": "suffix" } ], "members": [ { "kind": "field", "name": "dependencies", "type": { "text": "object" }, "static": true, "default": "{ 'zn-icon': ZnIcon, 'zn-tooltip': ZnTooltip }" }, { "kind": "field", "name": "formControlController", "privacy": "private", "readonly": true, "default": "new FormControlController(this, { assumeInteractionOn: ['zn-blur', 'zn-input'] })" }, { "kind": "field", "name": "hasSlotController", "privacy": "private", "readonly": true, "default": "new HasSlotController(this, 'help-text', 'label', 'label-tooltip')" }, { "kind": "field", "name": "input", "type": { "text": "HTMLInputElement" } }, { "kind": "field", "name": "hasFocus", "type": { "text": "boolean" }, "privacy": "private", "default": "false" }, { "kind": "field", "name": "title", "type": { "text": "string" }, "default": "\"\"", "attribute": "title" }, { "kind": "field", "name": "name", "type": { "text": "string" }, "default": "\"\"", "description": "The name of the input, submitted as a name/value pair with form data.", "attribute": "name" }, { "kind": "field", "name": "value", "type": { "text": "any" }, "default": "''", "description": "The current value of the input, submitted as a name/value pair with form data.", "attribute": "value" }, { "kind": "field", "name": "defaultValue", "type": { "text": "string" }, "default": "''", "description": "The default value of the form control. Primarily used for resetting the form control." }, { "kind": "field", "name": "size", "type": { "text": "'small' | 'medium' | 'large'" }, "default": "'medium'", "description": "The inputs size *", "attribute": "size", "reflects": true }, { "kind": "field", "name": "label", "type": { "text": "string" }, "default": "''", "description": "The inputs label. If you need to display HTML, use the `label` slot. *", "attribute": "label" }, { "kind": "field", "name": "labelTooltip", "type": { "text": "string" }, "default": "''", "description": "Text that appears in a tooltip next to the label. If you need to display HTML in the tooltip, use the\n`label-tooltip` slot.\n*", "attribute": "label-tooltip" }, { "kind": "field", "name": "contextNote", "type": { "text": "string" }, "default": "''", "description": "Text that appears above the input, on the right, to add additional context. If you need to display HTML\nin this text, use the `context-note` slot instead", "attribute": "context-note" }, { "kind": "field", "name": "helpText", "type": { "text": "string" }, "default": "''", "description": "The input's help text. If you need to display HTML, use the `help-text` slot instead. *", "attribute": "help-text" }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Disables the input *", "attribute": "disabled", "reflects": true }, { "kind": "field", "name": "placeholder", "type": { "text": "string" }, "default": "''", "description": "Placeholder text to show as a hint when the input is empty.", "attribute": "placeholder" }, { "kind": "field", "name": "readonly", "type": { "text": "boolean" }, "default": "false", "description": "Makes the input read-only *", "attribute": "readonly", "reflects": true }, { "kind": "field", "name": "form", "type": { "text": "string" }, "description": "By default, form-controls are associated with the nearest containing `` element. This attribute allows you\nto place the form control outside a form and associate it with the form that has this `id`. The form must be\nin the same document or shadow root for this to work.", "attribute": "form", "reflects": true }, { "kind": "field", "name": "flush", "type": { "text": "boolean" }, "default": "false", "attribute": "flush", "reflects": true }, { "kind": "field", "name": "required", "type": { "text": "boolean" }, "default": "false", "description": "Makes the input a required field.", "attribute": "required", "reflects": true }, { "kind": "field", "name": "clearable", "type": { "text": "boolean" }, "default": "false", "description": "Adds a clear button to the calendar for removing a selected date. *", "attribute": "clearable" }, { "kind": "field", "name": "range", "type": { "text": "boolean" }, "default": "false", "description": "Makes the input a range picker. *", "attribute": "range" }, { "kind": "field", "name": "disablePastDates", "type": { "text": "boolean" }, "default": "false", "description": "Disallows selecting past dates. *", "attribute": "disable-past-dates" }, { "kind": "field", "name": "minDate", "type": { "text": "string | Date | undefined" }, "description": "Minimum date that can be selected. Overrides disable-past-dates if both are set. Accepts Date object or date string. *", "attribute": "min-date" }, { "kind": "field", "name": "maxDate", "type": { "text": "string | Date | undefined" }, "description": "Maximum date that can be selected. Accepts Date object or date string. *", "attribute": "max-date" }, { "kind": "field", "name": "format", "type": { "text": "string" }, "default": "'MM/dd/yyyy'", "description": "Date format using AirDatepicker tokens. Default: 'dd/MM/yyyy' Supported formats: - dd/MM/yyyy (31/12/2024) - Default - MM/dd/yyyy (12/31/2024) - yyyy-MM-dd (2024-12-31) - dd-MM-yyyy (31-12-2024) - yyyy/MM/dd (2024/12/31)", "attribute": "format" }, { "kind": "field", "name": "timePicker", "type": { "text": "boolean | undefined" }, "default": "false", "description": "Display time selector. *", "attribute": "time-picker", "reflects": true }, { "kind": "field", "name": "onlyTimepicker", "type": { "text": "boolean | undefined" }, "default": "false", "description": "Display only time selector, without date. *", "attribute": "only-time" }, { "kind": "field", "name": "timeFormat", "type": { "text": "string | undefined" }, "default": "\"hh:mm AA\"", "description": "Time format for display and input selector. Uses AirDatepicker format tokens.\nDefault : hh:mm AA\n\nPossible symbols:\nh — hours in 12-hour mode\nhh — hours in 12-hour mode with leading zero\nH — hours in 24-hour mode\nHH — hours in 24-hour mode with leading zero\nm — minutes\nmm — minutes with leading zero\naa — day period lower case\nAA — day period upper case", "attribute": "format-time" }, { "kind": "field", "name": "container", "type": { "text": "string | HTMLElement | undefined" }, "description": "Overrides where the calendar popup is mounted. By default it renders at the document level\n(or inside the containing dialog/popover) so it can't be clipped by ancestor shadow roots\nor overflow containers — you rarely need to set this.", "attribute": "container" }, { "kind": "field", "name": "_instance", "type": { "text": "AirDatepicker" }, "privacy": "private" }, { "kind": "field", "name": "timestamp", "type": { "text": "number" }, "readonly": true }, { "kind": "field", "name": "validity", "description": "Gets the validity state object", "readonly": true }, { "kind": "field", "name": "validationMessage", "description": "Gets the validation message", "readonly": true }, { "kind": "method", "name": "handleDisabledChange" }, { "kind": "method", "name": "handleValueChange" }, { "kind": "method", "name": "handleDatepickerOptionsChange" }, { "kind": "method", "name": "focus", "parameters": [ { "name": "options", "optional": true, "type": { "text": "FocusOptions" } } ], "description": "Sets focus on the input." }, { "kind": "method", "name": "blur", "description": "Removes focus from the input." }, { "kind": "method", "name": "select", "description": "Selects all the text in the input." }, { "kind": "method", "name": "checkValidity", "return": { "type": { "text": "boolean" } }, "description": "Checks the validity but does not show a validation message. Returns `true` when valid and `false` when invalid." }, { "kind": "method", "name": "getForm", "return": { "type": { "text": "HTMLFormElement | null" } }, "description": "Gets the associated form, if one exists." }, { "kind": "method", "name": "reportValidity", "description": "Checks for validity and shows the browser's validation message if the control is invalid." }, { "kind": "method", "name": "setCustomValidity", "parameters": [ { "name": "message", "type": { "text": "string" } } ], "description": "Sets a custom validation message. Pass an empty string to restore validity." }, { "kind": "method", "name": "init" }, { "kind": "method", "name": "getCalendarContainer", "privacy": "private", "return": { "type": { "text": "HTMLElement | undefined" } }, "description": "Resolves where the calendar should be mounted. By default AirDatepicker mounts it in a global\ncontainer on `document.body`, so ancestor shadow roots and overflow containers can't clip it.\nHowever, when the datepicker is inside a top-layer element (a modal `` or a popover),\na document-level calendar would render behind it and be inert, so we mount inside that element." }, { "kind": "method", "name": "findTopLayerAncestor", "privacy": "private", "return": { "type": { "text": "HTMLElement | null" } }, "description": "Finds the closest `` or popover ancestor, crossing shadow DOM boundaries." }, { "kind": "method", "name": "handleInput", "privacy": "private", "parameters": [ { "name": "event", "optional": true, "type": { "text": "InputEvent" } } ] }, { "kind": "method", "name": "handleChange", "privacy": "private" }, { "kind": "method", "name": "handleInvalid", "privacy": "private", "parameters": [ { "name": "event", "type": { "text": "Event" } } ] }, { "kind": "method", "name": "handleKeyDown", "privacy": "private", "parameters": [ { "name": "event", "type": { "text": "KeyboardEvent" } } ] }, { "kind": "method", "name": "handlePaste", "privacy": "private", "parameters": [ { "name": "event", "type": { "text": "ClipboardEvent" } } ] }, { "kind": "method", "name": "handleBlur", "privacy": "private" }, { "kind": "method", "name": "isValidDateString", "privacy": "private", "return": { "type": { "text": "boolean" } }, "parameters": [ { "name": "value", "type": { "text": "string" } } ] }, { "kind": "method", "name": "parseDate", "privacy": "private", "return": { "type": { "text": "Date | null" } }, "parameters": [ { "name": "value", "type": { "text": "string" } } ] }, { "kind": "method", "name": "parseDateString", "privacy": "private", "return": { "type": { "text": "{ day: number; month: number; year: number } | null" } }, "parameters": [ { "name": "value", "type": { "text": "string" } } ] }, { "kind": "method", "name": "isDateInRange", "privacy": "private", "return": { "type": { "text": "boolean" } }, "parameters": [ { "name": "date", "type": { "text": "Date" } } ] }, { "kind": "method", "name": "clearInvalidDate", "privacy": "private" }, { "kind": "method", "name": "getFormatSeparator", "privacy": "private", "return": { "type": { "text": "string" } } }, { "kind": "method", "name": "escapeRegex", "privacy": "private", "return": { "type": { "text": "string" } }, "parameters": [ { "name": "str", "type": { "text": "string" } } ] }, { "kind": "method", "name": "normalizeDate", "privacy": "private", "return": { "type": { "text": "Date" } }, "parameters": [ { "name": "date", "type": { "text": "Date" } } ] }, { "kind": "method", "name": "autoFormatDate", "privacy": "private", "return": { "type": { "text": "string" } }, "parameters": [ { "name": "value", "type": { "text": "string" } }, { "name": "separator", "type": { "text": "string" } } ] } ], "events": [ { "description": "Emitted when the date value changes.", "name": "zn-change" }, { "description": "Emitted when the input value changes.", "name": "zn-input" }, { "description": "Emitted when the input loses focus.", "name": "zn-blur" }, { "description": "Emitted when the input gains focus.", "name": "zn-focus" } ], "attributes": [ { "name": "title", "type": { "text": "string" }, "default": "\"\"", "fieldName": "title" }, { "name": "name", "type": { "text": "string" }, "default": "\"\"", "description": "The name of the input, submitted as a name/value pair with form data.", "fieldName": "name" }, { "name": "value", "type": { "text": "any" }, "default": "''", "description": "The current value of the input, submitted as a name/value pair with form data.", "fieldName": "value" }, { "name": "size", "type": { "text": "'small' | 'medium' | 'large'" }, "default": "'medium'", "description": "The inputs size *", "fieldName": "size" }, { "name": "label", "type": { "text": "string" }, "default": "''", "description": "The inputs label. If you need to display HTML, use the `label` slot. *", "fieldName": "label" }, { "name": "label-tooltip", "type": { "text": "string" }, "default": "''", "description": "Text that appears in a tooltip next to the label. If you need to display HTML in the tooltip, use the\n`label-tooltip` slot.\n*", "fieldName": "labelTooltip" }, { "name": "context-note", "type": { "text": "string" }, "default": "''", "description": "Text that appears above the input, on the right, to add additional context. If you need to display HTML\nin this text, use the `context-note` slot instead", "fieldName": "contextNote" }, { "name": "help-text", "type": { "text": "string" }, "default": "''", "description": "The input's help text. If you need to display HTML, use the `help-text` slot instead. *", "fieldName": "helpText" }, { "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Disables the input *", "fieldName": "disabled" }, { "name": "placeholder", "type": { "text": "string" }, "default": "''", "description": "Placeholder text to show as a hint when the input is empty.", "fieldName": "placeholder" }, { "name": "readonly", "type": { "text": "boolean" }, "default": "false", "description": "Makes the input read-only *", "fieldName": "readonly" }, { "name": "form", "type": { "text": "string" }, "description": "By default, form-controls are associated with the nearest containing `` element. This attribute allows you\nto place the form control outside a form and associate it with the form that has this `id`. The form must be\nin the same document or shadow root for this to work.", "fieldName": "form" }, { "name": "flush", "type": { "text": "boolean" }, "default": "false", "fieldName": "flush" }, { "name": "required", "type": { "text": "boolean" }, "default": "false", "description": "Makes the input a required field.", "fieldName": "required" }, { "name": "clearable", "type": { "text": "boolean" }, "default": "false", "description": "Adds a clear button to the calendar for removing a selected date. *", "fieldName": "clearable" }, { "name": "range", "type": { "text": "boolean" }, "default": "false", "description": "Makes the input a range picker. *", "fieldName": "range" }, { "name": "disable-past-dates", "type": { "text": "boolean" }, "default": "false", "description": "Disallows selecting past dates. *", "fieldName": "disablePastDates" }, { "name": "min-date", "type": { "text": "string | Date | undefined" }, "description": "Minimum date that can be selected. Overrides disable-past-dates if both are set. Accepts Date object or date string. *", "fieldName": "minDate" }, { "name": "max-date", "type": { "text": "string | Date | undefined" }, "description": "Maximum date that can be selected. Accepts Date object or date string. *", "fieldName": "maxDate" }, { "name": "format", "type": { "text": "string" }, "default": "'MM/dd/yyyy'", "description": "Date format using AirDatepicker tokens. Default: 'dd/MM/yyyy' Supported formats: - dd/MM/yyyy (31/12/2024) - Default - MM/dd/yyyy (12/31/2024) - yyyy-MM-dd (2024-12-31) - dd-MM-yyyy (31-12-2024) - yyyy/MM/dd (2024/12/31)", "fieldName": "format" }, { "name": "time-picker", "type": { "text": "boolean | undefined" }, "default": "false", "description": "Display time selector. *", "fieldName": "timePicker" }, { "name": "only-time", "type": { "text": "boolean | undefined" }, "default": "false", "description": "Display only time selector, without date. *", "fieldName": "onlyTimepicker" }, { "name": "format-time", "type": { "text": "string | undefined" }, "default": "\"hh:mm AA\"", "description": "Time format for display and input selector. Uses AirDatepicker format tokens.\nDefault : hh:mm AA\n\nPossible symbols:\nh — hours in 12-hour mode\nhh — hours in 12-hour mode with leading zero\nH — hours in 24-hour mode\nHH — hours in 24-hour mode with leading zero\nm — minutes\nmm — minutes with leading zero\naa — day period lower case\nAA — day period upper case", "fieldName": "timeFormat" }, { "name": "container", "type": { "text": "string | HTMLElement | undefined" }, "description": "Overrides where the calendar popup is mounted. By default it renders at the document level\n(or inside the containing dialog/popover) so it can't be clipped by ancestor shadow roots\nor overflow containers — you rarely need to set this.", "fieldName": "container" } ], "superclass": { "name": "ZincElement", "module": "/src/internal/zinc-element" }, "summary": "A date picker component with calendar popup and input validation.", "tagNameWithoutPrefix": "datepicker", "tagName": "zn-datepicker", "customElement": true, "jsDoc": "/**\n * @summary A date picker component with calendar popup and input validation.\n * @documentation https://zinc.style/components/datepicker\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-icon\n * @dependency zn-tooltip\n *\n * @event zn-change - Emitted when the date value changes.\n * @event zn-input - Emitted when the input value changes.\n * @event zn-blur - Emitted when the input loses focus.\n * @event zn-focus - Emitted when the input gains focus.\n *\n * @slot label - The datepicker's label. Alternatively, you can use the `label` attribute.\n * @slot label-tooltip - Tooltip content for the label. Alternatively, you can use the `label-tooltip` attribute.\n * @slot context-note - Additional context text displayed above the input. Alternatively, you can use the `context-note` attribute.\n * @slot help-text - Help text displayed below the input. Alternatively, you can use the `help-text` attribute.\n * @slot prefix - Content to display before the input (in addition to the default calendar icon).\n * @slot suffix - Content to display after the input.\n *\n * @csspart base - The component's base wrapper.\n * @csspart form-control - The form control wrapper.\n * @csspart form-control-label - The label element.\n * @csspart form-control-input - The input wrapper.\n * @csspart form-control-help-text - The help text element.\n *\n * @property format - Date format using AirDatepicker tokens. Default: 'dd/MM/yyyy'\n * Supported formats:\n * - dd/MM/yyyy (31/12/2024) - Default\n * - MM/dd/yyyy (12/31/2024)\n * - yyyy-MM-dd (2024-12-31)\n * - dd-MM-yyyy (31-12-2024)\n * - yyyy/MM/dd (2024/12/31)\n *\n * @cssproperty --zn-input-* - Inherited input component CSS custom properties.\n */", "documentation": "https://zinc.style/components/datepicker", "status": "experimental", "since": "1.0", "dependencies": [ "zn-icon", "zn-tooltip" ] } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "ZnDatepicker", "module": "components/datepicker/datepicker.js" } } ] }, { "kind": "javascript-module", "path": "components/defined-label/defined-label.js", "declarations": [ { "kind": "class", "description": "", "name": "ZnDefinedLabel", "cssParts": [ { "description": "The component's main input.", "name": "input" }, { "description": "The label's value inputs.", "name": "input-value" } ], "members": [ { "kind": "field", "name": "dependencies", "type": { "text": "object" }, "static": true, "default": "{ 'zn-button': ZnButton, 'zn-dropdown': ZnDropdown, 'zn-input': ZnInput, 'zn-option': ZnOption, 'zn-select': ZnSelect }" }, { "kind": "field", "name": "formControlController", "privacy": "private", "readonly": true, "default": "new FormControlController(this, { value: (control: this) => control.value + (control.inputValue ? `:${control.inputValue}` : ''), })" }, { "kind": "field", "name": "input", "type": { "text": "ZnInput" } }, { "kind": "field", "name": "dropdown", "type": { "text": "ZnDropdown" } }, { "kind": "field", "name": "value", "type": { "text": "string" }, "default": "''", "description": "The selected label key. Also acts as the filter while typing.", "attribute": "value" }, { "kind": "field", "name": "inputValue", "type": { "text": "string" }, "default": "''", "description": "The value entered for the selected label. Submitted as `label:value` when present.", "attribute": "inputValue" }, { "kind": "field", "name": "inputSize", "type": { "text": "'x-small' | 'small' | 'medium' | 'large'" }, "default": "'medium'", "description": "The size of the main input.", "attribute": "input-size", "reflects": true }, { "kind": "field", "name": "name", "type": { "text": "string" }, "default": "'label'", "description": "The name of the control. Used for form submission.", "attribute": "name" }, { "kind": "field", "name": "title", "type": { "text": "string" }, "description": "The title of the main input.", "attribute": "title" }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Disables the control.", "attribute": "disabled" }, { "kind": "field", "name": "allowCustom", "type": { "text": "boolean" }, "default": "false", "description": "Allows labels that aren't in the predefined list.", "attribute": "allow-custom" }, { "kind": "field", "name": "predefinedLabels", "type": { "text": "(PredefinedLabel | string)[]" }, "default": "[]", "description": "The predefined labels. Entries are either a string or `{name, options}`.", "attribute": "predefined-labels" }, { "kind": "field", "name": "validationMessage", "readonly": true }, { "kind": "field", "name": "validity", "readonly": true }, { "kind": "method", "name": "checkValidity", "return": { "type": { "text": "boolean" } } }, { "kind": "method", "name": "getForm", "return": { "type": { "text": "HTMLFormElement | null" } } }, { "kind": "method", "name": "reportValidity", "return": { "type": { "text": "boolean" } } }, { "kind": "method", "name": "setCustomValidity", "return": { "type": { "text": "void" } }, "parameters": [ { "name": "message", "type": { "text": "string" } } ] }, { "kind": "method", "name": "handleValueChange" }, { "kind": "method", "name": "getFilteredLabels", "privacy": "private", "return": { "type": { "text": "PredefinedLabel[]" } } }, { "kind": "method", "name": "handleChange", "privacy": "private" }, { "kind": "method", "name": "handleInput", "privacy": "private" }, { "kind": "method", "name": "handleClick", "privacy": "private", "parameters": [ { "name": "e", "type": { "text": "MouseEvent" } } ] }, { "kind": "method", "name": "handleInputValueChange", "privacy": "private", "parameters": [ { "name": "e", "type": { "text": "Event" } } ] }, { "kind": "method", "name": "handleFormSubmit", "privacy": "private", "parameters": [ { "name": "e", "type": { "text": "Event" } }, { "name": "label", "type": { "text": "string" } } ] }, { "kind": "method", "name": "renderValueControl", "privacy": "private", "return": { "type": { "text": "TemplateResult" } }, "parameters": [ { "name": "label", "type": { "text": "PredefinedLabel" } } ] }, { "kind": "method", "name": "renderRow", "privacy": "private", "return": { "type": { "text": "TemplateResult" } }, "parameters": [ { "name": "label", "type": { "text": "string" } }, { "name": "control", "type": { "text": "TemplateResult" } } ] } ], "attributes": [ { "name": "value", "type": { "text": "string" }, "default": "''", "description": "The selected label key. Also acts as the filter while typing.", "fieldName": "value" }, { "name": "inputValue", "type": { "text": "string" }, "default": "''", "description": "The value entered for the selected label. Submitted as `label:value` when present.", "fieldName": "inputValue" }, { "name": "input-size", "type": { "text": "'x-small' | 'small' | 'medium' | 'large'" }, "default": "'medium'", "description": "The size of the main input.", "fieldName": "inputSize" }, { "name": "name", "type": { "text": "string" }, "default": "'label'", "description": "The name of the control. Used for form submission.", "fieldName": "name" }, { "name": "title", "type": { "text": "string" }, "description": "The title of the main input.", "fieldName": "title" }, { "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Disables the control.", "fieldName": "disabled" }, { "name": "allow-custom", "type": { "text": "boolean" }, "default": "false", "description": "Allows labels that aren't in the predefined list.", "fieldName": "allowCustom" }, { "name": "predefined-labels", "type": { "text": "(PredefinedLabel | string)[]" }, "default": "[]", "description": "The predefined labels. Entries are either a string or `{name, options}`.", "fieldName": "predefinedLabels" } ], "superclass": { "name": "ZincElement", "module": "/src/internal/zinc-element" }, "summary": "This component provides a labeled input with support for predefined and custom labels,\nallowing users to select or enter label-value pairs within a dropdown interface.", "tagNameWithoutPrefix": "defined-label", "tagName": "zn-defined-label", "customElement": true, "jsDoc": "/**\n * @summary This component provides a labeled input with support for predefined and custom labels,\n * allowing users to select or enter label-value pairs within a dropdown interface.\n * @documentation https://zinc.style/components/defined-label\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-button\n * @dependency zn-dropdown\n * @dependency zn-input\n * @dependency zn-option\n * @dependency zn-select\n *\n * @csspart input - The component's main input.\n * @csspart input-value - The label's value inputs.\n */", "documentation": "https://zinc.style/components/defined-label", "status": "experimental", "since": "1.0", "dependencies": [ "zn-button", "zn-dropdown", "zn-input", "zn-option", "zn-select" ] } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "ZnDefinedLabel", "module": "components/defined-label/defined-label.js" } } ] }, { "kind": "javascript-module", "path": "components/dialog/dialog.js", "declarations": [ { "kind": "class", "description": "", "name": "ZnDialog", "cssProperties": [ { "description": "The preferred width of the dialog. Note the dialog will shrink to accommodate smaller screens.", "name": "--width" }, { "description": "The amount of padding to use for the header.", "name": "--header-spacing" }, { "description": "The amount of padding to use for the body.", "name": "--body-spacing" }, { "description": "The amount of padding to use for the footer.", "name": "--footer-spacing" } ], "cssParts": [ { "description": "The component's base wrapper.", "name": "base" }, { "description": "The dialog's header. This element wraps the title and header actions.", "name": "header" }, { "description": "Optional actions to add to the header. Works best with `` elements.", "name": "header-actions" }, { "description": "The dialog's title.", "name": "title" }, { "description": "The dialog's close button.", "name": "close-button" }, { "description": "The close buttons exported `base` part.", "name": "close-button__base" }, { "description": "The dialog's body.", "name": "body" }, { "description": "The dialog's footer.", "name": "footer" } ], "slots": [ { "description": "The default slot.", "name": "" }, { "description": "The dialog's label. Alternatively you can use the `label` attribute.", "name": "label" }, { "description": "Optional icon to add to the left of the dialog's label (title). A color will be applied to the icon depending on the dialog variant.", "name": "header-icon" }, { "description": "Optional Intro text to display below the icon, when using the variant `announcement`.", "name": "announcement-intro" }, { "description": "Optional actions to add to the header. Works best with `` elements.", "name": "header-actions" }, { "description": "The dialog's footer. This is typically used for buttons representing various options.", "name": "footer" }, { "description": "Optional text to include below the footer buttons, when using the variant `announcement`.", "name": "footer-text" } ], "members": [ { "kind": "field", "name": "dependencies", "type": { "text": "object" }, "static": true, "default": "{ 'zn-button': ZnButton }" }, { "kind": "field", "name": "hasSlotController", "privacy": "private", "readonly": true, "default": "new HasSlotController(this, '[default]', 'footer')" }, { "kind": "field", "name": "closeWatcher", "type": { "text": "CloseWatcher | null" }, "privacy": "private" }, { "kind": "field", "name": "dialog", "type": { "text": "HTMLDialogElement" } }, { "kind": "field", "name": "closer", "type": { "text": "HTMLButtonElement" } }, { "kind": "field", "name": "variant", "type": { "text": "'default' | 'warning' | 'announcement'" }, "default": "'default'", "description": "The dialog's theme variant.", "attribute": "variant", "reflects": true }, { "kind": "field", "name": "size", "type": { "text": "'small' | 'medium' | 'large' | 'custom'" }, "default": "'medium'", "description": "The dialog's size.", "attribute": "size", "reflects": true }, { "kind": "field", "name": "open", "type": { "text": "boolean" }, "default": "false", "description": "Indicated whether of not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the dialog's state.", "attribute": "open", "reflects": true }, { "kind": "field", "name": "label", "type": { "text": "string" }, "description": "The dialog's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.", "attribute": "label", "reflects": true }, { "kind": "field", "name": "cosmic", "type": { "text": "boolean" }, "default": "false", "attribute": "cosmic", "reflects": true }, { "kind": "field", "name": "noHeader", "type": { "text": "boolean" }, "default": "false", "description": "Disables the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way to close the dialog.", "attribute": "no-header", "reflects": true }, { "kind": "field", "name": "trigger", "type": { "text": "string" }, "description": "The dialog's trigger element. This is used to open the dialog when clicked. If you do not provide a trigger, you\nwill need to manually open the dialog using the `show()` method.", "attribute": "trigger", "reflects": true }, { "kind": "method", "name": "requestClose", "privacy": "private", "parameters": [ { "name": "source", "type": { "text": "'close-button' | 'keyboard' | 'overlay'" } } ] }, { "kind": "method", "name": "addOpenListeners", "privacy": "private" }, { "kind": "method", "name": "removeOpenListeners", "privacy": "private" }, { "kind": "method", "name": "show", "description": "Shows the dialog." }, { "kind": "method", "name": "hide", "description": "Hides the dialog." }, { "kind": "field", "name": "closeClickHandler", "privacy": "private" } ], "events": [ { "description": "Emitted when the dialog is opens.", "name": "zn-show" }, { "description": "Emitted when the dialog is closed.", "name": "zn-close" }, { "type": { "text": "{ source: 'close-button' | 'keyboard' | 'overlay' }" }, "description": "Emitted when the user attempts to close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in destructive behavior such as data loss.", "name": "zn-request-close" } ], "attributes": [ { "name": "variant", "type": { "text": "'default' | 'warning' | 'announcement'" }, "default": "'default'", "description": "The dialog's theme variant.", "fieldName": "variant" }, { "name": "size", "type": { "text": "'small' | 'medium' | 'large' | 'custom'" }, "default": "'medium'", "description": "The dialog's size.", "fieldName": "size" }, { "name": "open", "type": { "text": "boolean" }, "default": "false", "description": "Indicated whether of not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the dialog's state.", "fieldName": "open" }, { "name": "label", "type": { "text": "string" }, "description": "The dialog's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.", "fieldName": "label" }, { "name": "cosmic", "type": { "text": "boolean" }, "default": "false", "fieldName": "cosmic" }, { "name": "no-header", "type": { "text": "boolean" }, "default": "false", "description": "Disables the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way to close the dialog.", "fieldName": "noHeader" }, { "name": "trigger", "type": { "text": "string" }, "description": "The dialog's trigger element. This is used to open the dialog when clicked. If you do not provide a trigger, you\nwill need to manually open the dialog using the `show()` method.", "fieldName": "trigger" } ], "superclass": { "name": "ZincElement", "module": "/src/internal/zinc-element" }, "summary": "Short summary of the component's intended use.", "tagNameWithoutPrefix": "dialog", "tagName": "zn-dialog", "customElement": true, "jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/dialog\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-button\n *\n * @event zn-show - Emitted when the dialog is opens.\n * @event zn-close - Emitted when the dialog is closed.\n * @event {{ source: 'close-button' | 'keyboard' | 'overlay' }} zn-request-close - Emitted when the user attempts to\n * close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling\n * `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in\n * destructive behavior such as data loss.\n *\n * @slot - The default slot.\n * @slot label - The dialog's label. Alternatively you can use the `label` attribute.\n * @slot header-icon - Optional icon to add to the left of the dialog's label (title). A color will be applied\n * to the icon depending on the dialog variant.\n * @slot announcement-intro - Optional Intro text to display below the icon, when using the variant `announcement`.\n * @slot header-actions - Optional actions to add to the header. Works best with `` elements.\n * @slot footer - The dialog's footer. This is typically used for buttons representing various options.\n * @slot footer-text - Optional text to include below the footer buttons, when using the variant `announcement`.\n *\n * @csspart base - The component's base wrapper.\n * @csspart header - The dialog's header. This element wraps the title and header actions.\n * @csspart header-actions - Optional actions to add to the header. Works best with `` elements.\n * @csspart title - The dialog's title.\n * @csspart close-button - The dialog's close button.\n * @csspart close-button__base - The close buttons exported `base` part.\n * @csspart body - The dialog's body.\n * @csspart footer - The dialog's footer.\n *\n * @cssproperty --width - The preferred width of the dialog. Note the dialog will shrink to accommodate smaller screens.\n * @cssproperty --header-spacing - The amount of padding to use for the header.\n * @cssproperty --body-spacing - The amount of padding to use for the body.\n * @cssproperty --footer-spacing - The amount of padding to use for the footer.\n */", "documentation": "https://zinc.style/components/dialog", "status": "experimental", "since": "1.0", "dependencies": [ "zn-button" ] } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "ZnDialog", "module": "components/dialog/dialog.js" } } ] }, { "kind": "javascript-module", "path": "components/dropdown/dropdown.js", "declarations": [ { "kind": "class", "description": "", "name": "ZnDropdown", "cssProperties": [ { "description": "An example CSS custom property.", "name": "--example" } ], "cssParts": [ { "description": "The component's base wrapper.", "name": "base" } ], "slots": [ { "description": "The default slot.", "name": "" }, { "description": "An example slot.", "name": "example" } ], "members": [ { "kind": "field", "name": "popup", "type": { "text": "ZnPopup" } }, { "kind": "field", "name": "trigger", "type": { "text": "HTMLSlotElement" } }, { "kind": "field", "name": "panel", "type": { "text": "HTMLSlotElement" } }, { "kind": "field", "name": "closeWatcher", "type": { "text": "CloseWatcher | null" }, "privacy": "private" }, { "kind": "field", "name": "open", "type": { "text": "boolean" }, "default": "false", "description": "Indicates whether the dropdown is open", "attribute": "open", "reflects": true }, { "kind": "field", "name": "placement", "type": { "text": "'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' |\n 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'" }, "default": "'bottom-start'", "description": "The placement of the dropdown. Note the actual placement may vary based on the available space", "attribute": "placement", "reflects": true }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Disable the dropdown", "attribute": "disabled", "reflects": true }, { "kind": "field", "name": "stayOpenOnSelect", "type": { "text": "boolean" }, "default": "false", "description": "By default, the dropdown will close when an item is selected. Set this to true to keep the dropdown open", "attribute": "stay-open-on-select", "reflects": true }, { "kind": "field", "name": "containingElement", "type": { "text": "HTMLElement | undefined" }, "description": "The dropdown will close when the user interacts outside the element*" }, { "kind": "field", "name": "distance", "type": { "text": "number" }, "default": "0", "description": "The distance in pixels from which to offset the panel away from the trigger", "attribute": "distance" }, { "kind": "field", "name": "skidding", "type": { "text": "number" }, "default": "0", "description": "The distance in pixels from which to offset the panel away from the trigger", "attribute": "skidding" }, { "kind": "field", "name": "hoist", "type": { "text": "boolean" }, "default": "true", "description": "Enable this option if the parent is overflow hidden and the dropdown is not visible", "attribute": "hoist" }, { "kind": "field", "name": "sync", "type": { "text": "'width' | 'height' | 'both' | undefined" }, "default": "undefined", "description": "Syncs the popup width or height with the trigger element", "attribute": "sync", "reflects": true }, { "kind": "field", "name": "uri", "type": { "text": "string" }, "attribute": "uri" }, { "kind": "field", "name": "fetchedContent", "type": { "text": "string" }, "default": "''", "attribute": "fetchedContent" }, { "kind": "method", "name": "focusOnTrigger", "privacy": "public" }, { "kind": "method", "name": "getMenu", "privacy": "private" }, { "kind": "method", "name": "addOpenListeners", "privacy": "private" }, { "kind": "method", "name": "removeOpenListeners", "privacy": "private" }, { "kind": "field", "name": "handlePanelSelect", "description": "Events" }, { "kind": "method", "name": "preloadContent", "privacy": "private" }, { "kind": "field", "name": "handlePreload", "privacy": "private" }, { "kind": "method", "name": "handleTriggerClick" }, { "kind": "method", "name": "handleKeyDown", "parameters": [ { "name": "event", "type": { "text": "KeyboardEvent" } } ] }, { "kind": "method", "name": "handleTriggerKeyDown", "privacy": "private", "parameters": [ { "name": "event", "type": { "text": "KeyboardEvent" } } ] }, { "kind": "method", "name": "handleTriggerKeyUp", "privacy": "private", "parameters": [ { "name": "event", "type": { "text": "KeyboardEvent" } } ] }, { "kind": "method", "name": "handleTriggerSlotChange", "privacy": "private" }, { "kind": "method", "name": "handleDocumentMouseDown", "privacy": "private", "parameters": [ { "name": "event", "type": { "text": "MouseEvent" } } ] }, { "kind": "method", "name": "handleDocumentKeyDown", "parameters": [ { "name": "event", "type": { "text": "KeyboardEvent" } } ] }, { "kind": "method", "name": "show", "description": "Opens the dropdown" }, { "kind": "method", "name": "hide", "description": "Closes the dropdown" }, { "kind": "method", "name": "reposition", "description": "Instructs the dropdown to reposition itself" }, { "kind": "method", "name": "updateAccessibleTrigger", "privacy": "private", "description": "Aria related method" }, { "kind": "method", "name": "handleOpenChange" } ], "events": [ { "description": "Emitted as an example.", "name": "zn-event-name" } ], "attributes": [ { "name": "open", "type": { "text": "boolean" }, "default": "false", "description": "Indicates whether the dropdown is open", "fieldName": "open" }, { "name": "placement", "type": { "text": "'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' |\n 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'" }, "default": "'bottom-start'", "description": "The placement of the dropdown. Note the actual placement may vary based on the available space", "fieldName": "placement" }, { "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Disable the dropdown", "fieldName": "disabled" }, { "name": "stay-open-on-select", "type": { "text": "boolean" }, "default": "false", "description": "By default, the dropdown will close when an item is selected. Set this to true to keep the dropdown open", "fieldName": "stayOpenOnSelect" }, { "name": "distance", "type": { "text": "number" }, "default": "0", "description": "The distance in pixels from which to offset the panel away from the trigger", "fieldName": "distance" }, { "name": "skidding", "type": { "text": "number" }, "default": "0", "description": "The distance in pixels from which to offset the panel away from the trigger", "fieldName": "skidding" }, { "name": "hoist", "type": { "text": "boolean" }, "default": "true", "description": "Enable this option if the parent is overflow hidden and the dropdown is not visible", "fieldName": "hoist" }, { "name": "sync", "type": { "text": "'width' | 'height' | 'both' | undefined" }, "default": "undefined", "description": "Syncs the popup width or height with the trigger element", "fieldName": "sync" }, { "name": "uri", "type": { "text": "string" }, "fieldName": "uri" }, { "name": "fetchedContent", "type": { "text": "string" }, "default": "''", "fieldName": "fetchedContent" } ], "superclass": { "name": "ZincElement", "module": "/src/internal/zinc-element" }, "summary": "Short summary of the component's intended use.", "tagNameWithoutPrefix": "dropdown", "tagName": "zn-dropdown", "customElement": true, "jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/dropdown\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-example\n *\n * @event zn-event-name - Emitted as an example.\n *\n * @slot - The default slot.\n * @slot example - An example slot.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --example - An example CSS custom property.\n */", "documentation": "https://zinc.style/components/dropdown", "status": "experimental", "since": "1.0", "dependencies": [ "zn-example" ] } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "ZnDropdown", "module": "components/dropdown/dropdown.js" } } ] }, { "kind": "javascript-module", "path": "components/editor/editor.js", "declarations": [ { "kind": "class", "description": "", "name": "ZnEditor", "cssProperties": [ { "description": "An example CSS custom property.", "name": "--example" } ], "cssParts": [ { "description": "The component's base wrapper.", "name": "base" } ], "slots": [ { "description": "The default slot.", "name": "" }, { "description": "An example slot.", "name": "example" } ], "members": [ { "kind": "field", "name": "formControlController", "privacy": "private", "default": "new FormControlController(this, {})" }, { "kind": "field", "name": "editor", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "editorHtml", "type": { "text": "HTMLTextAreaElement" }, "privacy": "private" }, { "kind": "field", "name": "toolbar", "type": { "text": "ToolbarComponent" }, "privacy": "private" }, { "kind": "field", "name": "id", "type": { "text": "string" }, "attribute": "id", "reflects": true }, { "kind": "field", "name": "name", "type": { "text": "string" }, "attribute": "name" }, { "kind": "field", "name": "value", "type": { "text": "string" }, "attribute": "value" }, { "kind": "field", "name": "interactionType", "type": { "text": "'ticket' | 'chat'" }, "default": "'chat'", "attribute": "interaction-type" }, { "kind": "field", "name": "uploadAttachmentUrl", "type": { "text": "string" }, "attribute": "attachment-url" }, { "kind": "field", "name": "codeBlocksEnabled", "type": { "text": "boolean" }, "default": "false", "attribute": "code-blocks" }, { "kind": "field", "name": "dividersEnabled", "type": { "text": "boolean" }, "default": "false", "attribute": "dividers" }, { "kind": "field", "name": "linksEnabled", "type": { "text": "boolean" }, "default": "false", "attribute": "links" }, { "kind": "field", "name": "attachmentsEnabled", "type": { "text": "boolean" }, "default": "false", "attribute": "attachments" }, { "kind": "field", "name": "imagesEnabled", "type": { "text": "boolean" }, "default": "false", "attribute": "images" }, { "kind": "field", "name": "videosEnabled", "type": { "text": "boolean" }, "default": "false", "attribute": "videos" }, { "kind": "field", "name": "datesEnabled", "type": { "text": "boolean" }, "default": "false", "attribute": "dates" }, { "kind": "field", "name": "emojisEnabled", "type": { "text": "boolean" }, "default": "false", "attribute": "emojis" }, { "kind": "field", "name": "codeEnabled", "type": { "text": "boolean" }, "default": "false", "attribute": "code" }, { "kind": "field", "name": "aiEnabled", "type": { "text": "boolean" }, "default": "false", "attribute": "ai" }, { "kind": "field", "name": "aiPath", "type": { "text": "string" }, "default": "''", "attribute": "ai-path" }, { "kind": "field", "name": "storeKey", "type": { "text": "string" }, "default": "\"\"", "description": "Caches unsent content while typing and restores it when the editor next loads,\nso agent replies in tickets/chats survive reloads and navigation. Use a key\nunique to the conversation (e.g. the ticket ID). The cache is cleared on submit.", "attribute": "store-key", "reflects": true }, { "kind": "field", "name": "storeTtl", "type": { "text": "number" }, "default": "86400", "description": "Cached-content expiry in seconds. Defaults to 1 day.", "attribute": "store-ttl", "reflects": true }, { "kind": "field", "name": "localStorage", "type": { "text": "boolean" }, "description": "Cache to localStorage instead of sessionStorage, persisting across tabs and browser restarts.", "attribute": "local-storage", "reflects": true }, { "kind": "field", "name": "_store", "type": { "text": "Store" }, "privacy": "protected" }, { "kind": "field", "name": "quillElement", "type": { "text": "Quill" }, "privacy": "private" }, { "kind": "field", "name": "_content", "type": { "text": "string" }, "privacy": "private", "default": "''" }, { "kind": "field", "name": "_selectionRange", "type": { "text": "Range" }, "privacy": "private", "default": "{index: 0, length: 0}" }, { "kind": "field", "name": "validity", "type": { "text": "ValidityState" }, "readonly": true }, { "kind": "field", "name": "validationMessage", "type": { "text": "string" }, "readonly": true }, { "kind": "method", "name": "checkValidity", "return": { "type": { "text": "boolean" } } }, { "kind": "method", "name": "getForm", "return": { "type": { "text": "HTMLFormElement | null" } } }, { "kind": "method", "name": "reportValidity", "return": { "type": { "text": "boolean" } } }, { "kind": "method", "name": "setCustomValidity", "return": { "type": { "text": "void" } }, "parameters": [ { "name": "message", "type": { "text": "string" } } ] }, { "kind": "method", "name": "_handleTextChange", "privacy": "private" }, { "kind": "method", "name": "_isEmpty", "privacy": "private", "parameters": [ { "name": "value", "type": { "text": "string" } } ] }, { "kind": "method", "name": "_cacheContent", "privacy": "private" }, { "kind": "method", "name": "_clearCachedContent", "privacy": "private" }, { "kind": "method", "name": "_getQuillKeyboardBindings", "privacy": "private" }, { "kind": "method", "name": "_handleEditorChange", "privacy": "private", "parameters": [ { "name": "e", "type": { "text": "OnEvent" } } ] }, { "kind": "field", "name": "_handleEditorInsert", "privacy": "private" }, { "kind": "method", "name": "_insertHtml", "privacy": "private", "parameters": [ { "name": "mode", "type": { "text": "'insert' | 'replace'" } }, { "name": "content", "type": { "text": "string" } } ] }, { "kind": "method", "name": "_replaceTextAtSelection", "privacy": "private" }, { "kind": "method", "name": "_insertTextAtSelection", "privacy": "private" }, { "kind": "method", "name": "_closePopups", "privacy": "private" }, { "kind": "method", "name": "_closeAiPanel", "privacy": "private" }, { "kind": "method", "name": "_closeDialog", "privacy": "private" } ], "events": [ { "description": "Emitted as an example.", "name": "zn-event-name" } ], "attributes": [ { "name": "id", "type": { "text": "string" }, "fieldName": "id" }, { "name": "name", "type": { "text": "string" }, "fieldName": "name" }, { "name": "value", "type": { "text": "string" }, "fieldName": "value" }, { "name": "interaction-type", "type": { "text": "'ticket' | 'chat'" }, "default": "'chat'", "fieldName": "interactionType" }, { "name": "attachment-url", "type": { "text": "string" }, "fieldName": "uploadAttachmentUrl" }, { "name": "code-blocks", "type": { "text": "boolean" }, "default": "false", "fieldName": "codeBlocksEnabled" }, { "name": "dividers", "type": { "text": "boolean" }, "default": "false", "fieldName": "dividersEnabled" }, { "name": "links", "type": { "text": "boolean" }, "default": "false", "fieldName": "linksEnabled" }, { "name": "attachments", "type": { "text": "boolean" }, "default": "false", "fieldName": "attachmentsEnabled" }, { "name": "images", "type": { "text": "boolean" }, "default": "false", "fieldName": "imagesEnabled" }, { "name": "videos", "type": { "text": "boolean" }, "default": "false", "fieldName": "videosEnabled" }, { "name": "dates", "type": { "text": "boolean" }, "default": "false", "fieldName": "datesEnabled" }, { "name": "emojis", "type": { "text": "boolean" }, "default": "false", "fieldName": "emojisEnabled" }, { "name": "code", "type": { "text": "boolean" }, "default": "false", "fieldName": "codeEnabled" }, { "name": "ai", "type": { "text": "boolean" }, "default": "false", "fieldName": "aiEnabled" }, { "name": "ai-path", "type": { "text": "string" }, "default": "''", "fieldName": "aiPath" }, { "name": "store-key", "type": { "text": "string" }, "default": "\"\"", "description": "Caches unsent content while typing and restores it when the editor next loads,\nso agent replies in tickets/chats survive reloads and navigation. Use a key\nunique to the conversation (e.g. the ticket ID). The cache is cleared on submit.", "fieldName": "storeKey" }, { "name": "store-ttl", "type": { "text": "number" }, "default": "86400", "description": "Cached-content expiry in seconds. Defaults to 1 day.", "fieldName": "storeTtl" }, { "name": "local-storage", "type": { "text": "boolean" }, "description": "Cache to localStorage instead of sessionStorage, persisting across tabs and browser restarts.", "fieldName": "localStorage" } ], "superclass": { "name": "ZincElement", "module": "/src/internal/zinc-element" }, "summary": "Short summary of the component's intended use.", "tagNameWithoutPrefix": "editor", "tagName": "zn-editor", "customElement": true, "jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/editor\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-example\n *\n * @event zn-event-name - Emitted as an example.\n *\n * @slot - The default slot.\n * @slot example - An example slot.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --example - An example CSS custom property.\n */", "documentation": "https://zinc.style/components/editor", "status": "experimental", "since": "1.0", "dependencies": [ "zn-example" ] } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "ZnEditor", "module": "components/editor/editor.js" } } ] }, { "kind": "javascript-module", "path": "components/empty-state/empty-state.js", "declarations": [ { "kind": "class", "description": "", "name": "ZnEmptyState", "cssProperties": [ { "description": "An example CSS custom property.", "name": "--example" } ], "cssParts": [ { "description": "The component's base wrapper.", "name": "base" } ], "slots": [ { "description": "The default slot.", "name": "" }, { "description": "An example slot.", "name": "example" } ], "members": [ { "kind": "field", "name": "icon", "type": { "text": "string" }, "default": "''", "attribute": "icon" }, { "kind": "field", "name": "caption", "type": { "text": "string" }, "default": "''", "attribute": "caption" }, { "kind": "field", "name": "description", "type": { "text": "string" }, "default": "''", "attribute": "description" }, { "kind": "field", "name": "type", "type": { "text": "'error' | 'info' | 'primary' | ''" }, "default": "''", "attribute": "type" }, { "kind": "field", "name": "padded", "type": { "text": "boolean" }, "default": "false", "attribute": "padded" }, { "kind": "field", "name": "hasSlotController", "privacy": "private", "readonly": true, "default": "new HasSlotController(this, '[default]', 'caption', 'description')" } ], "events": [ { "description": "Emitted as an example.", "name": "zn-event-name" } ], "attributes": [ { "name": "icon", "type": { "text": "string" }, "default": "''", "fieldName": "icon" }, { "name": "caption", "type": { "text": "string" }, "default": "''", "fieldName": "caption" }, { "name": "description", "type": { "text": "string" }, "default": "''", "fieldName": "description" }, { "name": "type", "type": { "text": "'error' | 'info' | 'primary' | ''" }, "default": "''", "fieldName": "type" }, { "name": "padded", "type": { "text": "boolean" }, "default": "false", "fieldName": "padded" } ], "superclass": { "name": "ZincElement", "module": "/src/internal/zinc-element" }, "summary": "Short summary of the component's intended use.", "tagNameWithoutPrefix": "empty-state", "tagName": "zn-empty-state", "customElement": true, "jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/empty-state\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-example\n *\n * @event zn-event-name - Emitted as an example.\n *\n * @slot - The default slot.\n * @slot example - An example slot.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --example - An example CSS custom property.\n */", "documentation": "https://zinc.style/components/empty-state", "status": "experimental", "since": "1.0", "dependencies": [ "zn-example" ] } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "ZnEmptyState", "module": "components/empty-state/empty-state.js" } } ] }, { "kind": "javascript-module", "path": "components/expanding-action/expanding-action.js", "declarations": [ { "kind": "class", "description": "", "name": "ZnExpandingAction", "cssProperties": [ { "description": "An example CSS custom property.", "name": "--example" } ], "cssParts": [ { "description": "The component's base wrapper.", "name": "base" } ], "slots": [ { "description": "The default slot.", "name": "" }, { "description": "An example slot.", "name": "example" } ], "members": [ { "kind": "field", "name": "icon", "type": { "text": "string" }, "attribute": "icon" }, { "kind": "field", "name": "method", "type": { "text": "'drop' | 'fill'" }, "default": "'drop'", "attribute": "method" }, { "kind": "field", "name": "contextUri", "type": { "text": "string" }, "attribute": "context-uri", "reflects": true }, { "kind": "field", "name": "count", "type": { "text": "string" }, "attribute": "count", "reflects": true }, { "kind": "field", "name": "color", "type": { "text": "string" }, "attribute": "color", "reflects": true }, { "kind": "field", "name": "prefetch", "type": { "text": "boolean" }, "default": "false", "attribute": "prefetch" }, { "kind": "field", "name": "basis", "type": { "text": "string" }, "default": "'300'", "attribute": "basis" }, { "kind": "field", "name": "maxHeight", "type": { "text": "string" }, "attribute": "max-height" }, { "kind": "field", "name": "open", "type": { "text": "boolean" }, "default": "false", "attribute": "open", "reflects": true }, { "kind": "field", "name": "masterId", "type": { "text": "string" }, "attribute": "master-id", "reflects": true }, { "kind": "field", "name": "fetchStyle", "type": { "text": "string" }, "default": "\"\"", "attribute": "fetch-style", "reflects": true }, { "kind": "field", "name": "noPrefetch", "type": { "text": "boolean" }, "default": "false", "attribute": "no-prefetch", "reflects": true }, { "kind": "field", "name": "_panel", "type": { "text": "Element | null | undefined" }, "privacy": "private" }, { "kind": "field", "name": "_panels", "type": { "text": "Map" }, "privacy": "private", "default": "new Map()" }, { "kind": "field", "name": "_knownUri", "type": { "text": "Map" }, "privacy": "private", "default": "new Map()" }, { "kind": "field", "name": "_actions", "type": { "text": "HTMLElement[]" }, "privacy": "private", "default": "[]" }, { "kind": "field", "name": "_preload", "type": { "text": "boolean" }, "privacy": "private", "default": "true" }, { "kind": "field", "name": "_metaObserved", "type": { "text": "boolean" }, "privacy": "private", "default": "false" }, { "kind": "field", "name": "_placementObserver", "type": { "text": "MutationObserver | undefined" }, "privacy": "private" }, { "kind": "field", "name": "_countObserver", "privacy": "private", "readonly": true, "default": "new MutationController(this, { target: null, config: {subtree: true, attributes: true, attributeFilter: ['content'], childList: true}, callback: () => { const appContent = deepQuerySelectorAll('app-content', this, '')[0]; const metaCount = appContent?.shadowRoot?.querySelector('meta[name=\"count\"]'); if (!metaCount) return; const count = metaCount.getAttribute('content'); const notification = this.shadowRoot?.querySelector('.expanding-action__dropdown zn-button'); if (count && notification) { notification.setAttribute('notification', count); } }, })" }, { "kind": "field", "name": "_colorObserver", "privacy": "private", "readonly": true, "default": "new MutationController(this, { target: null, config: {subtree: true, attributes: true, attributeFilter: ['content'], childList: true}, callback: () => { const appContent = deepQuerySelectorAll('app-content', this, '')[0]; const metaColor = appContent?.shadowRoot?.querySelector('meta[name=\"color\"]'); if (!metaColor) return; const color = metaColor.getAttribute('content'); if (color) { this.color = color; } }, })" }, { "kind": "method", "name": "_observeMetaData" }, { "kind": "method", "name": "_registerActions" }, { "kind": "method", "name": "_addAction", "parameters": [ { "name": "action", "type": { "text": "HTMLElement" } } ] }, { "kind": "method", "name": "_uriToId", "return": { "type": { "text": "string" } }, "parameters": [ { "name": "actionUri", "type": { "text": "string" } } ] }, { "kind": "method", "name": "_handleClick", "parameters": [ { "name": "event", "type": { "text": "PointerEvent" } } ] }, { "kind": "method", "name": "_createUriPanel", "return": { "type": { "text": "HTMLDivElement" } }, "parameters": [ { "name": "actionEle", "type": { "text": "Element" } }, { "name": "actionUri", "type": { "text": "string" } }, { "name": "actionId", "type": { "text": "string" } } ] }, { "kind": "method", "name": "fetchUri", "parameters": [ { "name": "target", "type": { "text": "HTMLElement" } } ] }, { "kind": "method", "name": "fetchContextHeaders" }, { "kind": "method", "name": "clickAction", "parameters": [ { "name": "target", "type": { "text": "HTMLElement" } } ] }, { "kind": "field", "name": "handleIconClicked" }, { "kind": "field", "name": "handleIconCloseClicked" }, { "kind": "field", "name": "_updateTriggerSide", "privacy": "private" }, { "kind": "method", "name": "_observePlacement", "privacy": "private" }, { "kind": "method", "name": "renderDropdown", "privacy": "protected" }, { "kind": "method", "name": "renderFill", "privacy": "protected" } ], "events": [ { "description": "Emitted as an example.", "name": "zn-event-name" } ], "attributes": [ { "name": "icon", "type": { "text": "string" }, "fieldName": "icon" }, { "name": "method", "type": { "text": "'drop' | 'fill'" }, "default": "'drop'", "fieldName": "method" }, { "name": "context-uri", "type": { "text": "string" }, "fieldName": "contextUri" }, { "name": "count", "type": { "text": "string" }, "fieldName": "count" }, { "name": "color", "type": { "text": "string" }, "fieldName": "color" }, { "name": "prefetch", "type": { "text": "boolean" }, "default": "false", "fieldName": "prefetch" }, { "name": "basis", "type": { "text": "string" }, "default": "'300'", "fieldName": "basis" }, { "name": "max-height", "type": { "text": "string" }, "fieldName": "maxHeight" }, { "name": "open", "type": { "text": "boolean" }, "default": "false", "fieldName": "open" }, { "name": "master-id", "type": { "text": "string" }, "fieldName": "masterId" }, { "name": "fetch-style", "type": { "text": "string" }, "default": "\"\"", "fieldName": "fetchStyle" }, { "name": "no-prefetch", "type": { "text": "boolean" }, "default": "false", "fieldName": "noPrefetch" } ], "superclass": { "name": "ZincElement", "module": "/src/internal/zinc-element" }, "summary": "Short summary of the component's intended use.", "tagNameWithoutPrefix": "expanding-action", "tagName": "zn-expanding-action", "customElement": true, "jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/expanding-action\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-example\n *\n * @event zn-event-name - Emitted as an example.\n *\n * @slot - The default slot.\n * @slot example - An example slot.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --example - An example CSS custom property.\n */", "documentation": "https://zinc.style/components/expanding-action", "status": "experimental", "since": "1.0", "dependencies": [ "zn-example" ] } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "ZnExpandingAction", "module": "components/expanding-action/expanding-action.js" } } ] }, { "kind": "javascript-module", "path": "components/file/file.js", "declarations": [ { "kind": "class", "description": "", "name": "ZnFile", "cssParts": [ { "description": "The form control that wraps the label, input, and help text.", "name": "form-control" }, { "description": "The label's wrapper.", "name": "form-control-label" }, { "description": "The input's wrapper.", "name": "form-control-input" }, { "description": "The help text's wrapper.", "name": "form-control-help-text" }, { "description": "The wrapper around the button and text value.", "name": "button-wrapper" }, { "description": "The zn-button acting as a file input.", "name": "button" }, { "description": "The zn-button's exported `base` part.", "name": "button__base" }, { "description": "The chosen files or placeholder text for the file input.", "name": "value" }, { "description": "The element wrapping the drop zone.", "name": "droparea" }, { "description": "The background of the drop zone.", "name": "droparea-background" }, { "description": "The upload button shown in the droparea when no file is selected.", "name": "upload" }, { "description": "The image preview rendered in the droparea for previewable files.", "name": "preview" }, { "description": "The filename label rendered in the droparea for non-previewable files.", "name": "filename" }, { "description": "The clear button rendered in the droparea when a file is present.", "name": "clear" }, { "description": "The confirmation dialog shown before clearing the file.", "name": "clear-confirm" }, { "description": "The current link anchor rendered when `show-link` is enabled.", "name": "link" }, { "description": "The container that wraps the trigger.", "name": "trigger" } ], "slots": [ { "description": "The file control's label. Alternatively, you can use the `label` attribute.", "name": "label" }, { "description": "Text that describes how to use the file control. Alternatively, you can use the `help-text` attribute.", "name": "help-text" }, { "description": "Optional content to be used as trigger instead of the default content. Opening the file dialog on click and as well as drag and drop will work for this content. Following attributes will no longer work: *label*, *droparea*, *help-text*, *size*, *hide-value*. Also if using the disabled attribute, the disabled styling will not be applied and must be taken care of yourself.", "name": "trigger" } ], "members": [ { "kind": "field", "name": "dependencies", "type": { "text": "object" }, "static": true, "default": "{ 'zn-dialog': ZnDialog }" }, { "kind": "field", "name": "formControlController", "privacy": "private", "readonly": true, "default": "new FormControlController(this, { assumeInteractionOn: ['zn-change'], // An explicitly cleared control submits an empty value so the server can // remove the stored upload; an untouched empty control submits nothing. // In upload-url mode the control submits the uploaded file's URL string // instead of the file bytes. value: (el: ZnFile) => { if (el.uploadUrl) { if (el.src) return el.src; return el.clearedByUser ? '' : undefined; } if (el.files?.length) return el.files; return el.clearedByUser ? '' : undefined; } })" }, { "kind": "field", "name": "clearedByUser", "type": { "text": "boolean" }, "privacy": "private", "default": "false", "description": "Set when the user clears the control; reset when a file is chosen." }, { "kind": "field", "name": "hasSlotController", "privacy": "private", "readonly": true, "default": "new HasSlotController(this, 'help-text', 'label')" }, { "kind": "field", "name": "localize", "privacy": "private", "readonly": true, "default": "new LocalizeController(this)" }, { "kind": "field", "name": "userIsDragging", "type": { "text": "boolean" }, "privacy": "private", "default": "false" }, { "kind": "field", "name": "fileObjectUrl", "type": { "text": "string | null" }, "privacy": "private", "default": "null" }, { "kind": "field", "name": "input", "type": { "text": "HTMLInputElement" } }, { "kind": "field", "name": "button", "type": { "text": "ZnButton" } }, { "kind": "field", "name": "dropareaWrapper", "type": { "text": "HTMLDivElement" } }, { "kind": "field", "name": "dropareaIcon", "type": { "text": "HTMLSpanElement" } }, { "kind": "field", "name": "inputChosen", "type": { "text": "HTMLSpanElement" } }, { "kind": "field", "name": "clearConfirmDialog", "type": { "text": "HTMLElement & { show: () => void; hide: () => void }" } }, { "kind": "field", "name": "files", "description": "The selected files as a FileList object containing a list of File objects.\nThe FileList behaves like an array, so you can get the number of selected files\nvia its length property.\n[see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#getting_information_on_selected_files)", "attribute": "files" }, { "kind": "field", "name": "name", "type": { "text": "string" }, "default": "''", "description": "The name of the file control, submitted as a name/value pair with form data.", "attribute": "name" }, { "kind": "field", "name": "value", "description": "The value of the file control contains a string that represents the path of the selected file.\nIf multiple files are selected, the value represents the first file in the list.\nIf no file is selected, the value is an empty string.\nBeware that the only valid value when setting a file control is an empty string!\n[see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#value)", "attribute": "value" }, { "kind": "field", "name": "defaultValue", "type": { "text": "string" }, "default": "''", "description": "The default value of the form control. Primarily used for resetting the form control." }, { "kind": "field", "name": "size", "type": { "text": "'small' | 'medium' | 'large'" }, "default": "'medium'", "description": "The file control's size.", "attribute": "size", "reflects": true }, { "kind": "field", "name": "label", "type": { "text": "string" }, "default": "''", "description": "The file control's label. If you need to display HTML, use the `label` slot instead.", "attribute": "label" }, { "kind": "field", "name": "clearable", "type": { "text": "boolean" }, "default": "false", "description": "If this is set, then the only way to remove files is to click the cross next to them.", "attribute": "clearable" }, { "kind": "field", "name": "helpText", "type": { "text": "string" }, "default": "''", "description": "The file control's help text.\nIf you need to display HTML, use the `help-text` slot instead.", "attribute": "help-text" }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Disables the file control.", "attribute": "disabled", "reflects": true }, { "kind": "field", "name": "droparea", "type": { "text": "boolean" }, "default": "false", "description": "Draw the file control as a drop area", "attribute": "droparea" }, { "kind": "field", "name": "accept", "type": { "text": "string" }, "default": "''", "description": "Comma separated list of supported file types\n[see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept)", "attribute": "accept" }, { "kind": "field", "name": "capture", "type": { "text": "'user' | 'environment'" }, "description": "Specifies the types of files that the server accepts.\nCan be set either to user or environment.\nWorks only when not using a droparea!\n[see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture)", "attribute": "capture" }, { "kind": "field", "name": "multiple", "type": { "text": "boolean" }, "default": "false", "description": "Indicates whether the user can select more than one file.\nHas no effect if webkitdirectory is set.\n[see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#multiple)", "attribute": "multiple", "reflects": true }, { "kind": "field", "name": "webkitdirectory", "type": { "text": "boolean" }, "default": "false", "description": "Indicates that the file control should let the user select directories instead of files.\nWhen a directory is selected, the directory and its entire hierarchy of contents are included\nin the set of selected items.\nNote: This is a non-standard attribute but is supported in the major browsers.\n[see MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory)", "attribute": "webkitdirectory", "reflects": true }, { "kind": "field", "name": "form", "type": { "text": "string" }, "default": "''", "description": "By default, form controls are associated with the nearest containing `` element.\nThis attribute allows you to place the form control outside of a form and associate it\nwith the form that has this `id`. The form must be in the same document\nor shadow root for this to work.", "attribute": "form", "reflects": true }, { "kind": "field", "name": "required", "type": { "text": "boolean" }, "default": "false", "description": "Makes the input a required field.", "attribute": "required", "reflects": true }, { "kind": "field", "name": "hideValue", "type": { "text": "boolean" }, "default": "false", "description": "Suppress the value from being displayed in the file control", "attribute": "hide-value" }, { "kind": "field", "name": "src", "type": { "text": "string" }, "default": "''", "description": "URL of an already-uploaded file (e.g., from a CDN) to display as the current value\nwhen no file has been selected locally. If the URL points to an image, it is rendered\nas a preview inside the droparea. Otherwise the URL is shown as a filename.", "attribute": "src" }, { "kind": "field", "name": "triggerSubmit", "type": { "text": "boolean" }, "default": "false", "description": "When enabled, automatically submit the surrounding form whenever the value changes\n(file selected, dropped, or cleared). Useful for forms that only contain this control\nand a CSRF token.", "attribute": "trigger-submit" }, { "kind": "field", "name": "showLink", "type": { "text": "boolean" }, "default": "false", "description": "When enabled, render the current link (`previewSrc`) as a clickable URL below the control.\nUseful for showing the existing CDN link alongside the preview.", "attribute": "show-link" }, { "kind": "field", "name": "uploadUrl", "type": { "text": "string" }, "default": "''", "description": "When set, a chosen file is immediately POSTed (multipart, field `file`) to this URL.\nThe endpoint must respond with JSON `{\"url\": \"...\"}`; that URL becomes the control's\nvalue (and `src` preview) in place of the file bytes, so the control works inside\nJSON-serialising hosts such as `zn-page-builder`. Emits `zn-error` when the upload fails.", "attribute": "upload-url" }, { "kind": "field", "name": "uploading", "type": { "text": "boolean" }, "privacy": "private", "default": "false" }, { "kind": "field", "name": "validity", "description": "Gets the validity state object", "readonly": true }, { "kind": "field", "name": "validationMessage", "description": "Gets the validation message", "readonly": true }, { "kind": "method", "name": "checkValidity", "description": "Checks for validity but does not show a validation message.\nReturns `true` when valid and `false` when invalid." }, { "kind": "method", "name": "getForm", "return": { "type": { "text": "HTMLFormElement | null" } }, "description": "Gets the associated form, if one exists." }, { "kind": "method", "name": "reportValidity", "description": "Checks for validity and shows the browser's validation message if the control is invalid." }, { "kind": "method", "name": "setCustomValidity", "parameters": [ { "name": "message", "type": { "text": "string" } } ], "description": "Sets a custom validation message. Pass an empty string to restore validity." }, { "kind": "method", "name": "handleDisabledChange" }, { "kind": "method", "name": "handleValueChange" }, { "kind": "method", "name": "focus", "parameters": [ { "name": "options", "optional": true, "type": { "text": "FocusOptions" } } ], "description": "Sets focus on the button or droparea." }, { "kind": "method", "name": "blur", "description": "Removes focus from the button or droparea." }, { "kind": "field", "name": "handleInvalid", "privacy": "private" }, { "kind": "method", "name": "handleFiles", "privacy": "private", "parameters": [ { "name": "files", "type": { "text": "FileList | null" } } ] }, { "kind": "method", "name": "handleTransferItems", "privacy": "private", "return": { "type": { "text": "Promise" } }, "parameters": [ { "name": "items", "type": { "text": "DataTransferItemList | null" } } ] }, { "kind": "method", "name": "getFilesFromEntry", "privacy": "private", "return": { "type": { "text": "Promise" } }, "parameters": [ { "name": "entry", "type": { "text": "FileSystemEntry | null" } } ] }, { "kind": "method", "name": "handleClick", "privacy": "private", "parameters": [ { "name": "e", "type": { "text": "Event" } } ] }, { "kind": "method", "name": "handleChange", "privacy": "private", "parameters": [ { "name": "e", "type": { "text": "Event" } } ], "description": "Handles the change event of the native input" }, { "kind": "method", "name": "uploadFile", "privacy": "private", "parameters": [ { "name": "file", "type": { "text": "File" } } ], "description": "Uploads the chosen file to `uploadUrl` and adopts the returned URL as the\ncontrol's value. The local file preview stays visible while the upload runs." }, { "kind": "field", "name": "handleDragOver", "privacy": "private" }, { "kind": "field", "name": "handleDragLeave", "privacy": "private" }, { "kind": "field", "name": "handleDrop", "privacy": "private" }, { "kind": "method", "name": "handleFocus", "privacy": "private", "description": "Handle the focus of the droparea and emit focus event" }, { "kind": "method", "name": "handleBlur", "privacy": "private", "description": "Handle the blur of the droparea and emit blur event" }, { "kind": "field", "name": "removeFile", "privacy": "private", "description": "Remove a file from the list of files" }, { "kind": "field", "name": "handleClearClick", "privacy": "private", "description": "Open the confirm dialog before clearing." }, { "kind": "field", "name": "confirmClear", "privacy": "private", "description": "Clear the current value after the user confirms." }, { "kind": "method", "name": "clear", "description": "Programmatically clears the selected file and any external `src` without\nconfirmation. Unlike a user-initiated clear, this does not flag the control\nto submit an empty value." }, { "kind": "method", "name": "updatePreview", "privacy": "private" }, { "kind": "field", "name": "previewSrc", "type": { "text": "string" }, "description": "Returns the URL currently shown in the droparea — the locally-selected file's object URL\nif a file is selected, otherwise the externally supplied `src`. Useful for getting the\ncurrent CDN link to submit alongside form data.", "readonly": true }, { "kind": "method", "name": "renderFileValueWithDelete", "privacy": "private", "return": { "type": { "text": "HTMLTemplateResult" } } }, { "kind": "method", "name": "renderDroparea", "privacy": "private", "return": { "type": { "text": "HTMLTemplateResult" } } }, { "kind": "method", "name": "renderButton", "privacy": "private", "return": { "type": { "text": "HTMLTemplateResult" } } } ], "events": [ { "description": "Emitted when the control loses focus.", "name": "zn-blur" }, { "description": "Emitted when an alteration to the control's value is committed by the user.", "name": "zn-change" }, { "description": "Emitted when the user confirms clearing the selected file or `src`.", "name": "zn-clear" }, { "description": "Emitted when multiple files are selected via drag and drop, without the `multiple` property being set.", "name": "zn-error" }, { "description": "Emitted when the control gains focus.", "name": "zn-focus" }, { "description": "Emitted when the control receives input.", "name": "zn-input" } ], "attributes": [ { "name": "files", "description": "The selected files as a FileList object containing a list of File objects.\nThe FileList behaves like an array, so you can get the number of selected files\nvia its length property.\n[see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#getting_information_on_selected_files)", "fieldName": "files" }, { "name": "name", "type": { "text": "string" }, "default": "''", "description": "The name of the file control, submitted as a name/value pair with form data.", "fieldName": "name" }, { "name": "value", "description": "The value of the file control contains a string that represents the path of the selected file.\nIf multiple files are selected, the value represents the first file in the list.\nIf no file is selected, the value is an empty string.\nBeware that the only valid value when setting a file control is an empty string!\n[see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#value)", "fieldName": "value" }, { "name": "size", "type": { "text": "'small' | 'medium' | 'large'" }, "default": "'medium'", "description": "The file control's size.", "fieldName": "size" }, { "name": "label", "type": { "text": "string" }, "default": "''", "description": "The file control's label. If you need to display HTML, use the `label` slot instead.", "fieldName": "label" }, { "name": "clearable", "type": { "text": "boolean" }, "default": "false", "description": "If this is set, then the only way to remove files is to click the cross next to them.", "fieldName": "clearable" }, { "name": "help-text", "type": { "text": "string" }, "default": "''", "description": "The file control's help text.\nIf you need to display HTML, use the `help-text` slot instead.", "fieldName": "helpText" }, { "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Disables the file control.", "fieldName": "disabled" }, { "name": "droparea", "type": { "text": "boolean" }, "default": "false", "description": "Draw the file control as a drop area", "fieldName": "droparea" }, { "name": "accept", "type": { "text": "string" }, "default": "''", "description": "Comma separated list of supported file types\n[see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept)", "fieldName": "accept" }, { "name": "capture", "type": { "text": "'user' | 'environment'" }, "description": "Specifies the types of files that the server accepts.\nCan be set either to user or environment.\nWorks only when not using a droparea!\n[see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture)", "fieldName": "capture" }, { "name": "multiple", "type": { "text": "boolean" }, "default": "false", "description": "Indicates whether the user can select more than one file.\nHas no effect if webkitdirectory is set.\n[see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#multiple)", "fieldName": "multiple" }, { "name": "webkitdirectory", "type": { "text": "boolean" }, "default": "false", "description": "Indicates that the file control should let the user select directories instead of files.\nWhen a directory is selected, the directory and its entire hierarchy of contents are included\nin the set of selected items.\nNote: This is a non-standard attribute but is supported in the major browsers.\n[see MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory)", "fieldName": "webkitdirectory" }, { "name": "form", "type": { "text": "string" }, "default": "''", "description": "By default, form controls are associated with the nearest containing `` element.\nThis attribute allows you to place the form control outside of a form and associate it\nwith the form that has this `id`. The form must be in the same document\nor shadow root for this to work.", "fieldName": "form" }, { "name": "required", "type": { "text": "boolean" }, "default": "false", "description": "Makes the input a required field.", "fieldName": "required" }, { "name": "hide-value", "type": { "text": "boolean" }, "default": "false", "description": "Suppress the value from being displayed in the file control", "fieldName": "hideValue" }, { "name": "src", "type": { "text": "string" }, "default": "''", "description": "URL of an already-uploaded file (e.g., from a CDN) to display as the current value\nwhen no file has been selected locally. If the URL points to an image, it is rendered\nas a preview inside the droparea. Otherwise the URL is shown as a filename.", "fieldName": "src" }, { "name": "trigger-submit", "type": { "text": "boolean" }, "default": "false", "description": "When enabled, automatically submit the surrounding form whenever the value changes\n(file selected, dropped, or cleared). Useful for forms that only contain this control\nand a CSRF token.", "fieldName": "triggerSubmit" }, { "name": "show-link", "type": { "text": "boolean" }, "default": "false", "description": "When enabled, render the current link (`previewSrc`) as a clickable URL below the control.\nUseful for showing the existing CDN link alongside the preview.", "fieldName": "showLink" }, { "name": "upload-url", "type": { "text": "string" }, "default": "''", "description": "When set, a chosen file is immediately POSTed (multipart, field `file`) to this URL.\nThe endpoint must respond with JSON `{\"url\": \"...\"}`; that URL becomes the control's\nvalue (and `src` preview) in place of the file bytes, so the control works inside\nJSON-serialising hosts such as `zn-page-builder`. Emits `zn-error` when the upload fails.", "fieldName": "uploadUrl" } ], "superclass": { "name": "ZincElement", "module": "/src/internal/zinc-element" }, "summary": "File controls allow selecting an arbitrary number of files for uploading.", "tagNameWithoutPrefix": "file", "tagName": "zn-file", "customElement": true, "jsDoc": "/**\n * @summary File controls allow selecting an arbitrary number of files for uploading.\n * @documentation https://zinc.style/components/drag-upload\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-button\n * @dependency zn-icon\n * @dependency zn-dialog\n *\n * @slot label - The file control's label. Alternatively, you can use the `label` attribute.\n * @slot help-text - Text that describes how to use the file control.\n * Alternatively, you can use the `help-text` attribute.\n * @slot trigger - Optional content to be used as trigger instead of the default content.\n * Opening the file dialog on click and as well as drag and drop will work for this content.\n * Following attributes will no longer work: *label*, *droparea*, *help-text*, *size*,\n * *hide-value*. Also if using the disabled attribute, the disabled styling will not be\n * applied and must be taken care of yourself.\n *\n * @event zn-blur - Emitted when the control loses focus.\n * @event zn-change - Emitted when an alteration to the control's value is committed by the user.\n * @event zn-clear - Emitted when the user confirms clearing the selected file or `src`.\n * @event zn-error - Emitted when multiple files are selected via drag and drop, without\n * the `multiple` property being set.\n * @event zn-focus - Emitted when the control gains focus.\n * @event zn-input - Emitted when the control receives input.\n *\n * @csspart form-control - The form control that wraps the label, input, and help text.\n * @csspart form-control-label - The label's wrapper.\n * @csspart form-control-input - The input's wrapper.\n * @csspart form-control-help-text - The help text's wrapper.\n * @csspart button-wrapper - The wrapper around the button and text value.\n * @csspart button - The zn-button acting as a file input.\n * @csspart button__base - The zn-button's exported `base` part.\n * @csspart value - The chosen files or placeholder text for the file input.\n * @csspart droparea - The element wrapping the drop zone.\n * @csspart droparea-background - The background of the drop zone.\n * @csspart upload - The upload button shown in the droparea when no file is selected.\n * @csspart preview - The image preview rendered in the droparea for previewable files.\n * @csspart filename - The filename label rendered in the droparea for non-previewable files.\n * @csspart clear - The clear button rendered in the droparea when a file is present.\n * @csspart clear-confirm - The confirmation dialog shown before clearing the file.\n * @csspart link - The current link anchor rendered when `show-link` is enabled.\n * @csspart trigger - The container that wraps the trigger.\n *\n * @animation file.iconDrop - The animation to use for the file icon\n * when a file is dropped\n * @animation file.text.disappear - The disappear animation to use for the file placeholder text\n * when a file is dropped\n * @animation file.text.appear - The appear animation to use for the file placeholder text\n * when a file is dropped\n */", "documentation": "https://zinc.style/components/drag-upload", "status": "experimental", "since": "1.0", "dependencies": [ "zn-button", "zn-icon", "zn-dialog" ], "animations": [ { "name": "file.iconDrop", "description": "The animation to use for the file icon when a file is dropped" }, { "name": "file.text.disappear", "description": "The disappear animation to use for the file placeholder text when a file is dropped" }, { "name": "file.text.appear", "description": "The appear animation to use for the file placeholder text when a file is dropped" } ] } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "ZnFile", "module": "components/file/file.js" } } ] }, { "kind": "javascript-module", "path": "components/filter-container/filter-container.js", "declarations": [ { "kind": "class", "description": "", "name": "ZnFilterContainer", "cssProperties": [ { "description": "An example CSS custom property.", "name": "--example" } ], "cssParts": [ { "description": "The component's base wrapper.", "name": "base" } ], "slots": [ { "description": "The default slot.", "name": "" }, { "description": "An example slot.", "name": "example" } ], "members": [ { "kind": "field", "name": "attr", "type": { "text": "string" }, "default": "'filter'", "attribute": "attr" }, { "kind": "method", "name": "handleSearchChange", "privacy": "public", "parameters": [ { "name": "event", "type": { "text": "Event" } } ] } ], "events": [ { "description": "Emitted as an example.", "name": "zn-event-name" } ], "attributes": [ { "name": "attr", "type": { "text": "string" }, "default": "'filter'", "fieldName": "attr" } ], "superclass": { "name": "ZincElement", "module": "/src/internal/zinc-element" }, "summary": "Short summary of the component's intended use.", "tagNameWithoutPrefix": "filter-container", "tagName": "zn-filter-container", "customElement": true, "jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/filter-container\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-example\n *\n * @event zn-event-name - Emitted as an example.\n *\n * @slot - The default slot.\n * @slot example - An example slot.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --example - An example CSS custom property.\n */", "documentation": "https://zinc.style/components/filter-container", "status": "experimental", "since": "1.0", "dependencies": [ "zn-example" ] } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "ZnFilterContainer", "module": "components/filter-container/filter-container.js" } } ] }, { "kind": "javascript-module", "path": "components/filter-wrapper/filter-wrapper.js", "declarations": [ { "kind": "class", "description": "", "name": "ZnFilterWrapper", "cssProperties": [ { "description": "An example CSS custom property.", "name": "--example" } ], "cssParts": [ { "description": "The component's base wrapper.", "name": "base" } ], "slots": [ { "description": "The default slot.", "name": "" }, { "description": "An example slot.", "name": "example" } ], "members": [ { "kind": "field", "name": "button", "type": { "text": "string" }, "default": "'Filter'", "attribute": "button" }, { "kind": "field", "name": "hasSubmitButton", "type": { "text": "boolean" }, "privacy": "private", "default": "false" }, { "kind": "field", "name": "handleSubmit" }, { "kind": "method", "name": "renderDefaultButton", "privacy": "private" } ], "events": [ { "description": "Emitted as an example.", "name": "zn-event-name" } ], "attributes": [ { "name": "button", "type": { "text": "string" }, "default": "'Filter'", "fieldName": "button" } ], "superclass": { "name": "ZincElement", "module": "/src/internal/zinc-element" }, "summary": "Short summary of the component's intended use.", "tagNameWithoutPrefix": "filter-wrapper", "tagName": "zn-filter-wrapper", "customElement": true, "jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/filter-wrapper\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-example\n *\n * @event zn-event-name - Emitted as an example.\n *\n * @slot - The default slot.\n * @slot example - An example slot.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --example - An example CSS custom property.\n */", "documentation": "https://zinc.style/components/filter-wrapper", "status": "experimental", "since": "1.0", "dependencies": [ "zn-example" ] } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "ZnFilterWrapper", "module": "components/filter-wrapper/filter-wrapper.js" } } ] }, { "kind": "javascript-module", "path": "components/flow-builder/flow-builder.js", "declarations": [ { "kind": "class", "description": "", "name": "ZnFlowBuilder", "cssParts": [ { "description": "The grid wrapper.", "name": "base" }, { "description": "The full-width header action bar (only rendered when header slots are filled).", "name": "header" }, { "description": "The left steps panel.", "name": "steps" }, { "description": "The right panel while a node or branch is selected.", "name": "inspector" } ], "slots": [ { "description": "`` type declarations; never displayed, each `group`/`category` routes the step into the right tab and collapsible grouping of the rendered panel. A step may nest `` declarations (each holding ``s, whose operator / option choices are nested `` / `` elements) — or set a `branch-filters` JSON attribute — to drive the built-in branch conditions editor.", "name": "" }, { "description": "Actions shown on the left of the header bar (e.g. Close / Undo All Changes).", "name": "header-left" }, { "description": "Actions shown on the right of the header bar (e.g. Apply Changes).", "name": "header-right" }, { "description": "Extra right-panel content (status, version history), below the configuration errors.", "name": "sidebar" } ], "members": [ { "kind": "field", "name": "dependencies", "type": { "text": "object" }, "static": true, "default": "{ 'zn-icon': ZnIcon, 'zn-input': ZnInput, 'zn-tabs': ZnTabs, 'zn-navbar': ZnNavbar, 'zn-flow-branch-conditions': ZnFlowBranchConditions, 'zn-flow-canvas': ZnFlowCanvas, 'zn-flow-step-group': ZnFlowStepGroup, }" }, { "kind": "field", "name": "nodeTypes", "type": { "text": "FlowNodeType[]" }, "default": "[]", "description": "Node types to make available, registered into the internal registry." }, { "kind": "field", "name": "heading", "type": { "text": "string" }, "default": "''", "attribute": "heading", "reflects": true }, { "kind": "field", "name": "subheading", "type": { "text": "string" }, "default": "''", "attribute": "subheading", "reflects": true }, { "kind": "field", "name": "errorNodes", "type": { "text": "string[]" }, "default": "[]", "description": "Node ids flagged as having configuration errors (drives the red node styling)." }, { "kind": "field", "name": "autoSave", "type": { "text": "number | null" }, "default": "null", "description": "Auto-save the flow to localStorage (1-day TTL). Omit to disable. A bare\n`auto-save` saves every 5 minutes; a numeric value sets the interval in\nminutes (`auto-save=\"5\"`). Restore with `restoreAutoSave()`.", "attribute": "auto-save" }, { "kind": "field", "name": "entrypointsHint", "type": { "text": "string" }, "default": "''", "description": "Optional hint shown beneath each steps-panel tab.", "attribute": "entrypoints-hint" }, { "kind": "field", "name": "triggersHint", "type": { "text": "string" }, "default": "''", "attribute": "triggers-hint" }, { "kind": "field", "name": "actionsHint", "type": { "text": "string" }, "default": "''", "attribute": "actions-hint" }, { "kind": "field", "name": "rulesHint", "type": { "text": "string" }, "default": "''", "attribute": "rules-hint" }, { "kind": "field", "name": "registry", "privacy": "private", "default": "new FlowRegistry()" }, { "kind": "field", "name": "_state", "type": { "text": "FlowState" }, "privacy": "private" }, { "kind": "field", "name": "_selectedNodeId", "type": { "text": "string | null" }, "privacy": "private", "default": "null" }, { "kind": "field", "name": "_selectedBranch", "type": { "text": "{ nodeId: string; port: string } | null" }, "privacy": "private", "default": "null", "description": "The output branch open in the branch editor, if any." }, { "kind": "field", "name": "_search", "type": { "text": "string" }, "privacy": "private", "default": "''" }, { "kind": "field", "name": "_activeGroup", "type": { "text": "FlowGroup | null" }, "privacy": "private", "default": "null", "description": "The steps-panel tab currently shown; the search only filters this tab." }, { "kind": "field", "name": "_hasSlot", "privacy": "private", "readonly": true, "default": "new HasSlotController(this, 'header-left', 'header-right')" }, { "kind": "field", "name": "_stepsCollapsed", "type": { "text": "boolean" }, "privacy": "private", "default": "false", "description": "Side panels tucked away via their edge chevrons." }, { "kind": "field", "name": "_sideCollapsed", "type": { "text": "boolean" }, "privacy": "private", "default": "false" }, { "kind": "field", "name": "_movingNodeId", "type": { "text": "string | null" }, "privacy": "private", "default": "null", "description": "The node being relocated via the MOVE menu action, if any." }, { "kind": "field", "name": "_picker", "type": { "text": "{ x: number; y: number; target: PickerTarget } | null" }, "privacy": "private", "default": "null", "description": "The \"+\" picker popover target (an open output, or a wire to insert into), if open." }, { "kind": "field", "name": "_draggingType", "type": { "text": "string | null" }, "privacy": "private", "default": "null", "description": "The node type currently being dragged from the steps panel, for the canvas drop preview." }, { "kind": "field", "name": "_history", "type": { "text": "FlowState[]" }, "privacy": "private", "default": "[]" }, { "kind": "field", "name": "_redo", "type": { "text": "FlowState[]" }, "privacy": "private", "default": "[]" }, { "kind": "field", "name": "_seq", "type": { "text": "number" }, "privacy": "private", "default": "0" }, { "kind": "field", "name": "_untangleRaf", "type": { "text": "number | null" }, "privacy": "private", "default": "null" }, { "kind": "field", "name": "_untangleSettle", "type": { "text": "(() => void) | null" }, "privacy": "private", "default": "null", "description": "Applies the in-flight untangle's final positions; used when it's cut short." }, { "kind": "field", "name": "_configRevision", "type": { "text": "number" }, "privacy": "private", "default": "0", "description": "Bumped whenever the state is replaced wholesale (undo / redo / setState) so the\nguarded renderConfig / renderBranchConfig bodies rebuild against the fresh node\nobjects. Value edits don't bump it — the consumer's config DOM stays in place,\nwhich is what lets its inputs commit live without losing focus." }, { "kind": "field", "name": "_listeners", "type": { "text": "[string, EventListener][]" }, "privacy": "private", "readonly": true }, { "kind": "field", "name": "_autoSaveTimer", "type": { "text": "number | null" }, "privacy": "private", "default": "null" }, { "kind": "field", "name": "_statusTimer", "type": { "text": "number | null" }, "privacy": "private", "default": "null" }, { "kind": "field", "name": "_justSavedTimer", "type": { "text": "number | null" }, "privacy": "private", "default": "null" }, { "kind": "field", "name": "_restoring", "type": { "text": "boolean" }, "privacy": "private", "default": "false", "description": "Guards the restore prompt from re-triggering on restoreAutoSave's own setState." }, { "kind": "field", "name": "_lastSavedAt", "type": { "text": "number | null" }, "privacy": "private", "default": "null", "description": "Epoch of the newest auto-save (also picked up from storage on start)." }, { "kind": "field", "name": "_justSaved", "type": { "text": "boolean" }, "privacy": "private", "default": "false", "description": "Briefly true right after a save — flashes \"Auto-saved\" in the status pill." }, { "kind": "field", "name": "_statusNow", "privacy": "private", "description": "Re-render clock for the \"last saved Xm ago\" label." }, { "kind": "field", "name": "_restorePrompt", "type": { "text": "{ savedAt: number } | null" }, "privacy": "private", "default": "null", "description": "A fresh auto-save differing from the loaded flow — offer to restore it." }, { "kind": "field", "name": "_autoSaveKey", "type": { "text": "string" }, "privacy": "private", "description": "localStorage key for this builder's auto-saves — its id, else its heading.", "readonly": true }, { "kind": "method", "name": "_stopAutoSave", "privacy": "private" }, { "kind": "method", "name": "_restartAutoSave", "privacy": "private" }, { "kind": "field", "name": "_autoSaveTick", "privacy": "private", "description": "An empty canvas is never saved — it would clobber a stored flow with nothing." }, { "kind": "method", "name": "_readAutoSave", "privacy": "private", "return": { "type": { "text": "{ savedAt: number; state: FlowState } | null" } }, "description": "The stored auto-save, purging it when past its TTL (or unreadable)." }, { "kind": "method", "name": "restoreAutoSave", "return": { "type": { "text": "boolean" } }, "description": "Load the auto-saved flow, if one exists within the 1-day TTL." }, { "kind": "method", "name": "_offerRestoreIfNewer", "privacy": "private", "description": "A flow was just loaded — when a fresh auto-save differs from it, ask the\nuser whether to pick up their draft instead." }, { "kind": "field", "name": "_onKeyDown", "privacy": "private" }, { "kind": "method", "name": "_parsePorts", "privacy": "private", "static": true, "return": { "type": { "text": "FlowPort[] | undefined" } }, "parameters": [ { "name": "attr", "type": { "text": "string | null" } } ] }, { "kind": "method", "name": "_parseFilterOptions", "privacy": "private", "static": true, "return": { "type": { "text": "FlowFilterOption[] | undefined" } }, "parameters": [ { "name": "attr", "type": { "text": "string | null" } } ], "description": "Parse an operator / option list: a JSON array (strings or `{value,label}`) or comma-separated values." }, { "kind": "method", "name": "_nestedFilterOptions", "privacy": "private", "static": true, "return": { "type": { "text": "FlowFilterOption[] | undefined" } }, "parameters": [ { "name": "el", "type": { "text": "Element" } }, { "name": "tag", "type": { "text": "string" } } ], "description": "Option list declared as child elements — the tidy form. The element's text\nis the label; a `value` attribute overrides the stored value:\n`at least`." }, { "kind": "method", "name": "_filterFieldFromEl", "privacy": "private", "static": true, "return": { "type": { "text": "FlowFilterField | null" } }, "parameters": [ { "name": "el", "type": { "text": "Element" } } ] }, { "kind": "method", "name": "_parseBranchFilters", "privacy": "private", "static": true, "return": { "type": { "text": "FlowBranchFilter[] | undefined" } }, "parameters": [ { "name": "el", "type": { "text": "Element" } } ], "description": "A step's branch filters: the `branch-filters` JSON attribute, or nested\n`` declarations each holding ``s." }, { "kind": "method", "name": "_typeFromStep", "privacy": "private", "return": { "type": { "text": "FlowNodeType | null" } }, "parameters": [ { "name": "el", "type": { "text": "Element" } } ] }, { "kind": "field", "name": "_registerSlottedTypes", "privacy": "private", "description": "Register a FlowNodeType for every slotted ." }, { "kind": "method", "name": "registerNodeType", "return": { "type": { "text": "this" } }, "parameters": [ { "name": "type", "type": { "text": "FlowNodeType" } } ] }, { "kind": "method", "name": "registerNodeTypes", "return": { "type": { "text": "this" } }, "parameters": [ { "name": "types", "type": { "text": "FlowNodeType[]" } } ] }, { "kind": "method", "name": "getState", "return": { "type": { "text": "FlowState" } } }, { "kind": "method", "name": "setState", "parameters": [ { "name": "next", "type": { "text": "FlowState" } } ] }, { "kind": "field", "name": "value", "type": { "text": "string" } }, { "kind": "method", "name": "toJSON", "return": { "type": { "text": "FlowState" } }, "description": "The full flow state — nodes with their positions, connections, branch\ndata, and notes — ready for persisting. Lets `JSON.stringify(builder)`\nserialize the flow directly, e.g. as a POST body." }, { "kind": "field", "name": "undo" }, { "kind": "field", "name": "redo" }, { "kind": "field", "name": "untangle", "description": "Auto-arrange the nodes into evenly spaced layers that follow the flow,\nanimating them into place (wires and pills track them since everything is\nderived from the node coordinates). Undoable as a single step." }, { "kind": "method", "name": "_cancelUntangle", "privacy": "private" }, { "kind": "method", "name": "_clone", "privacy": "private", "return": { "type": { "text": "FlowState" } }, "parameters": [ { "name": "s", "type": { "text": "FlowState" } } ] }, { "kind": "method", "name": "_pushHistory", "privacy": "private" }, { "kind": "field", "name": "_commit", "privacy": "private" }, { "kind": "method", "name": "_pruneConnections", "privacy": "private", "description": "Drop connections whose endpoints reference ports that no longer exist — e.g.\nafter a user removes a node's output (branch) via its config." }, { "kind": "method", "name": "_syncSelection", "privacy": "private" }, { "kind": "method", "name": "_branchSelection", "privacy": "private", "return": { "type": { "text": "{ node: FlowNodeInstance; port: FlowPort } | null" } }, "description": "The node + output port of the branch open in the editor, if both still exist." }, { "kind": "method", "name": "_id", "privacy": "private", "return": { "type": { "text": "string" } }, "parameters": [ { "name": "prefix", "type": { "text": "string" } } ] }, { "kind": "method", "name": "_freePosition", "privacy": "private", "return": { "type": { "text": "{ x: number; y: number }" } }, "parameters": [ { "name": "x", "type": { "text": "number" } }, { "name": "y", "type": { "text": "number" } }, { "name": "excludeId", "optional": true, "type": { "text": "string" } } ], "description": "Snap to the grid and, if another node's footprint (card or branch pills)\noccupies the spot, walk outward in grid-step rings to the nearest free one." }, { "kind": "method", "name": "_addNode", "privacy": "private", "parameters": [ { "name": "typeKey", "type": { "text": "string" } }, { "name": "x", "type": { "text": "number" } }, { "name": "y", "type": { "text": "number" } } ] }, { "kind": "method", "name": "_deleteNode", "privacy": "private", "parameters": [ { "name": "id", "type": { "text": "string" } } ] }, { "kind": "method", "name": "_duplicateNode", "privacy": "private", "parameters": [ { "name": "id", "type": { "text": "string" } } ] }, { "kind": "method", "name": "_positionBelowOutput", "privacy": "private", "return": { "type": { "text": "{ x: number; y: number }" } }, "parameters": [ { "name": "source", "type": { "text": "FlowNodeInstance" } }, { "name": "port", "type": { "text": "string" } } ], "description": "Canvas position for a node newly placed off a source node's output." }, { "kind": "method", "name": "_refusesBranch", "privacy": "private", "return": { "type": { "text": "boolean" } }, "parameters": [ { "name": "node", "type": { "text": "FlowNodeInstance" } }, { "name": "port", "type": { "text": "string" } } ], "description": "Whether a node refuses the branch being asked of it: a fixed-output type\nhas only the branches it declares, so the \"new branch\" sentinel has nowhere\nto go. Checked before the history push, so a refused gesture is a no-op\nrather than an empty undo step." }, { "kind": "method", "name": "_ensureOutput", "privacy": "private", "return": { "type": { "text": "string" } }, "parameters": [ { "name": "node", "type": { "text": "FlowNodeInstance" } }, { "name": "port", "type": { "text": "string" } } ], "description": "Resolve an output port id on a node: the \"new branch\" sentinel materialises a\nfresh, labelled output port (per-instance), so it exists before connecting." }, { "kind": "method", "name": "_ensureBranchLabel", "privacy": "private", "parameters": [ { "name": "node", "type": { "text": "FlowNodeInstance" } }, { "name": "port", "type": { "text": "string" } } ], "description": "Every connected output is a configurable branch — default its name so the\npill renders, however the connection was made (arrow, drop, or move)." }, { "kind": "method", "name": "_addNodeAtOutput", "privacy": "private", "parameters": [ { "name": "sourceId", "type": { "text": "string" } }, { "name": "port", "type": { "text": "string" } }, { "name": "typeKey", "type": { "text": "string" } } ], "description": "Create a node and attach it to an open output slot of an existing node." }, { "kind": "method", "name": "_linkNodeAtOutput", "privacy": "private", "parameters": [ { "name": "sourceId", "type": { "text": "string" } }, { "name": "port", "type": { "text": "string" } }, { "name": "targetId", "type": { "text": "string" } } ], "description": "Wire an open output to an existing node — targets its first input. Fan-in\nand loops (a branch pointing back to an earlier step) are both allowed;\nonly wiring a node directly to itself is refused." }, { "kind": "method", "name": "_insertNodeOnWire", "privacy": "private", "parameters": [ { "name": "connectionId", "type": { "text": "string" } }, { "name": "typeKey", "type": { "text": "string" } } ], "description": "Insert a new node in the middle of an existing connection (split the wire)." }, { "kind": "method", "name": "_select", "privacy": "private", "parameters": [ { "name": "id", "type": { "text": "string | null" } } ] }, { "kind": "field", "name": "_onBranchPick", "privacy": "private" }, { "kind": "field", "name": "_onBranchDelete", "privacy": "private", "description": "Remove an output branch and its wire. Undoable." }, { "kind": "field", "name": "_onSelect", "privacy": "private" }, { "kind": "field", "name": "_onNodeAction", "privacy": "private" }, { "kind": "field", "name": "_onInteractionStart", "privacy": "private" }, { "kind": "field", "name": "_onOutputAssign", "privacy": "private" }, { "kind": "field", "name": "_onLinkAssign", "privacy": "private", "description": "A stray branch was attached to an existing node (fan-in)." }, { "kind": "field", "name": "_onWirePick", "privacy": "private" }, { "kind": "field", "name": "_onWireAssign", "privacy": "private" }, { "kind": "field", "name": "_onOutputMoveTarget", "privacy": "private", "description": "Re-attach the node being moved to the chosen open output slot." }, { "kind": "field", "name": "_onAddNote", "privacy": "private" }, { "kind": "field", "name": "_onNoteChange", "privacy": "private" }, { "kind": "field", "name": "_onNoteDelete", "privacy": "private" }, { "kind": "method", "name": "_onDragStart", "privacy": "private", "parameters": [ { "name": "e", "type": { "text": "DragEvent" } }, { "name": "typeKey", "type": { "text": "string" } } ] }, { "kind": "field", "name": "_onDragEnd", "privacy": "private" }, { "kind": "field", "name": "_onStepDrag", "privacy": "private" }, { "kind": "field", "name": "_onCanvasDragOver", "privacy": "private" }, { "kind": "field", "name": "_onCanvasDrop", "privacy": "private" }, { "kind": "method", "name": "_renderSteps", "privacy": "private" }, { "kind": "method", "name": "_hintFor", "privacy": "private", "return": { "type": { "text": "string" } }, "parameters": [ { "name": "group", "type": { "text": "FlowGroup" } } ] }, { "kind": "method", "name": "_renderStep", "privacy": "private", "parameters": [ { "name": "type", "type": { "text": "FlowNodeType" } } ] }, { "kind": "method", "name": "_renderStepsContent", "privacy": "private" }, { "kind": "method", "name": "_renderStepsPanel", "privacy": "private", "parameters": [ { "name": "group", "type": { "text": "FlowGroup" } }, { "name": "panelId", "type": { "text": "string" } }, { "name": "active", "type": { "text": "boolean" } } ] }, { "kind": "method", "name": "_renderInspector", "privacy": "private", "parameters": [ { "name": "node", "type": { "text": "FlowNodeInstance" } } ] }, { "kind": "method", "name": "_updateBranch", "privacy": "private", "parameters": [ { "name": "node", "type": { "text": "FlowNodeInstance" } }, { "name": "portId", "type": { "text": "string" } }, { "name": "patch", "type": { "text": "Partial" } } ], "description": "Replace one of the node's output ports (per-instance override), keeping its id." }, { "kind": "method", "name": "_saveBranchConditions", "privacy": "private", "parameters": [ { "name": "node", "type": { "text": "FlowNodeInstance" } }, { "name": "port", "type": { "text": "FlowPort" } }, { "name": "conditions", "type": { "text": "FlowBranchConditions" } } ], "description": "Persist the built-in conditions editor's draft onto the branch and close it. Undoable." }, { "kind": "method", "name": "_renderBranchEditor", "privacy": "private", "parameters": [ { "name": "node", "type": { "text": "FlowNodeInstance" } }, { "name": "port", "type": { "text": "FlowPort" } } ] }, { "kind": "method", "name": "_renderRightPanel", "privacy": "private" }, { "kind": "method", "name": "_renderHeader", "privacy": "private" }, { "kind": "method", "name": "_renderSidebar", "privacy": "private" }, { "kind": "method", "name": "_renderAutoSaveStatus", "privacy": "private" }, { "kind": "method", "name": "_renderRestorePrompt", "privacy": "private" }, { "kind": "method", "name": "_renderPicker", "privacy": "private" }, { "kind": "method", "name": "_pickType", "privacy": "private", "parameters": [ { "name": "typeKey", "type": { "text": "string" } } ] } ], "events": [ { "description": "Emitted whenever the flow state changes. `event.detail.state` is the new FlowState.", "name": "zn-flow-change" }, { "description": "Emitted when the selected node changes. `event.detail.nodeId`.", "name": "zn-flow-selection-change" }, { "description": "Emitted when a connection is created. `event.detail.connection`.", "name": "zn-flow-connect" } ], "attributes": [ { "name": "heading", "type": { "text": "string" }, "default": "''", "fieldName": "heading" }, { "name": "subheading", "type": { "text": "string" }, "default": "''", "fieldName": "subheading" }, { "name": "auto-save", "type": { "text": "number | null" }, "default": "null", "description": "Auto-save the flow to localStorage (1-day TTL). Omit to disable. A bare\n`auto-save` saves every 5 minutes; a numeric value sets the interval in\nminutes (`auto-save=\"5\"`). Restore with `restoreAutoSave()`.", "fieldName": "autoSave" }, { "name": "entrypoints-hint", "type": { "text": "string" }, "default": "''", "description": "Optional hint shown beneath each steps-panel tab.", "fieldName": "entrypointsHint" }, { "name": "triggers-hint", "type": { "text": "string" }, "default": "''", "fieldName": "triggersHint" }, { "name": "actions-hint", "type": { "text": "string" }, "default": "''", "fieldName": "actionsHint" }, { "name": "rules-hint", "type": { "text": "string" }, "default": "''", "fieldName": "rulesHint" } ], "superclass": { "name": "ZincElement", "module": "/src/internal/zinc-element" }, "summary": "A drag-and-drop visual flow builder: steps panel, pan/zoom canvas, and a config inspector.", "tagNameWithoutPrefix": "flow-builder", "tagName": "zn-flow-builder", "customElement": true, "jsDoc": "/**\n * @summary A drag-and-drop visual flow builder: steps panel, pan/zoom canvas, and a config inspector.\n * @documentation https://zinc.style/components/flow-builder\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-icon\n * @dependency zn-input\n * @dependency zn-tabs\n * @dependency zn-navbar\n * @dependency zn-flow-branch-conditions\n * @dependency zn-flow-canvas\n * @dependency zn-flow-node\n *\n * @event zn-flow-change - Emitted whenever the flow state changes. `event.detail.state` is the new FlowState.\n * @event zn-flow-selection-change - Emitted when the selected node changes. `event.detail.nodeId`.\n * @event zn-flow-connect - Emitted when a connection is created. `event.detail.connection`.\n *\n * @slot - `` type declarations; never displayed, each `group`/`category` routes the\n * step into the right tab and collapsible grouping of the rendered panel. A step may nest\n * `` declarations (each holding ``s, whose operator /\n * option choices are nested `` / `` elements) — or set a\n * `branch-filters` JSON attribute — to drive the built-in branch conditions editor.\n * @slot header-left - Actions shown on the left of the header bar (e.g. Close / Undo All Changes).\n * @slot header-right - Actions shown on the right of the header bar (e.g. Apply Changes).\n * @slot sidebar - Extra right-panel content (status, version history), below the configuration errors.\n *\n * @csspart base - The grid wrapper.\n * @csspart header - The full-width header action bar (only rendered when header slots are filled).\n * @csspart steps - The left steps panel.\n * @csspart inspector - The right panel while a node or branch is selected.\n */", "documentation": "https://zinc.style/components/flow-builder", "status": "experimental", "since": "1.0", "dependencies": [ "zn-icon", "zn-input", "zn-tabs", "zn-navbar", "zn-flow-branch-conditions", "zn-flow-canvas", "zn-flow-node" ] }, { "kind": "variable", "name": "port" } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "ZnFlowBuilder", "module": "components/flow-builder/flow-builder.js" } } ] }, { "kind": "javascript-module", "path": "components/form-actions/form-actions.js", "declarations": [ { "kind": "class", "description": "", "name": "ZnFormActions", "cssParts": [ { "description": "The cancel button.", "name": "cancel-button" }, { "description": "The reset button.", "name": "reset-button" }, { "description": "The submit button.", "name": "submit-button" } ], "slots": [ { "description": "Extra actions, placed before the buttons.", "name": "" } ], "members": [ { "kind": "field", "name": "dependencies", "type": { "text": "object" }, "static": true, "default": "{ 'zn-button': ZnButton }" }, { "kind": "field", "name": "submitText", "type": { "text": "string" }, "default": "'Save'", "description": "The submit button's text.", "attribute": "submit-text" }, { "kind": "field", "name": "submitIcon", "type": { "text": "string" }, "default": "'check@lu'", "description": "The submit button's icon.", "attribute": "submit-icon" }, { "kind": "field", "name": "withCancel", "type": { "text": "boolean" }, "default": "false", "description": "Adds a cancel button. Closes the containing dialog or slideout, if any, and emits `zn-cancel`.", "attribute": "with-cancel" }, { "kind": "field", "name": "cancelText", "type": { "text": "string" }, "default": "'Cancel'", "description": "The cancel button's text.", "attribute": "cancel-text" }, { "kind": "field", "name": "cancelIcon", "type": { "text": "string" }, "default": "'x@lu'", "description": "The cancel button's icon.", "attribute": "cancel-icon" }, { "kind": "field", "name": "withReset", "type": { "text": "boolean" }, "default": "false", "description": "Adds a reset button that resets the form.", "attribute": "with-reset" }, { "kind": "field", "name": "resetText", "type": { "text": "string" }, "default": "'Reset'", "description": "The reset button's text.", "attribute": "reset-text" }, { "kind": "field", "name": "resetIcon", "type": { "text": "string" }, "default": "'rotate-ccw@lu'", "description": "The reset button's icon.", "attribute": "reset-icon" }, { "kind": "field", "name": "form", "type": { "text": "string" }, "description": "The id of the form to act on. If omitted, the closest containing form is used.", "attribute": "form" }, { "kind": "method", "name": "getForm", "privacy": "private", "return": { "type": { "text": "HTMLFormElement | null" } } }, { "kind": "field", "name": "handleCancel", "privacy": "private" }, { "kind": "field", "name": "handleReset", "privacy": "private" }, { "kind": "field", "name": "handleSubmit", "privacy": "private" } ], "events": [ { "description": "Emitted when the cancel button is clicked.", "name": "zn-cancel" } ], "attributes": [ { "name": "submit-text", "type": { "text": "string" }, "default": "'Save'", "description": "The submit button's text.", "fieldName": "submitText" }, { "name": "submit-icon", "type": { "text": "string" }, "default": "'check@lu'", "description": "The submit button's icon.", "fieldName": "submitIcon" }, { "name": "with-cancel", "type": { "text": "boolean" }, "default": "false", "description": "Adds a cancel button. Closes the containing dialog or slideout, if any, and emits `zn-cancel`.", "fieldName": "withCancel" }, { "name": "cancel-text", "type": { "text": "string" }, "default": "'Cancel'", "description": "The cancel button's text.", "fieldName": "cancelText" }, { "name": "cancel-icon", "type": { "text": "string" }, "default": "'x@lu'", "description": "The cancel button's icon.", "fieldName": "cancelIcon" }, { "name": "with-reset", "type": { "text": "boolean" }, "default": "false", "description": "Adds a reset button that resets the form.", "fieldName": "withReset" }, { "name": "reset-text", "type": { "text": "string" }, "default": "'Reset'", "description": "The reset button's text.", "fieldName": "resetText" }, { "name": "reset-icon", "type": { "text": "string" }, "default": "'rotate-ccw@lu'", "description": "The reset button's icon.", "fieldName": "resetIcon" }, { "name": "form", "type": { "text": "string" }, "description": "The id of the form to act on. If omitted, the closest containing form is used.", "fieldName": "form" } ], "superclass": { "name": "ZincElement", "module": "/src/internal/zinc-element" }, "summary": "Standard action row for the bottom of a form. Renders a submit button by default; opt in to more\nwith `with-cancel` and `with-reset`.", "tagNameWithoutPrefix": "form-actions", "tagName": "zn-form-actions", "customElement": true, "jsDoc": "/**\n * @summary Standard action row for the bottom of a form. Renders a submit button by default; opt in to more\n * with `with-cancel` and `with-reset`.\n * @documentation https://zinc.style/components/form-actions\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-button\n *\n * @event zn-cancel - Emitted when the cancel button is clicked.\n *\n * @slot - Extra actions, placed before the buttons.\n *\n * @csspart cancel-button - The cancel button.\n * @csspart reset-button - The reset button.\n * @csspart submit-button - The submit button.\n */", "documentation": "https://zinc.style/components/form-actions", "status": "experimental", "since": "1.0", "dependencies": [ "zn-button" ] } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "ZnFormActions", "module": "components/form-actions/form-actions.js" } } ] }, { "kind": "javascript-module", "path": "components/form-group/form-group.js", "declarations": [ { "kind": "class", "description": "", "name": "ZnFormGroup", "cssProperties": [ { "description": "Offset the label column sticks at while the inputs scroll past.", "name": "--zn-form-group-sticky-top" } ], "cssParts": [ { "description": "The column holding the label, help text and chip.", "name": "form-control-text" } ], "slots": [ { "description": "The default slot.", "name": "" }, { "description": "A chip displayed under the form group's help text.", "name": "chip" } ], "members": [ { "kind": "field", "name": "hasSlotController", "privacy": "private", "readonly": true, "default": "new HasSlotController(this, 'help-text', 'label', 'chip')" }, { "kind": "field", "name": "label", "type": { "text": "string" }, "default": "''", "description": "The form group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.", "attribute": "label" }, { "kind": "field", "name": "labelTooltip", "type": { "text": "string" }, "default": "''", "description": "Text that appears in a tooltip next to the label. If you need to display HTML in the tooltip, use the\n`label-tooltip` slot instead.", "attribute": "label-tooltip" }, { "kind": "field", "name": "helpText", "type": { "text": "string" }, "default": "''", "description": "The form groups help text. If you need to display HTML, use the `help-text` slot instead.", "attribute": "help-text" }, { "kind": "field", "name": "forceCols", "type": { "text": "boolean" }, "default": "false", "attribute": "cols" }, { "kind": "field", "name": "layout", "type": { "text": "string" }, "default": "\"1,2\"", "attribute": "layout" }, { "kind": "field", "name": "pad", "type": { "text": "boolean" }, "default": "false", "attribute": "pad" }, { "kind": "field", "name": "tracked", "type": { "text": "HTMLElement | null" }, "privacy": "private", "default": "null", "description": "The scroller the label is tracked against by hand; null while native sticky is enough." }, { "kind": "field", "name": "frame", "type": { "text": "number" }, "privacy": "private", "default": "0" }, { "kind": "field", "name": "rebind", "type": { "text": "boolean" }, "privacy": "private", "default": "false" }, { "kind": "field", "name": "offset", "type": { "text": "number" }, "privacy": "private", "default": "0" }, { "kind": "field", "name": "resizeObserver", "type": { "text": "ResizeObserver | null" }, "privacy": "private", "default": "null" }, { "kind": "field", "name": "labelColumn", "type": { "text": "HTMLElement | null" }, "privacy": "private", "readonly": true }, { "kind": "method", "name": "schedule", "privacy": "private", "parameters": [ { "name": "rebind", "default": "false", "type": { "text": "boolean" } } ], "description": "Coalesces scroll and resize work into one frame, and out of the ResizeObserver callback." }, { "kind": "method", "name": "findScroller", "privacy": "private", "description": "Native sticky only follows the nearest scroll container. Where that container isn't the one\nthe user actually scrolls — a `zn-panel` body sized to its content inside a scrolling\nslideout, say — the label never moves, so it gets translated by hand instead." }, { "kind": "method", "name": "trackScroller", "privacy": "private", "parameters": [ { "name": "scroller", "type": { "text": "HTMLElement | null" } } ] }, { "kind": "method", "name": "scrollTarget", "privacy": "private", "return": { "type": { "text": "EventTarget | null" } }, "parameters": [ { "name": "scroller", "type": { "text": "HTMLElement | null" } } ], "description": "The document scrolls through the window, every other scroller reports its own events." }, { "kind": "field", "name": "onScroll", "privacy": "private", "readonly": true }, { "kind": "field", "name": "onViewportResize", "privacy": "private", "readonly": true }, { "kind": "method", "name": "positionLabel", "privacy": "private" }, { "kind": "method", "name": "nearestScrollContainer", "privacy": "private", "return": { "type": { "text": "HTMLElement | null" } }, "parameters": [ { "name": "from", "type": { "text": "HTMLElement" } } ], "description": "The box native sticky would anchor to, whether or not it can be scrolled." }, { "kind": "method", "name": "scrollingAncestor", "privacy": "private", "return": { "type": { "text": "HTMLElement | null" } }, "parameters": [ { "name": "from", "type": { "text": "HTMLElement" } } ], "description": "The nearest ancestor the user can actually scroll, falling back to the document." }, { "kind": "method", "name": "isScrollContainer", "privacy": "private", "parameters": [ { "name": "overflow", "type": { "text": "string" } } ] }, { "kind": "method", "name": "ancestors", "privacy": "private", "return": { "type": { "text": "HTMLElement[]" } }, "parameters": [ { "name": "from", "type": { "text": "HTMLElement" } } ], "description": "Walks the flattened tree, so slots and shadow boundaries are crossed the way layout does." } ], "attributes": [ { "name": "label", "type": { "text": "string" }, "default": "''", "description": "The form group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.", "fieldName": "label" }, { "name": "label-tooltip", "type": { "text": "string" }, "default": "''", "description": "Text that appears in a tooltip next to the label. If you need to display HTML in the tooltip, use the\n`label-tooltip` slot instead.", "fieldName": "labelTooltip" }, { "name": "help-text", "type": { "text": "string" }, "default": "''", "description": "The form groups help text. If you need to display HTML, use the `help-text` slot instead.", "fieldName": "helpText" }, { "name": "cols", "type": { "text": "boolean" }, "default": "false", "fieldName": "forceCols" }, { "name": "layout", "type": { "text": "string" }, "default": "\"1,2\"", "fieldName": "layout" }, { "name": "pad", "type": { "text": "boolean" }, "default": "false", "fieldName": "pad" } ], "superclass": { "name": "ZincElement", "module": "/src/internal/zinc-element" }, "summary": "Short summary of the component's intended use.", "tagNameWithoutPrefix": "form-group", "tagName": "zn-form-group", "customElement": true, "jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/form-group\n * @status experimental\n * @since 1.0\n *\n * @slot - The default slot.\n * @slot chip - A chip displayed under the form group's help text.\n *\n * @csspart form-control-text - The column holding the label, help text and chip.\n *\n * @cssproperty --zn-form-group-sticky-top - Offset the label column sticks at while the inputs scroll past.\n *\n */", "documentation": "https://zinc.style/components/form-group", "status": "experimental", "since": "1.0" } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "ZnFormGroup", "module": "components/form-group/form-group.js" } } ] }, { "kind": "javascript-module", "path": "components/header/header.js", "declarations": [ { "kind": "class", "description": "", "name": "ZnHeader", "cssProperties": [ { "description": "An example CSS custom property.", "name": "--example" } ], "cssParts": [ { "description": "The component's base wrapper.", "name": "base" }, { "description": "The container that wraps the actions slot.", "name": "header-right" } ], "slots": [ { "description": "The default slot.", "name": "" }, { "description": "An example slot.", "name": "example" } ], "members": [ { "kind": "field", "name": "hasSlotController", "privacy": "private", "readonly": true, "default": "new HasSlotController(this, '[default]', 'nav', 'breadcrumb')" }, { "kind": "field", "name": "fullLocation", "type": { "text": "string" }, "attribute": "full-location" }, { "kind": "field", "name": "entityId", "type": { "text": "string" }, "attribute": "entity-id" }, { "kind": "field", "name": "entityIdShow", "type": { "text": "boolean" }, "attribute": "entity-id-show" }, { "kind": "field", "name": "transparent", "type": { "text": "boolean" }, "default": "false", "attribute": "transparent" }, { "kind": "field", "name": "caption", "type": { "text": "string" }, "attribute": "caption" }, { "kind": "field", "name": "icon", "type": { "text": "string" }, "attribute": "icon" }, { "kind": "field", "name": "navigation", "type": { "text": "array" }, "default": "[]", "attribute": "navigation" }, { "kind": "field", "name": "fullWidth", "type": { "text": "boolean" }, "attribute": "full-width" }, { "kind": "field", "name": "previousPath", "type": { "text": "string" }, "attribute": "previous-path" }, { "kind": "field", "name": "previousTarget", "type": { "text": "string" }, "attribute": "previous-target" }, { "kind": "field", "name": "hideBreadcrumb", "type": { "text": "boolean" }, "default": "false", "attribute": "hide-breadcrumb" }, { "kind": "field", "name": "navbar", "type": { "text": "ZnNavbar" }, "privacy": "private" }, { "kind": "field", "name": "handleAltPress" }, { "kind": "field", "name": "handleAltUp" }, { "kind": "method", "name": "updateNav" } ], "events": [ { "description": "Emitted as an example.", "name": "zn-event-name" } ], "attributes": [ { "name": "full-location", "type": { "text": "string" }, "fieldName": "fullLocation" }, { "name": "entity-id", "type": { "text": "string" }, "fieldName": "entityId" }, { "name": "entity-id-show", "type": { "text": "boolean" }, "fieldName": "entityIdShow" }, { "name": "transparent", "type": { "text": "boolean" }, "default": "false", "fieldName": "transparent" }, { "name": "caption", "type": { "text": "string" }, "fieldName": "caption" }, { "name": "icon", "type": { "text": "string" }, "fieldName": "icon" }, { "name": "navigation", "type": { "text": "array" }, "default": "[]", "fieldName": "navigation" }, { "name": "full-width", "type": { "text": "boolean" }, "fieldName": "fullWidth" }, { "name": "previous-path", "type": { "text": "string" }, "fieldName": "previousPath" }, { "name": "previous-target", "type": { "text": "string" }, "fieldName": "previousTarget" }, { "name": "hide-breadcrumb", "type": { "text": "boolean" }, "default": "false", "fieldName": "hideBreadcrumb" } ], "superclass": { "name": "ZincElement", "module": "/src/internal/zinc-element" }, "summary": "Short summary of the component's intended use.", "tagNameWithoutPrefix": "header", "tagName": "zn-header", "customElement": true, "jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/header\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-example\n *\n * @event zn-event-name - Emitted as an example.\n *\n * @slot - The default slot.\n * @slot example - An example slot.\n *\n * @csspart base - The component's base wrapper.\n * @csspart header-right - The container that wraps the actions slot.\n *\n * @cssproperty --example - An example CSS custom property.\n */", "documentation": "https://zinc.style/components/header", "status": "experimental", "since": "1.0", "dependencies": [ "zn-example" ] } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "ZnHeader", "module": "components/header/header.js" } } ] }, { "kind": "javascript-module", "path": "components/hover-container/hover-container.js", "declarations": [ { "kind": "class", "description": "", "name": "ZnHoverContainer", "slots": [ { "description": "The content of the hover-container", "name": "" }, { "description": "The anchor the hover-container is attached to.", "name": "anchor" } ], "members": [ { "kind": "field", "name": "hoverTimeout", "type": { "text": "number" }, "privacy": "private" }, { "kind": "field", "name": "closeWatcher", "type": { "text": "CloseWatcher | null" }, "privacy": "private" }, { "kind": "field", "name": "defaultSlot", "type": { "text": "HTMLSlotElement" } }, { "kind": "field", "name": "body", "type": { "text": "HTMLElement" } }, { "kind": "field", "name": "popup", "type": { "text": "Popup" } }, { "kind": "field", "name": "content", "type": { "text": "string" }, "default": "''", "attribute": "content" }, { "kind": "field", "name": "placement", "type": { "text": "| 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' |\n 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'" }, "default": "'top'", "attribute": "placement" }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "default": "false", "attribute": "disabled", "reflects": true }, { "kind": "field", "name": "distance", "type": { "text": "number" }, "default": "4", "attribute": "distance" }, { "kind": "field", "name": "open", "type": { "text": "boolean" }, "default": "false", "attribute": "open", "reflects": true }, { "kind": "field", "name": "skidding", "type": { "text": "number" }, "default": "0", "attribute": "skidding" }, { "kind": "field", "name": "trigger", "type": { "text": "string" }, "default": "'hover focus'", "attribute": "trigger" }, { "kind": "field", "name": "hoist", "type": { "text": "boolean" }, "default": "true", "attribute": "hoist" }, { "kind": "method", "name": "hasTrigger", "privacy": "private", "parameters": [ { "name": "triggerType", "type": { "text": "string" } } ] }, { "kind": "field", "name": "handleBlur", "privacy": "private" }, { "kind": "field", "name": "handleClick", "privacy": "private" }, { "kind": "field", "name": "handleFocus", "privacy": "private" }, { "kind": "field", "name": "handleDocumentKeyDown", "privacy": "private" }, { "kind": "method", "name": "handleMouseOver", "privacy": "private" }, { "kind": "method", "name": "handleMouseOut", "privacy": "private" }, { "kind": "method", "name": "handleOpenChange" }, { "kind": "method", "name": "handleOptionsChange" }, { "kind": "method", "name": "handleDisabledChange" }, { "kind": "method", "name": "show" }, { "kind": "method", "name": "hide" } ], "events": [ { "description": "Emitted when the hover-container is shown.", "name": "zn-show" }, { "description": "Emitted after the hover-container is shown.", "name": "zn-after-show" }, { "description": "Emitted when the hover-container is hidden.", "name": "zn-hide" }, { "description": "Emitted after the hover-container is hidden.", "name": "zn-after-hide" } ], "attributes": [ { "name": "content", "type": { "text": "string" }, "default": "''", "fieldName": "content" }, { "name": "placement", "type": { "text": "| 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' |\n 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'" }, "default": "'top'", "fieldName": "placement" }, { "name": "disabled", "type": { "text": "boolean" }, "default": "false", "fieldName": "disabled" }, { "name": "distance", "type": { "text": "number" }, "default": "4", "fieldName": "distance" }, { "name": "open", "type": { "text": "boolean" }, "default": "false", "fieldName": "open" }, { "name": "skidding", "type": { "text": "number" }, "default": "0", "fieldName": "skidding" }, { "name": "trigger", "type": { "text": "string" }, "default": "'hover focus'", "fieldName": "trigger" }, { "name": "hoist", "type": { "text": "boolean" }, "default": "true", "fieldName": "hoist" } ], "superclass": { "name": "ZincElement", "module": "/src/internal/zinc-element" }, "summary": "The HoverContainer component is used to display additional information when a user hovers over or clicks\non an element.", "tagNameWithoutPrefix": "hover-container", "tagName": "zn-hover-container", "customElement": true, "jsDoc": "/**\n * @summary The HoverContainer component is used to display additional information when a user hovers over or clicks\n * on an element.\n *\n * @documentation https://zinc.style/components/hover-container\n * @status experimental\n * @since 1.0\n *\n * @event zn-show - Emitted when the hover-container is shown.\n * @event zn-after-show - Emitted after the hover-container is shown.\n * @event zn-hide - Emitted when the hover-container is hidden.\n * @event zn-after-hide - Emitted after the hover-container is hidden.\n *\n * @slot - The content of the hover-container\n * @slot anchor - The anchor the hover-container is attached to.\n */", "documentation": "https://zinc.style/components/hover-container", "status": "experimental", "since": "1.0" } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "ZnHoverContainer", "module": "components/hover-container/hover-container.js" } } ] }, { "kind": "javascript-module", "path": "components/icon/icon.js", "declarations": [ { "kind": "class", "description": "", "name": "ZnIcon", "cssProperties": [ { "description": "An example CSS custom property.", "name": "--example" } ], "cssParts": [ { "description": "The component's base wrapper.", "name": "base" } ], "slots": [ { "description": "The default slot.", "name": "" }, { "description": "An example slot.", "name": "example" } ], "members": [ { "kind": "field", "name": "src", "type": { "text": "string" }, "attribute": "src", "reflects": true }, { "kind": "field", "name": "alt", "type": { "text": "string" }, "attribute": "alt", "reflects": true }, { "kind": "field", "name": "size", "type": { "text": "number" }, "default": "24", "attribute": "size", "reflects": true }, { "kind": "field", "name": "round", "type": { "text": "boolean" }, "default": "false", "attribute": "round", "reflects": true }, { "kind": "field", "name": "tile", "type": { "text": "boolean" }, "default": "false", "attribute": "tile", "reflects": true }, { "kind": "field", "name": "depth", "type": { "text": "boolean" }, "default": "false", "attribute": "depth", "reflects": true }, { "kind": "field", "name": "library", "type": { "text": "IconLibrary" }, "attribute": "library", "reflects": true }, { "kind": "field", "name": "color", "type": { "text": "IconColor" }, "attribute": "color", "reflects": true }, { "kind": "field", "name": "fill", "type": { "text": "IconColor" }, "attribute": "fill", "reflects": true }, { "kind": "field", "name": "padded", "type": { "text": "boolean" }, "default": "false", "attribute": "padded" }, { "kind": "field", "name": "blink", "type": { "text": "boolean" }, "default": "false", "attribute": "blink" }, { "kind": "field", "name": "squared", "type": { "text": "boolean" }, "default": "false", "attribute": "squared" }, { "kind": "field", "name": "presetColors", "privacy": "private", "static": true, "readonly": true, "default": "new Set([ 'default', 'primary', 'accent', 'info', 'warning', 'error', 'success', 'white', 'disabled', 'red', 'blue', 'green', 'orange', 'yellow', 'indigo', 'violet', 'pink', 'grey', ])" }, { "kind": "method", "name": "isPresetColor", "privacy": "private", "return": { "type": { "text": "boolean" } }, "parameters": [ { "name": "color", "type": { "text": "string" } } ] }, { "kind": "field", "name": "gravatarOptions", "type": { "text": "string" }, "default": "\"\"" }, { "kind": "field", "name": "defaultLibrary", "type": { "text": "IconLibrary" }, "default": "\"material-symbols-outlined\"" }, { "kind": "field", "name": "libraryAutoSet", "type": { "text": "boolean" }, "privacy": "private", "default": "false" }, { "kind": "method", "name": "convertToLibrary", "return": { "type": { "text": "IconLibrary" } }, "parameters": [ { "name": "input", "type": { "text": "string" } } ] }, { "kind": "method", "name": "convertIndicatorToLibrary", "privacy": "private", "return": { "type": { "text": "IconLibrary | undefined" } }, "parameters": [ { "name": "input", "type": { "text": "string" } } ] }, { "kind": "method", "name": "getUpdateComplete", "privacy": "protected", "return": { "type": { "text": "Promise" } } }, { "kind": "method", "name": "parseSrc", "privacy": "private" }, { "kind": "method", "name": "applyHashFragment", "privacy": "private", "parameters": [ { "name": "hashFragment", "type": { "text": "string" } } ] }, { "kind": "method", "name": "normalizeRavatarEmail", "privacy": "private", "parameters": [ { "name": "email", "type": { "text": "string" } } ] }, { "kind": "method", "name": "getAvatarInitials", "privacy": "private", "parameters": [ { "name": "avatar", "type": { "text": "string" } } ] }, { "kind": "method", "name": "renderLucideIcon", "privacy": "private" }, { "kind": "method", "name": "getLucideIcon", "privacy": "private", "return": { "type": { "text": "IconNode | undefined" } }, "parameters": [ { "name": "src", "default": "''" } ] }, { "kind": "method", "name": "toPascalCase", "privacy": "private", "parameters": [ { "name": "input", "type": { "text": "string" } } ] }, { "kind": "method", "name": "getLucideSvg", "privacy": "private", "parameters": [ { "name": "icon", "type": { "text": "IconNode" } } ] }, { "kind": "method", "name": "getSvgAttributes", "privacy": "private", "parameters": [ { "name": "attrs", "type": { "text": "SVGProps" } } ] }, { "kind": "method", "name": "escapeSvgAttribute", "privacy": "private", "parameters": [ { "name": "value", "type": { "text": "string" } } ] }, { "kind": "method", "name": "getColorForAvatar", "privacy": "protected", "parameters": [ { "name": "avatarInitials", "type": { "text": "string" } } ] } ], "events": [ { "description": "Emitted as an example.", "name": "zn-event-name" } ], "attributes": [ { "name": "src", "type": { "text": "string" }, "fieldName": "src" }, { "name": "alt", "type": { "text": "string" }, "fieldName": "alt" }, { "name": "size", "type": { "text": "number" }, "default": "24", "fieldName": "size" }, { "name": "round", "type": { "text": "boolean" }, "default": "false", "fieldName": "round" }, { "name": "tile", "type": { "text": "boolean" }, "default": "false", "fieldName": "tile" }, { "name": "depth", "type": { "text": "boolean" }, "default": "false", "fieldName": "depth" }, { "name": "library", "type": { "text": "IconLibrary" }, "fieldName": "library" }, { "name": "color", "type": { "text": "IconColor" }, "fieldName": "color" }, { "name": "fill", "type": { "text": "IconColor" }, "fieldName": "fill" }, { "name": "padded", "type": { "text": "boolean" }, "default": "false", "fieldName": "padded" }, { "name": "blink", "type": { "text": "boolean" }, "default": "false", "fieldName": "blink" }, { "name": "squared", "type": { "text": "boolean" }, "default": "false", "fieldName": "squared" } ], "superclass": { "name": "ZincElement", "module": "/src/internal/zinc-element" }, "summary": "Short summary of the component's intended use.", "tagNameWithoutPrefix": "icon", "tagName": "zn-icon", "customElement": true, "jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/icon\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-example\n *\n * @event zn-event-name - Emitted as an example.\n *\n * @slot - The default slot.\n * @slot example - An example slot.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --example - An example CSS custom property.\n */", "documentation": "https://zinc.style/components/icon", "status": "experimental", "since": "1.0", "dependencies": [ "zn-example" ] } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "ZnIcon", "module": "components/icon/icon.js" } } ] }, { "kind": "javascript-module", "path": "components/icon-picker/icon-picker.js", "declarations": [ { "kind": "class", "description": "", "name": "ZnIconPicker", "members": [ { "kind": "field", "name": "dependencies", "type": { "text": "object" }, "static": true, "default": "{ 'zn-icon': ZnIcon, 'zn-button': ZnButton, 'zn-dialog': ZnDialog, 'zn-input': ZnInput, 'zn-select': ZnSelect, 'zn-option': ZnOption }" }, { "kind": "field", "name": "formControlController", "privacy": "private", "readonly": true, "default": "new FormControlController(this, { assumeInteractionOn: ['zn-change'], // With allow-upload, a chosen file is submitted under `name` in place of // the icon string — the two are mutually exclusive. value: (el: ZnIconPicker) => el._file ?? el.icon, setValue: (el: ZnIconPicker, value: string) => { el.clearFile(); el.icon = value ?? ''; } })" }, { "kind": "field", "name": "name", "type": { "text": "string" }, "default": "''", "attribute": "name" }, { "kind": "field", "name": "icon", "type": { "text": "string" }, "default": "''", "attribute": "icon" }, { "kind": "field", "name": "label", "type": { "text": "string" }, "default": "''", "attribute": "label" }, { "kind": "field", "name": "library", "type": { "text": "string" }, "default": "'material-symbols-outlined'", "attribute": "library" }, { "kind": "field", "name": "color", "type": { "text": "string" }, "default": "''", "attribute": "color" }, { "kind": "field", "name": "noColor", "type": { "text": "boolean" }, "default": "false", "attribute": "no-color" }, { "kind": "field", "name": "noLibrary", "type": { "text": "boolean" }, "default": "false", "attribute": "no-library" }, { "kind": "field", "name": "helpText", "type": { "text": "string" }, "default": "''", "attribute": "help-text" }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "default": "false", "attribute": "disabled", "reflects": true }, { "kind": "field", "name": "required", "type": { "text": "boolean" }, "default": "false", "attribute": "required", "reflects": true }, { "kind": "field", "name": "triggerSubmit", "type": { "text": "boolean" }, "default": "false", "attribute": "trigger-submit" }, { "kind": "field", "name": "allowUpload", "type": { "text": "boolean" }, "default": "false", "attribute": "allow-upload" }, { "kind": "field", "name": "accept", "type": { "text": "string" }, "default": "'image/*'", "attribute": "accept" }, { "kind": "field", "name": "form", "type": { "text": "string" }, "attribute": "form", "reflects": true }, { "kind": "field", "name": "defaultValue", "type": { "text": "string" }, "default": "''" }, { "kind": "field", "name": "_dialogOpen", "type": { "text": "boolean" }, "privacy": "private", "default": "false" }, { "kind": "field", "name": "_searchQuery", "type": { "text": "string" }, "privacy": "private", "default": "''" }, { "kind": "field", "name": "_iconList", "type": { "text": "string[]" }, "privacy": "private", "default": "[]" }, { "kind": "field", "name": "_filteredIcons", "type": { "text": "string[]" }, "privacy": "private", "default": "[]" }, { "kind": "field", "name": "_pendingIcon", "type": { "text": "string" }, "privacy": "private", "default": "''" }, { "kind": "field", "name": "_pendingLibrary", "type": { "text": "string" }, "privacy": "private", "default": "''" }, { "kind": "field", "name": "_pendingColor", "type": { "text": "string" }, "privacy": "private", "default": "''" }, { "kind": "field", "name": "_pendingFile", "type": { "text": "File | null" }, "privacy": "private", "default": "null" }, { "kind": "field", "name": "_pendingFileUrl", "type": { "text": "string | null" }, "privacy": "private", "default": "null" }, { "kind": "field", "name": "_mode", "type": { "text": "'icon' | 'upload'" }, "privacy": "private", "default": "'icon'" }, { "kind": "field", "name": "_file", "type": { "text": "File | null" }, "privacy": "private", "default": "null" }, { "kind": "field", "name": "_fileUrl", "type": { "text": "string | null" }, "privacy": "private", "default": "null" }, { "kind": "field", "name": "_dialog", "type": { "text": "ZnDialog" }, "privacy": "private" }, { "kind": "field", "name": "_fileInput", "type": { "text": "HTMLInputElement" }, "privacy": "private" }, { "kind": "field", "name": "value", "type": { "text": "string" } }, { "kind": "field", "name": "file", "type": { "text": "File | null" }, "description": "The chosen file when the user uploaded an image instead of picking an icon.", "readonly": true }, { "kind": "field", "name": "isImageValue", "type": { "text": "boolean" }, "description": "True when the current value renders as an image (an uploaded file or a URL) rather than a library icon.", "readonly": true }, { "kind": "field", "name": "validity", "type": { "text": "ValidityState" }, "readonly": true }, { "kind": "field", "name": "validationMessage", "type": { "text": "string" }, "readonly": true }, { "kind": "method", "name": "checkValidity", "return": { "type": { "text": "boolean" } } }, { "kind": "method", "name": "getForm", "return": { "type": { "text": "HTMLFormElement | null" } } }, { "kind": "method", "name": "reportValidity", "return": { "type": { "text": "boolean" } } }, { "kind": "method", "name": "setCustomValidity", "parameters": [ { "name": "_message", "type": { "text": "string" } } ] }, { "kind": "field", "name": "freeInputLibraries", "privacy": "private", "static": true, "readonly": true, "default": "new Set(['gravatar', 'libravatar', 'avatar'])" }, { "kind": "method", "name": "isFreeInputLibrary", "privacy": "private", "return": { "type": { "text": "boolean" } }, "parameters": [ { "name": "library", "type": { "text": "string" } } ] }, { "kind": "method", "name": "getIconsForLibrary", "privacy": "private", "return": { "type": { "text": "Promise" } }, "parameters": [ { "name": "library", "type": { "text": "string" } } ] }, { "kind": "method", "name": "openDialog", "privacy": "private" }, { "kind": "method", "name": "closeDialog", "privacy": "private" }, { "kind": "method", "name": "handleConfirm", "privacy": "private" }, { "kind": "method", "name": "handleCancel", "privacy": "private" }, { "kind": "method", "name": "handleFileSelect", "privacy": "private", "parameters": [ { "name": "e", "type": { "text": "Event" } } ] }, { "kind": "method", "name": "discardPendingFile", "privacy": "private" }, { "kind": "method", "name": "clearFile", "privacy": "private" }, { "kind": "method", "name": "syncHiddenInputs", "privacy": "private" }, { "kind": "method", "name": "handleSearchInput", "privacy": "private", "parameters": [ { "name": "e", "type": { "text": "Event" } } ] }, { "kind": "method", "name": "filterIcons", "privacy": "private" }, { "kind": "method", "name": "handleIconSelect", "privacy": "private", "parameters": [ { "name": "iconName", "type": { "text": "string" } } ] }, { "kind": "method", "name": "handleLibraryChange", "privacy": "private", "parameters": [ { "name": "e", "type": { "text": "Event" } } ] }, { "kind": "method", "name": "handleColorInput", "privacy": "private", "parameters": [ { "name": "e", "type": { "text": "Event" } } ] }, { "kind": "method", "name": "handleFreeInput", "privacy": "private", "parameters": [ { "name": "e", "type": { "text": "Event" } } ] }, { "kind": "method", "name": "handleClear", "privacy": "private", "parameters": [ { "name": "e", "type": { "text": "Event" } } ] }, { "kind": "method", "name": "_handleTriggerClick", "privacy": "private" }, { "kind": "method", "name": "_handleTriggerKeyDown", "privacy": "private", "parameters": [ { "name": "e", "type": { "text": "KeyboardEvent" } } ] } ], "attributes": [ { "name": "name", "type": { "text": "string" }, "default": "''", "fieldName": "name" }, { "name": "icon", "type": { "text": "string" }, "default": "''", "fieldName": "icon" }, { "name": "label", "type": { "text": "string" }, "default": "''", "fieldName": "label" }, { "name": "library", "type": { "text": "string" }, "default": "'material-symbols-outlined'", "fieldName": "library" }, { "name": "color", "type": { "text": "string" }, "default": "''", "fieldName": "color" }, { "name": "no-color", "type": { "text": "boolean" }, "default": "false", "fieldName": "noColor" }, { "name": "no-library", "type": { "text": "boolean" }, "default": "false", "fieldName": "noLibrary" }, { "name": "help-text", "type": { "text": "string" }, "default": "''", "fieldName": "helpText" }, { "name": "disabled", "type": { "text": "boolean" }, "default": "false", "fieldName": "disabled" }, { "name": "required", "type": { "text": "boolean" }, "default": "false", "fieldName": "required" }, { "name": "trigger-submit", "type": { "text": "boolean" }, "default": "false", "fieldName": "triggerSubmit" }, { "name": "allow-upload", "type": { "text": "boolean" }, "default": "false", "fieldName": "allowUpload" }, { "name": "accept", "type": { "text": "string" }, "default": "'image/*'", "fieldName": "accept" }, { "name": "form", "type": { "text": "string" }, "fieldName": "form" } ], "superclass": { "name": "ZincElement", "module": "/src/internal/zinc-element" }, "tagNameWithoutPrefix": "icon-picker", "tagName": "zn-icon-picker", "customElement": true } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "ZnIconPicker", "module": "components/icon-picker/icon-picker.js" } } ] }, { "kind": "javascript-module", "path": "components/inline-edit/inline-edit.js", "declarations": [ { "kind": "class", "description": "", "name": "ZnInlineEdit", "cssProperties": [ { "description": "An example CSS custom property.", "name": "--example" } ], "cssParts": [ { "description": "The component's base wrapper.", "name": "base" } ], "slots": [ { "description": "Default slot. When `input-type` is `select`, accepts `zn-option` elements to define select options. If provided, takes precedence over the `options` property.", "name": "" }, { "description": "An example slot.", "name": "example" }, { "description": "Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.", "name": "help-text" } ], "members": [ { "kind": "field", "name": "formControlController", "privacy": "private", "readonly": true, "default": "new FormControlController(this, { defaultValue: (control: ZnInlineEdit) => control.defaultValue, value: (control: ZnInlineEdit) => { if (control.multiple) { const val = typeof control.value === 'string' ? control.value.split(' ').filter(v => v !== '') : control.value; return val.length > 0 ? val : ''; } return control.value; }, })" }, { "kind": "field", "name": "hasSlotController", "privacy": "private", "readonly": true, "default": "new HasSlotController(this, 'help-text', '[default]')" }, { "kind": "field", "name": "conditionalController", "privacy": "private", "readonly": true, "default": "new ConditionalController(this)" }, { "kind": "field", "name": "value", "type": { "text": "string | string[]" }, "default": "''", "attribute": "value" }, { "kind": "field", "name": "name", "type": { "text": "string" }, "attribute": "name" }, { "kind": "field", "name": "placeholder", "type": { "text": "string" }, "attribute": "placeholder", "reflects": true }, { "kind": "field", "name": "editText", "type": { "text": "string" }, "attribute": "edit-text" }, { "kind": "field", "name": "displayValue", "type": { "text": "string" }, "default": "''", "description": "A masked value (e.g. `j***@example.com`) shown in place of the input when not editing. Hovering reveals the\nreal value via an embedded `zn-reveal`. The real `value` is still what gets edited and submitted.", "attribute": "display-value" }, { "kind": "field", "name": "clearOnEdit", "type": { "text": "boolean" }, "default": "false", "description": "When set, the edit input starts empty instead of pre-filled with the current value. Cancelling restores the\noriginal value. Useful with `display-value` when the real value shouldn't be pre-filled into the input.", "attribute": "clear-on-edit" }, { "kind": "field", "name": "conditional", "type": { "text": "string" }, "default": "''", "attribute": "conditional" }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "attribute": "disabled" }, { "kind": "field", "name": "inline", "type": { "text": "boolean" }, "attribute": "inline" }, { "kind": "field", "name": "padded", "type": { "text": "boolean" }, "attribute": "padded" }, { "kind": "field", "name": "size", "type": { "text": "'small' | 'medium' | 'large'" }, "default": "'medium'", "attribute": "size", "reflects": true }, { "kind": "field", "name": "required", "type": { "text": "boolean" }, "attribute": "required" }, { "kind": "field", "name": "pattern", "type": { "text": "string" }, "attribute": "pattern" }, { "kind": "field", "name": "multiple", "type": { "text": "boolean" }, "attribute": "multiple", "reflects": true }, { "kind": "field", "name": "clearable", "type": { "text": "boolean" }, "attribute": "clearable" }, { "kind": "field", "name": "min", "type": { "text": "string | number" }, "attribute": "min" }, { "kind": "field", "name": "max", "type": { "text": "string | number" }, "attribute": "max" }, { "kind": "field", "name": "step", "type": { "text": "number | 'any'" }, "attribute": "step" }, { "kind": "field", "name": "inputType", "type": { "text": "'select' | 'text' | 'data-select' | 'number' | 'textarea'" }, "default": "'text'", "attribute": "input-type" }, { "kind": "field", "name": "textareaRows", "type": { "text": "1" }, "attribute": "textarea-rows" }, { "kind": "field", "name": "slashItems", "type": { "text": "SlashMenuItem[]" }, "default": "[]", "description": "Quick insertions offered by the slash menu of a `text` or `textarea` input. Accepts a JSON array of items, or\nthe shorthand `Brand name={{BRAND_NAME}}, Support email={{SUPPORT_EMAIL}}`.", "attribute": "slash-items" }, { "kind": "field", "name": "slashPreset", "type": { "text": "string" }, "default": "''", "description": "Names of item sets registered with `registerSlashMenuPreset`, comma separated.", "attribute": "slash-preset" }, { "kind": "field", "name": "slashTrigger", "type": { "text": "string" }, "default": "'/'", "description": "The characters that open the slash menu.", "attribute": "slash-trigger" }, { "kind": "field", "name": "slashHeading", "type": { "text": "string" }, "default": "'Insert'", "description": "The name the slash menu's list is announced by.", "attribute": "slash-heading" }, { "kind": "field", "name": "slashHideKeys", "type": { "text": "boolean" }, "default": "false", "description": "Hides the insertion keys normally shown against the slash menu's items.", "attribute": "slash-hide-keys" }, { "kind": "field", "name": "slashRecentKey", "type": { "text": "string" }, "default": "''", "description": "Lists the slash menu items most recently chosen here above the rest, remembered under this key.", "attribute": "slash-recent-key" }, { "kind": "field", "name": "slashItemsProvider", "type": { "text": "(query: string) => SlashMenuItem[] | Promise | undefined" }, "description": "Resolves additional slash menu items each time the menu opens. JavaScript only." }, { "kind": "field", "name": "options", "type": { "text": "{ [key: string]: string }" }, "default": "{}", "attribute": "options" }, { "kind": "field", "name": "selectProvider", "type": { "text": "string" }, "attribute": "provider" }, { "kind": "field", "name": "iconPosition", "type": { "text": "'start' | 'end' | 'none'" }, "default": "'none'", "attribute": "icon-position" }, { "kind": "field", "name": "dataUri", "type": { "text": "string" }, "description": "The URL to fetch options from. When set , the component fetches JSON from this URL and renders the results as\noptions. The expected format is an array of objects with `key` and `value` properties:\n`[{\"key\": \"us\", \"value\": \"United States\"}, ...]`\nWhen not set, the component works exactly as before using slotted `` elements.\nOnly works with type select.", "attribute": "data-uri" }, { "kind": "field", "name": "contextData", "type": { "text": "string" }, "description": "Context data to send as a header when fetching options from the URL specified by the `src` property.", "attribute": "context-data" }, { "kind": "field", "name": "search", "type": { "text": "boolean" }, "description": "Enables search/filtering on select inputs.", "attribute": "search" }, { "kind": "field", "name": "freeText", "type": { "text": "boolean" }, "description": "Allows entering values that aren't in the options list on select inputs (\"free text\"). Setting this implies\n`input-type=\"select\"` (unless a data `provider` is used) and forwards the behavior to the inner ``.", "attribute": "free-text" }, { "kind": "field", "name": "helpText", "type": { "text": "string" }, "default": "''", "description": "The input's help text. If you need to display HTML, use the `help-text` slot instead. *", "attribute": "help-text" }, { "kind": "field", "name": "dir", "type": { "text": "'ltr' | 'rtl' | 'auto'" }, "default": "'auto'", "description": "The text direction for the input (ltr or rtl) *", "attribute": "dir" }, { "kind": "field", "name": "autocomplete", "type": { "text": "string" }, "description": "Specifies what permission the browser has to provide assistance in filling out form field values. Refer to\n[this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.", "attribute": "autocomplete" }, { "kind": "field", "name": "hasFocus", "type": { "text": "boolean" }, "privacy": "private" }, { "kind": "field", "name": "isEditing", "type": { "text": "boolean" }, "privacy": "private" }, { "kind": "field", "name": "_valueBeforeEdit", "type": { "text": "string | string[]" }, "privacy": "private" }, { "kind": "field", "name": "_editStartValue", "type": { "text": "string | string[]" }, "privacy": "private" }, { "kind": "field", "name": "input", "type": { "text": "ZnInput | ZnSelect" } }, { "kind": "field", "name": "defaultValue", "type": { "text": "string | string[]" } }, { "kind": "field", "name": "validity", "type": { "text": "ValidityState" }, "readonly": true }, { "kind": "field", "name": "validationMessage", "type": { "text": "string" }, "readonly": true }, { "kind": "method", "name": "checkValidity", "return": { "type": { "text": "boolean" } } }, { "kind": "method", "name": "getForm", "return": { "type": { "text": "HTMLFormElement | null" } } }, { "kind": "method", "name": "reportValidity", "return": { "type": { "text": "boolean" } } }, { "kind": "method", "name": "setCustomValidity", "return": { "type": { "text": "void" } }, "parameters": [ { "name": "message", "type": { "text": "string" } } ] }, { "kind": "method", "name": "handleValueChange" }, { "kind": "method", "name": "handleIsEditingChange" }, { "kind": "field", "name": "mouseEventHandler" }, { "kind": "field", "name": "escKeyHandler" }, { "kind": "field", "name": "submitKeyHandler" }, { "kind": "field", "name": "captureMouseDown" }, { "kind": "field", "name": "captureKeyDown" }, { "kind": "field", "name": "handleEditClick" }, { "kind": "field", "name": "handleSubmitClick" }, { "kind": "field", "name": "handleCancelClick" }, { "kind": "field", "name": "handleBlur" }, { "kind": "field", "name": "handleInput" }, { "kind": "method", "name": "moveSlottedOptionsToSelect", "privacy": "private" }, { "kind": "field", "name": "handleSlotChange" }, { "kind": "method", "name": "_getTextAreaInput", "privacy": "protected", "return": { "type": { "text": "HTMLTemplateResult" } } }, { "kind": "method", "name": "_getTextInput", "privacy": "protected", "return": { "type": { "text": "HTMLTemplateResult" } } }, { "kind": "method", "name": "_getNumberInput", "privacy": "protected", "return": { "type": { "text": "HTMLTemplateResult" } } }, { "kind": "method", "name": "_getSelectInput", "privacy": "protected", "return": { "type": { "text": "HTMLTemplateResult" } } }, { "kind": "method", "name": "_getDataSelectInput", "privacy": "protected", "return": { "type": { "text": "HTMLTemplateResult" } } } ], "events": [ { "description": "Emitted as an example.", "name": "zn-event-name" } ], "attributes": [ { "name": "value", "type": { "text": "string | string[]" }, "default": "''", "fieldName": "value" }, { "name": "name", "type": { "text": "string" }, "fieldName": "name" }, { "name": "placeholder", "type": { "text": "string" }, "fieldName": "placeholder" }, { "name": "edit-text", "type": { "text": "string" }, "fieldName": "editText" }, { "name": "display-value", "type": { "text": "string" }, "default": "''", "description": "A masked value (e.g. `j***@example.com`) shown in place of the input when not editing. Hovering reveals the\nreal value via an embedded `zn-reveal`. The real `value` is still what gets edited and submitted.", "fieldName": "displayValue" }, { "name": "clear-on-edit", "type": { "text": "boolean" }, "default": "false", "description": "When set, the edit input starts empty instead of pre-filled with the current value. Cancelling restores the\noriginal value. Useful with `display-value` when the real value shouldn't be pre-filled into the input.", "fieldName": "clearOnEdit" }, { "name": "conditional", "type": { "text": "string" }, "default": "''", "fieldName": "conditional" }, { "name": "disabled", "type": { "text": "boolean" }, "fieldName": "disabled" }, { "name": "inline", "type": { "text": "boolean" }, "fieldName": "inline" }, { "name": "padded", "type": { "text": "boolean" }, "fieldName": "padded" }, { "name": "size", "type": { "text": "'small' | 'medium' | 'large'" }, "default": "'medium'", "fieldName": "size" }, { "name": "required", "type": { "text": "boolean" }, "fieldName": "required" }, { "name": "pattern", "type": { "text": "string" }, "fieldName": "pattern" }, { "name": "multiple", "type": { "text": "boolean" }, "fieldName": "multiple" }, { "name": "clearable", "type": { "text": "boolean" }, "fieldName": "clearable" }, { "name": "min", "type": { "text": "string | number" }, "fieldName": "min" }, { "name": "max", "type": { "text": "string | number" }, "fieldName": "max" }, { "name": "step", "type": { "text": "number | 'any'" }, "fieldName": "step" }, { "name": "input-type", "type": { "text": "'select' | 'text' | 'data-select' | 'number' | 'textarea'" }, "default": "'text'", "fieldName": "inputType" }, { "name": "textarea-rows", "type": { "text": "1" }, "fieldName": "textareaRows" }, { "name": "slash-items", "type": { "text": "SlashMenuItem[]" }, "default": "[]", "description": "Quick insertions offered by the slash menu of a `text` or `textarea` input. Accepts a JSON array of items, or\nthe shorthand `Brand name={{BRAND_NAME}}, Support email={{SUPPORT_EMAIL}}`.", "fieldName": "slashItems" }, { "name": "slash-preset", "type": { "text": "string" }, "default": "''", "description": "Names of item sets registered with `registerSlashMenuPreset`, comma separated.", "fieldName": "slashPreset" }, { "name": "slash-trigger", "type": { "text": "string" }, "default": "'/'", "description": "The characters that open the slash menu.", "fieldName": "slashTrigger" }, { "name": "slash-heading", "type": { "text": "string" }, "default": "'Insert'", "description": "The name the slash menu's list is announced by.", "fieldName": "slashHeading" }, { "name": "slash-hide-keys", "type": { "text": "boolean" }, "default": "false", "description": "Hides the insertion keys normally shown against the slash menu's items.", "fieldName": "slashHideKeys" }, { "name": "slash-recent-key", "type": { "text": "string" }, "default": "''", "description": "Lists the slash menu items most recently chosen here above the rest, remembered under this key.", "fieldName": "slashRecentKey" }, { "name": "options", "type": { "text": "{ [key: string]: string }" }, "default": "{}", "fieldName": "options" }, { "name": "provider", "type": { "text": "string" }, "fieldName": "selectProvider" }, { "name": "icon-position", "type": { "text": "'start' | 'end' | 'none'" }, "default": "'none'", "fieldName": "iconPosition" }, { "name": "data-uri", "type": { "text": "string" }, "description": "The URL to fetch options from. When set , the component fetches JSON from this URL and renders the results as\noptions. The expected format is an array of objects with `key` and `value` properties:\n`[{\"key\": \"us\", \"value\": \"United States\"}, ...]`\nWhen not set, the component works exactly as before using slotted `` elements.\nOnly works with type select.", "fieldName": "dataUri" }, { "name": "context-data", "type": { "text": "string" }, "description": "Context data to send as a header when fetching options from the URL specified by the `src` property.", "fieldName": "contextData" }, { "name": "search", "type": { "text": "boolean" }, "description": "Enables search/filtering on select inputs.", "fieldName": "search" }, { "name": "free-text", "type": { "text": "boolean" }, "description": "Allows entering values that aren't in the options list on select inputs (\"free text\"). Setting this implies\n`input-type=\"select\"` (unless a data `provider` is used) and forwards the behavior to the inner ``.", "fieldName": "freeText" }, { "name": "help-text", "type": { "text": "string" }, "default": "''", "description": "The input's help text. If you need to display HTML, use the `help-text` slot instead. *", "fieldName": "helpText" }, { "name": "dir", "type": { "text": "'ltr' | 'rtl' | 'auto'" }, "default": "'auto'", "description": "The text direction for the input (ltr or rtl) *", "fieldName": "dir" }, { "name": "autocomplete", "type": { "text": "string" }, "description": "Specifies what permission the browser has to provide assistance in filling out form field values. Refer to\n[this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.", "fieldName": "autocomplete" } ], "superclass": { "name": "ZincElement", "module": "/src/internal/zinc-element" }, "summary": "Short summary of the component's intended use.", "tagNameWithoutPrefix": "inline-edit", "tagName": "zn-inline-edit", "customElement": true, "jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/inline-edit\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-example\n *\n * @event zn-event-name - Emitted as an example.\n *\n * @slot - Default slot. When `input-type` is `select`, accepts `zn-option` elements to define select options. If provided, takes precedence over the `options` property.\n * @slot example - An example slot.\n * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --example - An example CSS custom property.\n */", "documentation": "https://zinc.style/components/inline-edit", "status": "experimental", "since": "1.0", "dependencies": [ "zn-example" ] } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "ZnInlineEdit", "module": "components/inline-edit/inline-edit.js" } } ] }, { "kind": "javascript-module", "path": "components/input/input.js", "declarations": [ { "kind": "class", "description": "", "name": "ZnInput", "cssProperties": [ { "description": "The height of a range input's track.", "name": "--zn-range-track-height" }, { "description": "The color of a range input's track.", "name": "--zn-range-track-color" }, { "description": "The diameter of a range input's thumb.", "name": "--zn-range-thumb-size" }, { "description": "The color of a range input's thumb.", "name": "--zn-range-thumb-color" }, { "description": "The width of the ring drawn around a range input's thumb.", "name": "--zn-range-thumb-ring-width" } ], "cssParts": [ { "description": "The form control that wraps the label, input, and help text.", "name": "form-control" }, { "description": "The slash menu shown at the caret.", "name": "slash-menu" }, { "description": "The label's wrapper.", "name": "form-control-label" }, { "description": "The input's wrapper.", "name": "form-control-input" }, { "description": "The help text's wrapper.", "name": "form-control-help-text" }, { "description": "The component's base wrapper.", "name": "base" }, { "description": "The internal `` control.", "name": "input" }, { "description": "The container that wraps the prefix.", "name": "prefix" }, { "description": "The clear button.", "name": "clear-button" }, { "description": "The password toggle button.", "name": "password-toggle-button" }, { "description": "The container that wraps the suffix.", "name": "suffix" } ], "slots": [ { "description": "The input's label. Alternatively, you can use the `label` attribute.", "name": "label" }, { "description": "Used to add text that is displayed in a tooltip next to the label. Alternatively, you can use the `label-tooltip` attribute.", "name": "label-tooltip" }, { "description": "Used to add contextual text that is displayed above the input, on the right. Alternatively, you can use the `context-note` attribute. Range inputs display their live value here unless this is set.", "name": "context-note" }, { "description": "Used to prepend a presentational icon or similar element to the input.", "name": "prefix" }, { "description": "Used to append a presentational icon or similar element to the input.", "name": "suffix" }, { "description": "An icon to use in lieu of the default clear icon.", "name": "clear-icon" }, { "description": "An icon to use in lieu of the default show password icon.", "name": "show-password-icon" }, { "description": "An icon to use in lieu of the default hide password icon.", "name": "hide-password-icon" }, { "description": "Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.", "name": "help-text" }, { "description": "`` elements describing the insertions offered by the slash menu. Items are picked up wherever they sit inside the input, so this slot name is optional.", "name": "slash-items" }, { "description": "A `` to use instead of the built-in one, so its heading, sizing and styling can be set in markup. Any `` children of it become the menu's items.", "name": "slash-menu" } ], "members": [ { "kind": "field", "name": "dependencies", "type": { "text": "object" }, "static": true, "default": "{ 'zn-icon': ZnIcon, 'zn-slash-item': ZnSlashItem, 'zn-slash-menu': ZnSlashMenu, 'zn-tooltip': ZnTooltip }" }, { "kind": "field", "name": "formControlController", "privacy": "private", "readonly": true, "default": "new FormControlController(this, { assumeInteractionOn: ['zn-blur', 'zn-input'] })" }, { "kind": "field", "name": "hasSlotController", "privacy": "private", "readonly": true, "default": "new HasSlotController(this, 'help-text', 'label', 'label-tooltip')" }, { "kind": "field", "name": "localize", "privacy": "private", "readonly": true, "default": "new LocalizeController(this)" }, { "kind": "field", "name": "slashController", "privacy": "private", "readonly": true, "default": "new SlashMenuController(this, { menu: () => this.mountSlashMenu(), items: search => this.resolveSlashItems(search), trigger: () => this.slashTrigger, onSelect: (item, search) => !this.emit('zn-slash-select', { detail: {item, query: search} }).defaultPrevented, onInsert: (item, value) => this.emit('zn-slash-insert', {detail: {item, value}}) })" }, { "kind": "field", "name": "input", "type": { "text": "HTMLInputElement" } }, { "kind": "field", "name": "colorPicker", "type": { "text": "HTMLInputElement" } }, { "kind": "field", "name": "slashMenuElement", "type": { "text": "ZnSlashMenu | null" } }, { "kind": "field", "name": "hasFocus", "type": { "text": "boolean" }, "privacy": "private", "default": "false" }, { "kind": "field", "name": "hasSlashMenu", "type": { "text": "boolean" }, "privacy": "private", "default": "false", "description": "Renders the slash menu only once it has been needed, keeping unused inputs cheap." }, { "kind": "field", "name": "isUserTyping", "type": { "text": "boolean" }, "privacy": "private", "default": "false" }, { "kind": "field", "name": "title", "type": { "text": "string" }, "default": "\"\"", "attribute": "title" }, { "kind": "field", "name": "__numberInput", "privacy": "private" }, { "kind": "field", "name": "__dateInput", "privacy": "private" }, { "kind": "field", "name": "type", "type": { "text": "'color' | 'currency' | 'date' | 'datetime-local' | 'email' | 'number' | 'password' |\n 'range' | 'search' | 'tel' | 'text' | 'time' | 'url'" }, "default": "'text'", "description": "The type of input. Works the same as native `` element. But only a subset of types is supported. Defaults\nto `text`", "attribute": "type", "reflects": true }, { "kind": "field", "name": "name", "type": { "text": "string" }, "default": "\"\"", "description": "The name of the input, submitted as a name/value pair with form data.", "attribute": "name" }, { "kind": "field", "name": "value", "type": { "text": "any" }, "default": "''", "description": "The current value of the input, submitted as a name/value pair with form data.", "attribute": "value" }, { "kind": "field", "name": "defaultValue", "type": { "text": "string" }, "default": "''", "description": "The default value of the form control. Primarily used for resetting the form control." }, { "kind": "field", "name": "size", "type": { "text": "'x-small' | 'small' | 'medium' | 'large'" }, "default": "'medium'", "description": "The inputs size *", "attribute": "size", "reflects": true }, { "kind": "field", "name": "pill", "type": { "text": "boolean" }, "default": "false", "description": "Draws a pill-styled input *", "attribute": "pill", "reflects": true }, { "kind": "field", "name": "label", "type": { "text": "string" }, "default": "''", "description": "The inputs label. If you need to display HTML, use the `label` slot. *", "attribute": "label" }, { "kind": "field", "name": "labelTooltip", "type": { "text": "string" }, "default": "''", "description": "Text that appears in a tooltip next to the label. If you need to display HTML in the tooltip, use the\n`label-tooltip` slot.\n*", "attribute": "label-tooltip" }, { "kind": "field", "name": "contextNote", "type": { "text": "string" }, "default": "''", "description": "Text that appears above the input, on the right, to add additional context. If you need to display HTML\nin this text, use the `context-note` slot instead", "attribute": "context-note" }, { "kind": "field", "name": "helpText", "type": { "text": "string" }, "default": "''", "description": "The input's help text. If you need to display HTML, use the `help-text` slot instead. *", "attribute": "help-text" }, { "kind": "field", "name": "clearable", "type": { "text": "boolean" }, "default": "false", "description": "Adds a clear button when the input is not empty *", "attribute": "clearable", "reflects": true }, { "kind": "field", "name": "optionalIcon", "type": { "text": "boolean" }, "default": "false", "description": "Adds the default optional icon for this input type. Currently only types `email` and `tel` have a default\noptional icon.", "attribute": "optional-icon" }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Disables the input *", "attribute": "disabled", "reflects": true }, { "kind": "field", "name": "filled", "type": { "text": "boolean" }, "default": "false", "description": "Fills the input background white *", "attribute": "filled", "reflects": true }, { "kind": "field", "name": "placeholder", "type": { "text": "string" }, "default": "''", "description": "Placeholder text to show as a hint when the input is empty.", "attribute": "placeholder" }, { "kind": "field", "name": "readonly", "type": { "text": "boolean" }, "default": "false", "description": "Makes the input read-only *", "attribute": "readonly", "reflects": true }, { "kind": "field", "name": "passwordToggle", "type": { "text": "boolean" }, "default": "false", "description": "Adds a button to toggle the passwords visibility, only applies to password types *", "attribute": "password-toggle" }, { "kind": "field", "name": "passwordVisible", "type": { "text": "boolean" }, "default": "false", "description": "Determines whether or no the password is currently visible. Only applies to password types *", "attribute": "password-visible" }, { "kind": "field", "name": "noSpinButtons", "type": { "text": "boolean" }, "default": "false", "description": "Hides the browsers built-in increment/decrement spin buttons for number inputs *", "attribute": "no-spin-buttons" }, { "kind": "field", "name": "colorFormat", "type": { "text": "'hex' | 'rgb' | 'hsl' | 'oklch'" }, "default": "'hex'", "description": "The color format to display for color inputs. Only applies when type is 'color'. *", "attribute": "color-format" }, { "kind": "field", "name": "valueSuffix", "type": { "text": "string" }, "default": "''", "description": "Appended to the value that range inputs display above the track, on the right, e.g. `rem`. Only applies when type\nis 'range' and no `context-note` is set.", "attribute": "value-suffix" }, { "kind": "field", "name": "form", "type": { "text": "string" }, "description": "By default, form-controls are associated with the nearest containing `` element. This attribute allows you\nto place the form control outside a form and associate it with the form that has this `id`. The form must be\nin the same document or shadow root for this to work.", "attribute": "form", "reflects": true }, { "kind": "field", "name": "required", "type": { "text": "boolean" }, "default": "false", "description": "Makes the input a required field.", "attribute": "required", "reflects": true }, { "kind": "field", "name": "pattern", "type": { "text": "string" }, "description": "A regular expression pattern to validate input against.", "attribute": "pattern" }, { "kind": "field", "name": "minlength", "type": { "text": "number" }, "description": "The minimum length of input that will be considered valid.", "attribute": "minlength" }, { "kind": "field", "name": "maxlength", "type": { "text": "number" }, "description": "The maximum length of input that will be considered valid.", "attribute": "maxlength" }, { "kind": "field", "name": "min", "type": { "text": "number | string" }, "description": "The input's minimum value. Only applies to date and number input types.", "attribute": "min" }, { "kind": "field", "name": "max", "type": { "text": "number | string" }, "description": "The input's maximum value. Only applies to date and number input types.", "attribute": "max" }, { "kind": "field", "name": "step", "type": { "text": "number | 'any'" }, "description": "Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is\nimplied, allowing any numeric value. Only applies to date and number input types.", "attribute": "step" }, { "kind": "field", "name": "autocapitalize", "type": { "text": "'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters'" }, "description": "Controls whether and how text input is automatically capitalized as it is entered by the user.", "attribute": "autocapitalize" }, { "kind": "field", "name": "autocorrect", "type": { "text": "'off' | 'on'" }, "description": "Indicates whether the browser's autocorrect feature is on or off.", "attribute": "autocorrect" }, { "kind": "field", "name": "autocomplete", "type": { "text": "string" }, "description": "Specifies what permission the browser has to provide assistance in filling out form field values. Refer to\n[this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.", "attribute": "autocomplete" }, { "kind": "field", "name": "autofocus", "type": { "text": "boolean" }, "description": "Indicates that the input should receive focus on page load.", "attribute": "autofocus" }, { "kind": "field", "name": "enterkeyhint", "type": { "text": "'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'" }, "description": "Used to customize the label or icon of the Enter key on virtual keyboards.", "attribute": "enterkeyhint" }, { "kind": "field", "name": "spellcheck", "type": { "text": "boolean" }, "default": "true", "description": "Enables spell checking on the input.", "attribute": "spellcheck" }, { "kind": "field", "name": "inputmode", "type": { "text": "'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'" }, "description": "Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual\nkeyboard on supportive devices.", "attribute": "inputmode" }, { "kind": "field", "name": "slashItems", "type": { "text": "SlashMenuItem[]" }, "default": "[]", "description": "Quick insertions offered by the slash menu. Accepts a JSON array of items, or the shorthand\n`Brand name={{BRAND_NAME}}, Support email={{SUPPORT_EMAIL}}`. Can also be set as an array of\n`SlashMenuItem` objects in JavaScript.", "attribute": "slash-items" }, { "kind": "field", "name": "slashPreset", "type": { "text": "string" }, "default": "''", "description": "Names of item sets registered with `registerSlashMenuPreset`, comma separated.", "attribute": "slash-preset" }, { "kind": "field", "name": "slashTrigger", "type": { "text": "string" }, "default": "'/'", "description": "The characters that open the slash menu.", "attribute": "slash-trigger" }, { "kind": "field", "name": "slashHeading", "type": { "text": "string" }, "default": "'Insert'", "description": "The name the slash menu's list is announced by.", "attribute": "slash-heading" }, { "kind": "field", "name": "slashHideKeys", "type": { "text": "boolean" }, "default": "false", "description": "Hides the insertion keys normally shown against the slash menu's items.", "attribute": "slash-hide-keys" }, { "kind": "field", "name": "slashRecentKey", "type": { "text": "string" }, "default": "''", "description": "Lists the items most recently chosen here above the rest, remembered in `localStorage` under this\nkey. Share a key between the fields that should share a history; leave unset to offer no such list.", "attribute": "slash-recent-key" }, { "kind": "field", "name": "slashItemsProvider", "type": { "text": "(query: string) => SlashMenuItem[] | Promise | undefined" }, "description": "Resolves additional items each time the menu opens, for lists that come from elsewhere (e.g. an\nAPI). Receives the current query and may return a promise. JavaScript only." }, { "kind": "field", "name": "triggerSubmit", "type": { "text": "boolean" }, "default": "false", "description": "When enabled, pressing enter will always submit the surrounding form, even when the form uses\nenter-navigation to move between fields.", "attribute": "trigger-submit" }, { "kind": "field", "name": "valueAsDate", "description": "Gets or sets the current value as `date` object. Returns `null` if the value can't be converted. This will use\nthe native `` implementation and may result in an error." }, { "kind": "field", "name": "valueAsNumber", "description": "Gets or sets the current value as a number. Return `null` if the value can't be converted." }, { "kind": "field", "name": "validity", "description": "Gets the validity state object", "readonly": true }, { "kind": "field", "name": "validationMessage", "description": "Gets the validation message", "readonly": true }, { "kind": "method", "name": "validateMinMax", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "hexToRgb", "privacy": "private", "return": { "type": { "text": "string" } }, "parameters": [ { "name": "hex", "type": { "text": "string" } } ] }, { "kind": "method", "name": "rgbToHex", "privacy": "private", "return": { "type": { "text": "string" } }, "parameters": [ { "name": "rgb", "type": { "text": "string" } } ] }, { "kind": "method", "name": "hexToOklch", "privacy": "private", "return": { "type": { "text": "string" } }, "parameters": [ { "name": "hex", "type": { "text": "string" } } ] }, { "kind": "method", "name": "oklchToHex", "privacy": "private", "return": { "type": { "text": "string" } }, "parameters": [ { "name": "oklch", "type": { "text": "string" } } ] }, { "kind": "method", "name": "hexToHsl", "privacy": "private", "return": { "type": { "text": "string" } }, "parameters": [ { "name": "hex", "type": { "text": "string" } } ] }, { "kind": "method", "name": "hslToHex", "privacy": "private", "return": { "type": { "text": "string" } }, "parameters": [ { "name": "hsl", "type": { "text": "string" } } ] }, { "kind": "method", "name": "convertToHex", "privacy": "private", "return": { "type": { "text": "string" } }, "parameters": [ { "name": "value", "type": { "text": "string" } } ] }, { "kind": "method", "name": "convertFromHex", "privacy": "private", "return": { "type": { "text": "string" } }, "parameters": [ { "name": "hex", "type": { "text": "string" } } ] }, { "kind": "method", "name": "handleBlur", "privacy": "private" }, { "kind": "method", "name": "handleChange", "privacy": "private" }, { "kind": "method", "name": "handleClearClick", "privacy": "private", "parameters": [ { "name": "event", "type": { "text": "MouseEvent" } } ] }, { "kind": "method", "name": "handleFocus", "privacy": "private" }, { "kind": "method", "name": "handleInput", "privacy": "private" }, { "kind": "method", "name": "handleInvalid", "privacy": "private", "parameters": [ { "name": "event", "type": { "text": "Event" } } ] }, { "kind": "method", "name": "handleKeyDown", "privacy": "private", "parameters": [ { "name": "event", "type": { "text": "KeyboardEvent" } } ] }, { "kind": "method", "name": "handlePasswordToggle", "privacy": "private" }, { "kind": "method", "name": "handleColorSwatchClick", "privacy": "private" }, { "kind": "method", "name": "handleColorPickerChange", "privacy": "private" }, { "kind": "method", "name": "focusInput", "privacy": "private", "parameters": [ { "name": "event", "type": { "text": "MouseEvent" } } ] }, { "kind": "method", "name": "resolveSlashItems", "return": { "type": { "text": "Promise" } }, "parameters": [ { "name": "search", "default": "''" } ], "description": "The insertions the slash menu offers, gathered from every source, in the order they were declared." }, { "kind": "method", "name": "showSlashMenu", "description": "Opens the slash menu at the caret, inserting the trigger if it isn't already there." }, { "kind": "method", "name": "hideSlashMenu", "description": "Closes the slash menu." }, { "kind": "method", "name": "slottedSlashItems", "privacy": "private", "return": { "type": { "text": "SlashMenuItem[]" } } }, { "kind": "method", "name": "mountSlashMenu", "privacy": "private", "return": { "type": { "text": "Promise" } } }, { "kind": "method", "name": "handleDisabledChange" }, { "kind": "method", "name": "handleStepChange" }, { "kind": "method", "name": "handleValueChange" }, { "kind": "method", "name": "handleColorFormatChange" }, { "kind": "method", "name": "focus", "parameters": [ { "name": "options", "optional": true, "type": { "text": "FocusOptions" } } ], "description": "Sets focus on the input." }, { "kind": "method", "name": "blur", "description": "Removes focus from the input." }, { "kind": "method", "name": "select", "description": "Selects all the text in the input." }, { "kind": "method", "name": "setSelectionRange", "parameters": [ { "name": "selectionStart", "type": { "text": "number" } }, { "name": "selectionEnd", "type": { "text": "number" } }, { "name": "selectionDirection", "default": "'none'", "type": { "text": "'forward' | 'backward' | 'none'" } } ], "description": "Sets the start and end positions of the text selection (0-based)." }, { "kind": "method", "name": "setRangeText", "parameters": [ { "name": "replacement", "type": { "text": "string" } }, { "name": "start", "optional": true, "type": { "text": "number" } }, { "name": "end", "optional": true, "type": { "text": "number" } }, { "name": "selectMode", "default": "'preserve'", "type": { "text": "'select' | 'start' | 'end' | 'preserve'" } } ], "description": "Replaces a range of text with a new string." }, { "kind": "method", "name": "showPicker", "description": "Displays the browser picker for an input element (only works if the browser supports it for the input type)." }, { "kind": "method", "name": "stepUp", "description": "Increments the value of a numeric input type by the value of the step attribute." }, { "kind": "method", "name": "stepDown", "description": "Decrements the value of a numeric input type by the value of the step attribute." }, { "kind": "method", "name": "checkValidity", "return": { "type": { "text": "boolean" } }, "description": "Checks the validity but does not show a validation message. Returns `true` when valid and `false` when invalid." }, { "kind": "method", "name": "getForm", "return": { "type": { "text": "HTMLFormElement | null" } }, "description": "Gets the associated form, if one exists." }, { "kind": "method", "name": "reportValidity", "description": "Checks for validity and shows the browser's validation message if the control is invalid." }, { "kind": "method", "name": "setCustomValidity", "parameters": [ { "name": "message", "type": { "text": "string" } } ], "description": "Sets a custom validation message. Pass an empty string to restore validity." } ], "events": [ { "description": "Emitted when the control loses focus.", "name": "zn-blur" }, { "description": "Emitted when an alteration to the control's value is committed by the user.", "name": "zn-change" }, { "description": "Emitted when the clear button is activated.", "name": "zn-clear" }, { "description": "Emitted when the control gains focus.", "name": "zn-focus" }, { "description": "Emitted when the control receives input.", "name": "zn-input" }, { "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied.", "name": "zn-invalid" }, { "description": "Emitted when a slash menu item is chosen. Cancelable — call `preventDefault()` to suppress the insertion and handle the item yourself.", "name": "zn-slash-select" }, { "description": "Emitted after a slash menu item's value has been inserted.", "name": "zn-slash-insert" } ], "attributes": [ { "name": "title", "type": { "text": "string" }, "default": "\"\"", "fieldName": "title" }, { "name": "type", "type": { "text": "'color' | 'currency' | 'date' | 'datetime-local' | 'email' | 'number' | 'password' |\n 'range' | 'search' | 'tel' | 'text' | 'time' | 'url'" }, "default": "'text'", "description": "The type of input. Works the same as native `` element. But only a subset of types is supported. Defaults\nto `text`", "fieldName": "type" }, { "name": "name", "type": { "text": "string" }, "default": "\"\"", "description": "The name of the input, submitted as a name/value pair with form data.", "fieldName": "name" }, { "name": "value", "type": { "text": "any" }, "default": "''", "description": "The current value of the input, submitted as a name/value pair with form data.", "fieldName": "value" }, { "name": "size", "type": { "text": "'x-small' | 'small' | 'medium' | 'large'" }, "default": "'medium'", "description": "The inputs size *", "fieldName": "size" }, { "name": "pill", "type": { "text": "boolean" }, "default": "false", "description": "Draws a pill-styled input *", "fieldName": "pill" }, { "name": "label", "type": { "text": "string" }, "default": "''", "description": "The inputs label. If you need to display HTML, use the `label` slot. *", "fieldName": "label" }, { "name": "label-tooltip", "type": { "text": "string" }, "default": "''", "description": "Text that appears in a tooltip next to the label. If you need to display HTML in the tooltip, use the\n`label-tooltip` slot.\n*", "fieldName": "labelTooltip" }, { "name": "context-note", "type": { "text": "string" }, "default": "''", "description": "Text that appears above the input, on the right, to add additional context. If you need to display HTML\nin this text, use the `context-note` slot instead", "fieldName": "contextNote" }, { "name": "help-text", "type": { "text": "string" }, "default": "''", "description": "The input's help text. If you need to display HTML, use the `help-text` slot instead. *", "fieldName": "helpText" }, { "name": "clearable", "type": { "text": "boolean" }, "default": "false", "description": "Adds a clear button when the input is not empty *", "fieldName": "clearable" }, { "name": "optional-icon", "type": { "text": "boolean" }, "default": "false", "description": "Adds the default optional icon for this input type. Currently only types `email` and `tel` have a default\noptional icon.", "fieldName": "optionalIcon" }, { "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Disables the input *", "fieldName": "disabled" }, { "name": "filled", "type": { "text": "boolean" }, "default": "false", "description": "Fills the input background white *", "fieldName": "filled" }, { "name": "placeholder", "type": { "text": "string" }, "default": "''", "description": "Placeholder text to show as a hint when the input is empty.", "fieldName": "placeholder" }, { "name": "readonly", "type": { "text": "boolean" }, "default": "false", "description": "Makes the input read-only *", "fieldName": "readonly" }, { "name": "password-toggle", "type": { "text": "boolean" }, "default": "false", "description": "Adds a button to toggle the passwords visibility, only applies to password types *", "fieldName": "passwordToggle" }, { "name": "password-visible", "type": { "text": "boolean" }, "default": "false", "description": "Determines whether or no the password is currently visible. Only applies to password types *", "fieldName": "passwordVisible" }, { "name": "no-spin-buttons", "type": { "text": "boolean" }, "default": "false", "description": "Hides the browsers built-in increment/decrement spin buttons for number inputs *", "fieldName": "noSpinButtons" }, { "name": "color-format", "type": { "text": "'hex' | 'rgb' | 'hsl' | 'oklch'" }, "default": "'hex'", "description": "The color format to display for color inputs. Only applies when type is 'color'. *", "fieldName": "colorFormat" }, { "name": "value-suffix", "type": { "text": "string" }, "default": "''", "description": "Appended to the value that range inputs display above the track, on the right, e.g. `rem`. Only applies when type\nis 'range' and no `context-note` is set.", "fieldName": "valueSuffix" }, { "name": "form", "type": { "text": "string" }, "description": "By default, form-controls are associated with the nearest containing `` element. This attribute allows you\nto place the form control outside a form and associate it with the form that has this `id`. The form must be\nin the same document or shadow root for this to work.", "fieldName": "form" }, { "name": "required", "type": { "text": "boolean" }, "default": "false", "description": "Makes the input a required field.", "fieldName": "required" }, { "name": "pattern", "type": { "text": "string" }, "description": "A regular expression pattern to validate input against.", "fieldName": "pattern" }, { "name": "minlength", "type": { "text": "number" }, "description": "The minimum length of input that will be considered valid.", "fieldName": "minlength" }, { "name": "maxlength", "type": { "text": "number" }, "description": "The maximum length of input that will be considered valid.", "fieldName": "maxlength" }, { "name": "min", "type": { "text": "number | string" }, "description": "The input's minimum value. Only applies to date and number input types.", "fieldName": "min" }, { "name": "max", "type": { "text": "number | string" }, "description": "The input's maximum value. Only applies to date and number input types.", "fieldName": "max" }, { "name": "step", "type": { "text": "number | 'any'" }, "description": "Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is\nimplied, allowing any numeric value. Only applies to date and number input types.", "fieldName": "step" }, { "name": "autocapitalize", "type": { "text": "'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters'" }, "description": "Controls whether and how text input is automatically capitalized as it is entered by the user.", "fieldName": "autocapitalize" }, { "name": "autocorrect", "type": { "text": "'off' | 'on'" }, "description": "Indicates whether the browser's autocorrect feature is on or off.", "fieldName": "autocorrect" }, { "name": "autocomplete", "type": { "text": "string" }, "description": "Specifies what permission the browser has to provide assistance in filling out form field values. Refer to\n[this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.", "fieldName": "autocomplete" }, { "name": "autofocus", "type": { "text": "boolean" }, "description": "Indicates that the input should receive focus on page load.", "fieldName": "autofocus" }, { "name": "enterkeyhint", "type": { "text": "'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'" }, "description": "Used to customize the label or icon of the Enter key on virtual keyboards.", "fieldName": "enterkeyhint" }, { "name": "spellcheck", "type": { "text": "boolean" }, "default": "true", "description": "Enables spell checking on the input.", "fieldName": "spellcheck" }, { "name": "inputmode", "type": { "text": "'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'" }, "description": "Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual\nkeyboard on supportive devices.", "fieldName": "inputmode" }, { "name": "slash-items", "type": { "text": "SlashMenuItem[]" }, "default": "[]", "description": "Quick insertions offered by the slash menu. Accepts a JSON array of items, or the shorthand\n`Brand name={{BRAND_NAME}}, Support email={{SUPPORT_EMAIL}}`. Can also be set as an array of\n`SlashMenuItem` objects in JavaScript.", "fieldName": "slashItems" }, { "name": "slash-preset", "type": { "text": "string" }, "default": "''", "description": "Names of item sets registered with `registerSlashMenuPreset`, comma separated.", "fieldName": "slashPreset" }, { "name": "slash-trigger", "type": { "text": "string" }, "default": "'/'", "description": "The characters that open the slash menu.", "fieldName": "slashTrigger" }, { "name": "slash-heading", "type": { "text": "string" }, "default": "'Insert'", "description": "The name the slash menu's list is announced by.", "fieldName": "slashHeading" }, { "name": "slash-hide-keys", "type": { "text": "boolean" }, "default": "false", "description": "Hides the insertion keys normally shown against the slash menu's items.", "fieldName": "slashHideKeys" }, { "name": "slash-recent-key", "type": { "text": "string" }, "default": "''", "description": "Lists the items most recently chosen here above the rest, remembered in `localStorage` under this\nkey. Share a key between the fields that should share a history; leave unset to offer no such list.", "fieldName": "slashRecentKey" }, { "name": "trigger-submit", "type": { "text": "boolean" }, "default": "false", "description": "When enabled, pressing enter will always submit the surrounding form, even when the form uses\nenter-navigation to move between fields.", "fieldName": "triggerSubmit" } ], "superclass": { "name": "ZincElement", "module": "/src/internal/zinc-element" }, "summary": "Short summary of the component's intended use.", "tagNameWithoutPrefix": "input", "tagName": "zn-input", "customElement": true, "jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/input\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-icon\n * @dependency zn-tooltip\n *\n * @event zn-blur - Emitted when the control loses focus.\n * @event zn-change - Emitted when an alteration to the control's value is committed by the user.\n * @event zn-clear - Emitted when the clear button is activated.\n * @event zn-focus - Emitted when the control gains focus.\n * @event zn-input - Emitted when the control receives input.\n * @event zn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @slot label - The input's label. Alternatively, you can use the `label` attribute.\n * @slot label-tooltip - Used to add text that is displayed in a tooltip next to the label. Alternatively, you can use the `label-tooltip` attribute.\n * @slot context-note - Used to add contextual text that is displayed above the input, on the right. Alternatively, you can use the `context-note` attribute. Range inputs display their live value here unless this is set.\n * @slot prefix - Used to prepend a presentational icon or similar element to the input.\n * @slot suffix - Used to append a presentational icon or similar element to the input.\n * @slot clear-icon - An icon to use in lieu of the default clear icon.\n * @slot show-password-icon - An icon to use in lieu of the default show password icon.\n * @slot hide-password-icon - An icon to use in lieu of the default hide password icon.\n * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n * @slot slash-items - `` elements describing the insertions offered by the slash menu. Items are\n * picked up wherever they sit inside the input, so this slot name is optional.\n * @slot slash-menu - A `` to use instead of the built-in one, so its heading, sizing and styling can\n * be set in markup. Any `` children of it become the menu's items.\n *\n * @dependency zn-slash-item\n * @dependency zn-slash-menu\n *\n * @event zn-slash-select - Emitted when a slash menu item is chosen. Cancelable — call `preventDefault()` to\n * suppress the insertion and handle the item yourself.\n * @event zn-slash-insert - Emitted after a slash menu item's value has been inserted.\n *\n * @csspart form-control - The form control that wraps the label, input, and help text.\n * @csspart slash-menu - The slash menu shown at the caret.\n * @csspart form-control-label - The label's wrapper.\n * @csspart form-control-input - The input's wrapper.\n * @csspart form-control-help-text - The help text's wrapper.\n * @csspart base - The component's base wrapper.\n * @csspart input - The internal `` control.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart clear-button - The clear button.\n * @csspart password-toggle-button - The password toggle button.\n * @csspart suffix - The container that wraps the suffix.\n *\n * @cssproperty --zn-range-track-height - The height of a range input's track.\n * @cssproperty --zn-range-track-color - The color of a range input's track.\n * @cssproperty --zn-range-thumb-size - The diameter of a range input's thumb.\n * @cssproperty --zn-range-thumb-color - The color of a range input's thumb.\n * @cssproperty --zn-range-thumb-ring-width - The width of the ring drawn around a range input's thumb.\n */", "documentation": "https://zinc.style/components/input", "status": "experimental", "since": "1.0", "dependencies": [ "zn-icon", "zn-tooltip", "zn-slash-item", "zn-slash-menu" ] } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "ZnInput", "module": "components/input/input.js" } } ] }, { "kind": "javascript-module", "path": "components/input-group/input-group.js", "declarations": [ { "kind": "class", "description": "", "name": "ZnInputGroup", "cssParts": [ { "description": "The component's base wrapper.", "name": "base" }, { "description": "The form control wrapper.", "name": "form-control" }, { "description": "The label's wrapper.", "name": "form-control-label" }, { "description": "The input group container.", "name": "form-control-input" } ], "slots": [ { "description": "The default slot for inputs and selects.", "name": "" }, { "description": "The input group's label. Alternatively, you can use the `label` attribute.", "name": "label" } ], "members": [ { "kind": "field", "name": "hasSlotController", "privacy": "private", "readonly": true, "default": "new HasSlotController(this, 'label')" }, { "kind": "field", "name": "defaultSlot", "type": { "text": "HTMLSlotElement" } }, { "kind": "field", "name": "label", "type": { "text": "string" }, "default": "''", "description": "The input group's label. If you need to display HTML, use the `label` slot.", "attribute": "label" }, { "kind": "field", "name": "gap", "type": { "text": "'sm' | 'md' | 'lg'" }, "description": "Adds a gap between the grouped elements, preserving individual border radii. Use `sm`, `md`, or `lg`.", "attribute": "gap" }, { "kind": "method", "name": "handleSlotChange", "privacy": "private" } ], "attributes": [ { "name": "label", "type": { "text": "string" }, "default": "''", "description": "The input group's label. If you need to display HTML, use the `label` slot.", "fieldName": "label" }, { "name": "gap", "type": { "text": "'sm' | 'md' | 'lg'" }, "description": "Adds a gap between the grouped elements, preserving individual border radii. Use `sm`, `md`, or `lg`.", "fieldName": "gap" } ], "superclass": { "name": "ZincElement", "module": "/src/internal/zinc-element" }, "summary": "A wrapper component that groups inputs and selects visually.", "tagNameWithoutPrefix": "input-group", "tagName": "zn-input-group", "customElement": true, "jsDoc": "/**\n * @summary A wrapper component that groups inputs and selects visually.\n * @documentation https://zinc.style/components/input-group\n * @status experimental\n * @since 1.0\n *\n * @slot - The default slot for inputs and selects.\n * @slot label - The input group's label. Alternatively, you can use the `label` attribute.\n *\n * @csspart base - The component's base wrapper.\n * @csspart form-control - The form control wrapper.\n * @csspart form-control-label - The label's wrapper.\n * @csspart form-control-input - The input group container.\n */", "documentation": "https://zinc.style/components/input-group", "status": "experimental", "since": "1.0" } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "ZnInputGroup", "module": "components/input-group/input-group.js" } } ] }, { "kind": "javascript-module", "path": "components/item/item.js", "declarations": [ { "kind": "class", "description": "", "name": "ZnItem", "cssParts": [ { "description": "The items base wrapper", "name": "base" }, { "description": "The items caption", "name": "caption" }, { "description": "The items icon", "name": "icon" } ], "slots": [ { "description": "The default slot. Can either be slotted or use the value attribute", "name": "" }, { "description": "Used for adding actions to a zn-item.", "name": "actions" } ], "members": [ { "kind": "field", "name": "dependencies", "type": { "text": "object" }, "static": true, "default": "{ 'zn-icon': ZnIcon, 'zn-tooltip': ZnTooltip }" }, { "kind": "field", "name": "caption", "type": { "text": "string" }, "attribute": "caption" }, { "kind": "field", "name": "description", "type": { "text": "string" }, "attribute": "description" }, { "kind": "field", "name": "stacked", "type": { "text": "boolean" }, "attribute": "stacked" }, { "kind": "field", "name": "size", "type": { "text": "'small' | 'medium' | 'large'" }, "default": "'medium'", "attribute": "size", "reflects": true }, { "kind": "field", "name": "editOnHover", "type": { "text": "boolean" }, "attribute": "edit-on-hover" }, { "kind": "field", "name": "helpTooltip", "type": { "text": "string" }, "attribute": "help-tooltip" }, { "kind": "field", "name": "icon", "type": { "text": "string" }, "attribute": "icon" }, { "kind": "field", "name": "value", "type": { "text": "string" }, "attribute": "value" }, { "kind": "field", "name": "inline", "type": { "text": "boolean" }, "attribute": "inline" }, { "kind": "field", "name": "grid", "type": { "text": "boolean" }, "attribute": "grid" }, { "kind": "field", "name": "noPadding", "type": { "text": "boolean" }, "attribute": "no-padding" }, { "kind": "field", "name": "flush", "type": { "text": "boolean" }, "attribute": "flush" }, { "kind": "field", "name": "alignEnd", "type": { "text": "boolean" }, "attribute": "align-end" }, { "kind": "field", "name": "alignCenter", "type": { "text": "boolean" }, "attribute": "align-center" }, { "kind": "method", "name": "_hasContent", "privacy": "protected", "return": { "type": { "text": "boolean" } } }, { "kind": "method", "name": "_hasRequiredSlot", "privacy": "protected", "return": { "type": { "text": "boolean" } } } ], "attributes": [ { "name": "caption", "type": { "text": "string" }, "fieldName": "caption" }, { "name": "description", "type": { "text": "string" }, "fieldName": "description" }, { "name": "stacked", "type": { "text": "boolean" }, "fieldName": "stacked" }, { "name": "size", "type": { "text": "'small' | 'medium' | 'large'" }, "default": "'medium'", "fieldName": "size" }, { "name": "edit-on-hover", "type": { "text": "boolean" }, "fieldName": "editOnHover" }, { "name": "help-tooltip", "type": { "text": "string" }, "fieldName": "helpTooltip" }, { "name": "icon", "type": { "text": "string" }, "fieldName": "icon" }, { "name": "value", "type": { "text": "string" }, "fieldName": "value" }, { "name": "inline", "type": { "text": "boolean" }, "fieldName": "inline" }, { "name": "grid", "type": { "text": "boolean" }, "fieldName": "grid" }, { "name": "no-padding", "type": { "text": "boolean" }, "fieldName": "noPadding" }, { "name": "flush", "type": { "text": "boolean" }, "fieldName": "flush" }, { "name": "align-end", "type": { "text": "boolean" }, "fieldName": "alignEnd" }, { "name": "align-center", "type": { "text": "boolean" }, "fieldName": "alignCenter" } ], "superclass": { "name": "ZincElement", "module": "/src/internal/zinc-element" }, "summary": "Used for listing items in a description list. Caption on the right, content on the left.", "tagNameWithoutPrefix": "item", "tagName": "zn-item", "customElement": true, "jsDoc": "/**\n * @summary Used for listing items in a description list. Caption on the right, content on the left.\n * @documentation https://zinc.style/components/item\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-icon\n * @dependency zn-tooltip\n *\n * @slot - The default slot. Can either be slotted or use the value attribute\n * @slot actions - Used for adding actions to a zn-item.\n *\n * @csspart base - The items base wrapper\n * @csspart caption - The items caption\n * @csspart icon - The items icon\n */", "documentation": "https://zinc.style/components/item", "status": "experimental", "since": "1.0", "dependencies": [ "zn-icon", "zn-tooltip" ] } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "ZnItem", "module": "components/item/item.js" } } ] }, { "kind": "javascript-module", "path": "components/key/key.js", "declarations": [ { "kind": "class", "description": "", "name": "ZnKey", "slots": [ { "description": "The description of the key.", "name": "" } ], "members": [ { "kind": "field", "name": "icon", "type": { "text": "string" }, "default": "''", "attribute": "icon" }, { "kind": "field", "name": "attribute", "type": { "text": "string" }, "default": "''", "attribute": "attribute" }, { "kind": "field", "name": "value", "type": { "text": "string" }, "default": "''", "attribute": "value" }, { "kind": "field", "name": "color", "type": { "text": "'primary' | 'success' | 'warning' | 'error' | 'info' | 'neutral'" }, "default": "'primary'", "attribute": "color" }, { "kind": "field", "name": "active", "type": { "text": "boolean" }, "default": "false", "attribute": "active", "reflects": true }, { "kind": "field", "name": "iconSize", "type": { "text": "number" }, "default": "24", "attribute": "icon-size" }, { "kind": "method", "name": "_handleClick", "privacy": "private" } ], "attributes": [ { "name": "icon", "type": { "text": "string" }, "default": "''", "fieldName": "icon" }, { "name": "attribute", "type": { "text": "string" }, "default": "''", "fieldName": "attribute" }, { "name": "value", "type": { "text": "string" }, "default": "''", "fieldName": "value" }, { "name": "color", "type": { "text": "'primary' | 'success' | 'warning' | 'error' | 'info' | 'neutral'" }, "default": "'primary'", "fieldName": "color" }, { "name": "active", "type": { "text": "boolean" }, "default": "false", "fieldName": "active" }, { "name": "icon-size", "type": { "text": "number" }, "default": "24", "fieldName": "iconSize" } ], "superclass": { "name": "ZincElement", "module": "/src/internal/zinc-element" }, "summary": "A legend key item, typically used alongside charts to label and toggle visibility of data series by category.", "tagNameWithoutPrefix": "key", "tagName": "zn-key", "customElement": true, "jsDoc": "/**\n * @summary A legend key item, typically used alongside charts to label and toggle visibility of data series by category.\n * @documentation https://zinc.style/components/key\n * @status experimental\n * @since 1.0\n *\n * @slot - The description of the key.\n */", "documentation": "https://zinc.style/components/key", "status": "experimental", "since": "1.0" } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "ZnKey", "module": "components/key/key.js" } } ] }, { "kind": "javascript-module", "path": "components/key-container/key-container.js", "declarations": [ { "kind": "class", "description": "", "name": "ZnKeyContainer", "slots": [ { "description": "The content to be filtered.", "name": "" }, { "description": "The key items (zn-key) that define the filters.", "name": "keys" } ], "members": [ { "kind": "field", "name": "keysSlot", "type": { "text": "HTMLSlotElement" } }, { "kind": "field", "name": "defaultSlot", "type": { "text": "HTMLSlotElement" } }, { "kind": "field", "name": "position", "type": { "text": "'top-end' | 'top-start' | 'bottom-end' | 'bottom-start'" }, "default": "'bottom-start'", "attribute": "position" }, { "kind": "field", "name": "target", "type": { "text": "string" }, "default": "''", "attribute": "target" }, { "kind": "field", "name": "itemSelector", "type": { "text": "string" }, "default": "'[data-type]'", "attribute": "item-selector" }, { "kind": "field", "name": "filterAttribute", "type": { "text": "string" }, "default": "''", "attribute": "filter-attribute" }, { "kind": "field", "name": "noScroll", "type": { "text": "boolean" }, "default": "false", "attribute": "no-scroll" }, { "kind": "field", "name": "_hiddenElements", "type": { "text": "Set" }, "privacy": "private", "default": "new Set()" }, { "kind": "field", "name": "_targetElement", "type": { "text": "HTMLElement | null" }, "privacy": "private", "default": "null" }, { "kind": "method", "name": "_handleKeyChange", "privacy": "private" }, { "kind": "method", "name": "getKeys", "privacy": "private", "return": { "type": { "text": "ZnKey[]" } } }, { "kind": "method", "name": "updateFilters", "privacy": "private" }, { "kind": "method", "name": "itemMatchesKey", "privacy": "private", "return": { "type": { "text": "boolean" } }, "parameters": [ { "name": "item", "type": { "text": "Element" } }, { "name": "key", "type": { "text": "ZnKey" } } ] } ], "events": [ { "description": "Emitted when the set of active keys changes.", "name": "zn-change" } ], "attributes": [ { "name": "position", "type": { "text": "'top-end' | 'top-start' | 'bottom-end' | 'bottom-start'" }, "default": "'bottom-start'", "fieldName": "position" }, { "name": "target", "type": { "text": "string" }, "default": "''", "fieldName": "target" }, { "name": "item-selector", "type": { "text": "string" }, "default": "'[data-type]'", "fieldName": "itemSelector" }, { "name": "filter-attribute", "type": { "text": "string" }, "default": "''", "fieldName": "filterAttribute" }, { "name": "no-scroll", "type": { "text": "boolean" }, "default": "false", "fieldName": "noScroll" } ], "superclass": { "name": "ZincElement", "module": "/src/internal/zinc-element" }, "summary": "A legend container that manages key items, typically used alongside charts to toggle visibility of data series by category.", "tagNameWithoutPrefix": "key-container", "tagName": "zn-key-container", "customElement": true, "jsDoc": "/**\n * @summary A legend container that manages key items, typically used alongside charts to toggle visibility of data series by category.\n * @documentation https://zinc.style/components/key-container\n * @status experimental\n * @since 1.0\n *\n * @slot - The content to be filtered.\n * @slot keys - The key items (zn-key) that define the filters.\n *\n * @event zn-change - Emitted when the set of active keys changes.\n */", "documentation": "https://zinc.style/components/key-container", "status": "experimental", "since": "1.0" } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "ZnKeyContainer", "module": "components/key-container/key-container.js" } } ] }, { "kind": "javascript-module", "path": "components/linked-select/linked-select.js", "declarations": [ { "kind": "class", "description": "", "name": "ZnLinkedSelect", "cssProperties": [ { "description": "An example CSS custom property.", "name": "--example" } ], "cssParts": [ { "description": "The component's base wrapper.", "name": "base" } ], "slots": [ { "description": "The default slot.", "name": "" }, { "description": "An example slot.", "name": "example" } ], "members": [ { "kind": "field", "name": "name", "type": { "text": "string" }, "default": "\"\"", "attribute": "name" }, { "kind": "field", "name": "value", "type": { "text": "string" }, "attribute": "value" }, { "kind": "field", "name": "defaultValue", "type": { "text": "string" }, "default": "''", "description": "The default value of the form control. Primarily used for resetting the form control." }, { "kind": "field", "name": "checked", "type": { "text": "boolean" }, "default": "false", "attribute": "checked", "reflects": true }, { "kind": "field", "name": "options", "type": { "text": "linkedSelectOptions" }, "attribute": "options" }, { "kind": "field", "name": "linkedSelect", "type": { "text": "string" }, "default": "\"\"", "attribute": "linked-select" }, { "kind": "field", "name": "cacheKey", "type": { "text": "string" }, "default": "\"\"", "attribute": "cache-key" }, { "kind": "field", "name": "label", "type": { "text": "string" }, "default": "\"\"", "attribute": "label" }, { "kind": "field", "name": "selectFirst", "type": { "text": "boolean" }, "default": "false", "description": "Automatically select the first option of the linked group when no value is set.", "attribute": "select-first" }, { "kind": "field", "name": "input", "type": { "text": "ZnSelect" } }, { "kind": "field", "name": "linkedSelectElement", "type": { "text": "HTMLSelectElement | ZnSelect" }, "privacy": "private" }, { "kind": "field", "name": "formControlController", "privacy": "private", "readonly": true, "default": "new FormControlController(this, { value: (input) => { const selectElement = this.input; if (selectElement) { return selectElement.value; } return input.value; } })" }, { "kind": "field", "name": "displayLabel", "readonly": true }, { "kind": "field", "name": "validity", "readonly": true }, { "kind": "field", "name": "validationMessage", "readonly": true }, { "kind": "method", "name": "checkValidity", "return": { "type": { "text": "boolean" } } }, { "kind": "method", "name": "getForm", "return": { "type": { "text": "HTMLFormElement | null" } } }, { "kind": "method", "name": "reportValidity", "return": { "type": { "text": "boolean" } } }, { "kind": "method", "name": "setCustomValidity", "return": { "type": { "text": "void" } }, "parameters": [ { "name": "message", "type": { "text": "string" } } ] }, { "kind": "field", "name": "handleLinkedSelectChange", "privacy": "public" }, { "kind": "method", "name": "handleChange", "privacy": "public", "parameters": [ { "name": "e", "type": { "text": "Event" } } ] }, { "kind": "field", "name": "handleSelectChange" }, { "kind": "method", "name": "currentOptions", "privacy": "private", "return": { "type": { "text": "linkedSelectOption" } }, "description": "The options of the group the linked select currently points at." } ], "events": [ { "description": "Emitted as an example.", "name": "zn-event-name" } ], "attributes": [ { "name": "name", "type": { "text": "string" }, "default": "\"\"", "fieldName": "name" }, { "name": "value", "type": { "text": "string" }, "fieldName": "value" }, { "name": "checked", "type": { "text": "boolean" }, "default": "false", "fieldName": "checked" }, { "name": "options", "type": { "text": "linkedSelectOptions" }, "fieldName": "options" }, { "name": "linked-select", "type": { "text": "string" }, "default": "\"\"", "fieldName": "linkedSelect" }, { "name": "cache-key", "type": { "text": "string" }, "default": "\"\"", "fieldName": "cacheKey" }, { "name": "label", "type": { "text": "string" }, "default": "\"\"", "fieldName": "label" }, { "name": "select-first", "type": { "text": "boolean" }, "default": "false", "description": "Automatically select the first option of the linked group when no value is set.", "fieldName": "selectFirst" } ], "superclass": { "name": "ZincElement", "module": "/src/internal/zinc-element" }, "summary": "Short summary of the component's intended use.", "tagNameWithoutPrefix": "linked-select", "tagName": "zn-linked-select", "customElement": true, "jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/linked-select\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-example\n *\n * @event zn-event-name - Emitted as an example.\n *\n * @slot - The default slot.\n * @slot example - An example slot.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --example - An example CSS custom property.\n */", "documentation": "https://zinc.style/components/linked-select", "status": "experimental", "since": "1.0", "dependencies": [ "zn-example" ] } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "ZnLinkedSelect", "module": "components/linked-select/linked-select.js" } } ] }, { "kind": "javascript-module", "path": "components/markdown-editor/markdown-editor.js", "declarations": [ { "kind": "class", "description": "", "name": "ZnMarkdownEditor", "cssParts": [ { "description": "The component's base wrapper.", "name": "base", "inheritedFrom": { "name": "ZnPanel", "module": "src/components/panel/panel.component.ts" } }, { "description": "The toolbar containing the view-mode and fullscreen controls.", "name": "toolbar" }, { "description": "The textarea wrapper.", "name": "editor" }, { "description": "The rendered markdown preview.", "name": "preview" } ], "slots": [ { "description": "The editor label. Alternatively, use the `label` attribute.", "name": "label" }, { "description": "Help text shown below the editor. Alternatively, use the `help-text` attribute.", "name": "help-text" }, { "description": "The panel's main content.", "name": "", "inheritedFrom": { "name": "ZnPanel", "module": "src/components/panel/panel.component.ts" } }, { "description": "Actions displayed in the panel header (buttons, chips, etc).", "name": "actions", "inheritedFrom": { "name": "ZnPanel", "module": "src/components/panel/panel.component.ts" } }, { "description": "Content displayed in the panel footer.", "name": "footer", "inheritedFrom": { "name": "ZnPanel", "module": "src/components/panel/panel.component.ts" } } ], "members": [ { "kind": "field", "name": "formControlController", "privacy": "private", "readonly": true, "default": "new FormControlController(this, { assumeInteractionOn: ['zn-input', 'zn-change'], })" }, { "kind": "field", "name": "markdownSlotController", "privacy": "private", "readonly": true, "default": "new HasSlotController(this, 'label', 'help-text', 'actions', 'footer')" }, { "kind": "field", "name": "debounceTimer", "type": { "text": "ReturnType | null" }, "privacy": "private", "default": "null" }, { "kind": "field", "name": "textarea", "type": { "text": "ZnTextarea" } }, { "kind": "field", "name": "previewEl", "type": { "text": "HTMLDivElement" } }, { "kind": "field", "name": "name", "type": { "text": "string" }, "default": "''", "description": "The name of the control, submitted as part of form data.", "attribute": "name" }, { "kind": "field", "name": "value", "type": { "text": "string" }, "default": "''", "description": "The current markdown content.", "attribute": "value" }, { "kind": "field", "name": "defaultValue", "type": { "text": "string" }, "default": "''", "description": "The default value — used when resetting the form." }, { "kind": "field", "name": "label", "type": { "text": "string" }, "default": "''", "description": "The control's label. If you need HTML, use the `label` slot.", "attribute": "label" }, { "kind": "field", "name": "helpText", "type": { "text": "string" }, "default": "''", "description": "Help text displayed below the editor. If you need HTML, use the `help-text` slot.", "attribute": "help-text" }, { "kind": "field", "name": "placeholder", "type": { "text": "string" }, "default": "'Enter markdown content...'", "description": "Placeholder text shown when the editor is empty.", "attribute": "placeholder" }, { "kind": "field", "name": "rows", "type": { "text": "number" }, "default": "20", "description": "Number of rows for the textarea.", "attribute": "rows" }, { "kind": "field", "name": "viewMode", "type": { "text": "ViewMode" }, "default": "'editor'", "description": "Which view to show.", "attribute": "view-mode", "reflects": true }, { "kind": "field", "name": "storageKey", "type": { "text": "string" }, "default": "'zn-markdown-editor-view-mode'", "description": "Key used to persist the selected view mode to `localStorage`. Set to an empty string to disable persistence.", "attribute": "storage-key" }, { "kind": "field", "name": "required", "type": { "text": "boolean" }, "default": "false", "description": "Makes the editor required for form submission.", "attribute": "required", "reflects": true }, { "kind": "field", "name": "readonly", "type": { "text": "boolean" }, "default": "false", "description": "Makes the editor read-only.", "attribute": "readonly", "reflects": true }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Disables the editor.", "attribute": "disabled", "reflects": true }, { "kind": "field", "name": "expanded", "type": { "text": "boolean" }, "default": "false", "description": "Whether the editor is currently expanded to cover its containing positioned ancestor.", "attribute": "expanded", "reflects": true }, { "kind": "field", "name": "validity", "type": { "text": "ValidityState" }, "readonly": true }, { "kind": "field", "name": "validationMessage", "type": { "text": "string" }, "readonly": true }, { "kind": "method", "name": "checkValidity", "return": { "type": { "text": "boolean" } } }, { "kind": "method", "name": "getForm", "return": { "type": { "text": "HTMLFormElement | null" } } }, { "kind": "method", "name": "reportValidity", "return": { "type": { "text": "boolean" } } }, { "kind": "method", "name": "setCustomValidity", "return": { "type": { "text": "void" } }, "parameters": [ { "name": "message", "type": { "text": "string" } } ] }, { "kind": "method", "name": "focus", "parameters": [ { "name": "options", "optional": true, "type": { "text": "FocusOptions" } } ], "description": "Sets focus on the editor." }, { "kind": "method", "name": "blur", "description": "Removes focus from the editor." }, { "kind": "method", "name": "readStoredViewMode", "privacy": "private", "return": { "type": { "text": "ViewMode | null" } } }, { "kind": "method", "name": "writeStoredViewMode", "privacy": "private", "parameters": [ { "name": "mode", "type": { "text": "ViewMode" } } ] }, { "kind": "method", "name": "renderPreview", "privacy": "private" }, { "kind": "field", "name": "handleInput", "privacy": "private" }, { "kind": "field", "name": "handleChange", "privacy": "private" }, { "kind": "field", "name": "handleViewToggle", "privacy": "private" }, { "kind": "field", "name": "handleExpandToggle", "privacy": "private" }, { "kind": "method", "name": "handleViewModeChange" }, { "kind": "method", "name": "handleValueChange" }, { "kind": "method", "name": "handleMarkedReady" }, { "kind": "method", "name": "markdownHelperBtn" }, { "kind": "method", "name": "renderViewButton", "privacy": "private", "parameters": [ { "name": "mode", "type": { "text": "ViewMode" } }, { "name": "icon", "type": { "text": "string" } }, { "name": "label", "type": { "text": "string" } } ] }, { "kind": "field", "name": "hasSlotController", "privacy": "private", "readonly": true, "default": "new HasSlotController(this, '[default]', 'actions', 'footer')", "inheritedFrom": { "name": "ZnPanel", "module": "components/panel/panel.js" } }, { "kind": "field", "name": "basis", "type": { "text": "number" }, "attribute": "basis-px", "inheritedFrom": { "name": "ZnPanel", "module": "components/panel/panel.js" } }, { "kind": "field", "name": "caption", "type": { "text": "string" }, "attribute": "caption", "inheritedFrom": { "name": "ZnPanel", "module": "components/panel/panel.js" } }, { "kind": "field", "name": "icon", "type": { "text": "string" }, "attribute": "icon", "inheritedFrom": { "name": "ZnPanel", "module": "components/panel/panel.js" } }, { "kind": "field", "name": "tabbed", "type": { "text": "boolean" }, "attribute": "tabbed", "inheritedFrom": { "name": "ZnPanel", "module": "components/panel/panel.js" } }, { "kind": "field", "name": "headerBorderless", "type": { "text": "boolean" }, "attribute": "header-borderless", "inheritedFrom": { "name": "ZnPanel", "module": "components/panel/panel.js" } }, { "kind": "field", "name": "cosmic", "type": { "text": "boolean" }, "attribute": "cosmic", "inheritedFrom": { "name": "ZnPanel", "module": "components/panel/panel.js" } }, { "kind": "field", "name": "flush", "type": { "text": "boolean" }, "attribute": "flush", "inheritedFrom": { "name": "ZnPanel", "module": "components/panel/panel.js" } }, { "kind": "field", "name": "flushX", "type": { "text": "boolean" }, "attribute": "flush-x", "inheritedFrom": { "name": "ZnPanel", "module": "components/panel/panel.js" } }, { "kind": "field", "name": "flushY", "type": { "text": "boolean" }, "attribute": "flush-y", "inheritedFrom": { "name": "ZnPanel", "module": "components/panel/panel.js" } }, { "kind": "field", "name": "flushFooter", "type": { "text": "boolean" }, "attribute": "flush-footer", "inheritedFrom": { "name": "ZnPanel", "module": "components/panel/panel.js" } }, { "kind": "field", "name": "transparent", "type": { "text": "boolean" }, "attribute": "transparent", "inheritedFrom": { "name": "ZnPanel", "module": "components/panel/panel.js" } }, { "kind": "field", "name": "shadow", "type": { "text": "boolean" }, "attribute": "shadow", "inheritedFrom": { "name": "ZnPanel", "module": "components/panel/panel.js" } } ], "events": [ { "name": "zn-view-mode-change", "type": { "text": "CustomEvent" }, "description": "Emitted when the user switches between editor / split / preview." }, { "description": "Emitted when the markdown content changes.", "name": "zn-change" }, { "description": "Emitted on each keystroke in the editor.", "name": "zn-input" } ], "attributes": [ { "name": "name", "type": { "text": "string" }, "default": "''", "description": "The name of the control, submitted as part of form data.", "fieldName": "name" }, { "name": "value", "type": { "text": "string" }, "default": "''", "description": "The current markdown content.", "fieldName": "value" }, { "name": "label", "type": { "text": "string" }, "default": "''", "description": "The control's label. If you need HTML, use the `label` slot.", "fieldName": "label" }, { "name": "help-text", "type": { "text": "string" }, "default": "''", "description": "Help text displayed below the editor. If you need HTML, use the `help-text` slot.", "fieldName": "helpText" }, { "name": "placeholder", "type": { "text": "string" }, "default": "'Enter markdown content...'", "description": "Placeholder text shown when the editor is empty.", "fieldName": "placeholder" }, { "name": "rows", "type": { "text": "number" }, "default": "20", "description": "Number of rows for the textarea.", "fieldName": "rows" }, { "name": "view-mode", "type": { "text": "ViewMode" }, "default": "'editor'", "description": "Which view to show.", "fieldName": "viewMode" }, { "name": "storage-key", "type": { "text": "string" }, "default": "'zn-markdown-editor-view-mode'", "description": "Key used to persist the selected view mode to `localStorage`. Set to an empty string to disable persistence.", "fieldName": "storageKey" }, { "name": "required", "type": { "text": "boolean" }, "default": "false", "description": "Makes the editor required for form submission.", "fieldName": "required" }, { "name": "readonly", "type": { "text": "boolean" }, "default": "false", "description": "Makes the editor read-only.", "fieldName": "readonly" }, { "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Disables the editor.", "fieldName": "disabled" }, { "name": "expanded", "type": { "text": "boolean" }, "default": "false", "description": "Whether the editor is currently expanded to cover its containing positioned ancestor.", "fieldName": "expanded" }, { "name": "basis-px", "type": { "text": "number" }, "fieldName": "basis", "inheritedFrom": { "name": "ZnPanel", "module": "src/components/panel/panel.component.ts" } }, { "name": "caption", "type": { "text": "string" }, "fieldName": "caption", "inheritedFrom": { "name": "ZnPanel", "module": "src/components/panel/panel.component.ts" } }, { "name": "icon", "type": { "text": "string" }, "fieldName": "icon", "inheritedFrom": { "name": "ZnPanel", "module": "src/components/panel/panel.component.ts" } }, { "name": "tabbed", "type": { "text": "boolean" }, "fieldName": "tabbed", "inheritedFrom": { "name": "ZnPanel", "module": "src/components/panel/panel.component.ts" } }, { "name": "header-borderless", "type": { "text": "boolean" }, "fieldName": "headerBorderless", "inheritedFrom": { "name": "ZnPanel", "module": "src/components/panel/panel.component.ts" } }, { "name": "cosmic", "type": { "text": "boolean" }, "fieldName": "cosmic", "inheritedFrom": { "name": "ZnPanel", "module": "src/components/panel/panel.component.ts" } }, { "name": "flush", "type": { "text": "boolean" }, "fieldName": "flush", "inheritedFrom": { "name": "ZnPanel", "module": "src/components/panel/panel.component.ts" } }, { "name": "flush-x", "type": { "text": "boolean" }, "fieldName": "flushX", "inheritedFrom": { "name": "ZnPanel", "module": "src/components/panel/panel.component.ts" } }, { "name": "flush-y", "type": { "text": "boolean" }, "fieldName": "flushY", "inheritedFrom": { "name": "ZnPanel", "module": "src/components/panel/panel.component.ts" } }, { "name": "flush-footer", "type": { "text": "boolean" }, "fieldName": "flushFooter", "inheritedFrom": { "name": "ZnPanel", "module": "src/components/panel/panel.component.ts" } }, { "name": "transparent", "type": { "text": "boolean" }, "fieldName": "transparent", "inheritedFrom": { "name": "ZnPanel", "module": "src/components/panel/panel.component.ts" } }, { "name": "shadow", "type": { "text": "boolean" }, "fieldName": "shadow", "inheritedFrom": { "name": "ZnPanel", "module": "src/components/panel/panel.component.ts" } } ], "superclass": { "name": "ZnPanel", "module": "/src/components/panel/panel.component" }, "summary": "A markdown editor with live preview, split view, and a fullscreen mode.", "tagNameWithoutPrefix": "markdown-editor", "tagName": "zn-markdown-editor", "customElement": true, "jsDoc": "/**\n * @summary A markdown editor with live preview, split view, and a fullscreen mode.\n * @documentation https://zinc.style/components/markdown-editor\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-textarea\n * @dependency zn-button-group\n * @dependency zn-icon\n *\n * @event zn-change - Emitted when the markdown content changes.\n * @event zn-input - Emitted on each keystroke in the editor.\n * @event zn-view-mode-change - Emitted when the user switches between editor / split / preview.\n *\n * @slot label - The editor label. Alternatively, use the `label` attribute.\n * @slot help-text - Help text shown below the editor. Alternatively, use the `help-text` attribute.\n *\n * @csspart base - The component's base wrapper.\n * @csspart toolbar - The toolbar containing the view-mode and fullscreen controls.\n * @csspart editor - The textarea wrapper.\n * @csspart preview - The rendered markdown preview.\n */", "documentation": "https://zinc.style/components/markdown-editor", "status": "experimental", "since": "1.0", "dependencies": [ "zn-textarea", "zn-button-group", "zn-icon" ], "cssProperties": [ { "description": "The flex-basis of the panel. Can be set using the basis-px attribute.", "name": "--zn-panel-basis", "inheritedFrom": { "name": "ZnPanel", "module": "src/components/panel/panel.component.ts" } } ] } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "ZnMarkdownEditor", "module": "components/markdown-editor/markdown-editor.js" } } ] }, { "kind": "javascript-module", "path": "components/menu/menu.js", "declarations": [ { "kind": "class", "description": "", "name": "ZnMenu", "cssProperties": [ { "description": "An example CSS custom property.", "name": "--example" }, { "description": "Caps the menu's height and makes it scroll internally. Unset (`none`) by default, so the menu grows to fit its items unless a consumer sets this.", "name": "--zn-menu-max-height" } ], "cssParts": [ { "description": "The component's base wrapper.", "name": "base" } ], "slots": [ { "description": "The default slot.", "name": "" }, { "description": "An example slot.", "name": "example" } ], "members": [ { "kind": "field", "name": "dependencies", "type": { "text": "object" }, "static": true, "default": "{ 'zn-confirm': ZnConfirm, 'zn-dropdown': ZnDropdown, 'zn-icon': ZnIcon, 'zn-menu-item': ZnMenuItem, 'zn-tooltip': ZnTooltip, }" }, { "kind": "field", "name": "defaultSlot", "type": { "text": "HTMLSlotElement" } }, { "kind": "field", "name": "actions", "type": { "text": "array" }, "default": "[]", "attribute": "actions" }, { "kind": "field", "name": "variant", "type": { "text": "'default' | 'shell'" }, "default": "'default'", "description": "The menu's visual style. `shell` renders the app-shell header dropdown\nlook: a padded panel with floating rounded items. Propagated to the\nmenu's items.", "attribute": "variant", "reflects": true }, { "kind": "method", "name": "handleClick", "privacy": "private", "parameters": [ { "name": "event", "type": { "text": "MouseEvent" } } ] }, { "kind": "method", "name": "handleKeyDown", "privacy": "private", "parameters": [ { "name": "event", "type": { "text": "KeyboardEvent" } } ] }, { "kind": "method", "name": "handleMouseDown", "privacy": "private", "parameters": [ { "name": "event", "type": { "text": "MouseEvent" } } ] }, { "kind": "method", "name": "handleSlotChange", "privacy": "private" }, { "kind": "method", "name": "propagateVariant", "privacy": "private", "description": "Keeps slotted menu items in sync with the menu's variant." }, { "kind": "method", "name": "isMenuItem", "privacy": "private", "parameters": [ { "name": "item", "type": { "text": "HTMLElement" } } ] } ], "events": [ { "description": "Emitted as an example.", "name": "zn-event-name" } ], "attributes": [ { "name": "actions", "type": { "text": "array" }, "default": "[]", "fieldName": "actions" }, { "name": "variant", "type": { "text": "'default' | 'shell'" }, "default": "'default'", "description": "The menu's visual style. `shell` renders the app-shell header dropdown\nlook: a padded panel with floating rounded items. Propagated to the\nmenu's items.", "fieldName": "variant" } ], "superclass": { "name": "ZincElement", "module": "/src/internal/zinc-element" }, "summary": "Short summary of the component's intended use.", "tagNameWithoutPrefix": "menu", "tagName": "zn-menu", "customElement": true, "jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/menu\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-example\n *\n * @event zn-event-name - Emitted as an example.\n *\n * @slot - The default slot.\n * @slot example - An example slot.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --example - An example CSS custom property.\n * @cssproperty --zn-menu-max-height - Caps the menu's height and makes it scroll internally.\n * Unset (`none`) by default, so the menu grows to fit its items unless a consumer sets this.\n */", "documentation": "https://zinc.style/components/menu", "status": "experimental", "since": "1.0", "dependencies": [ "zn-example" ] } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "ZnMenu", "module": "components/menu/menu.js" } } ] }, { "kind": "javascript-module", "path": "components/menu-item/menu-item.js", "declarations": [ { "kind": "class", "description": "", "name": "ZnMenuItem", "cssProperties": [ { "description": "An example CSS custom property.", "name": "--example" } ], "cssParts": [ { "description": "The component's base wrapper.", "name": "base" } ], "slots": [ { "description": "The default slot.", "name": "" }, { "description": "An example slot.", "name": "example" } ], "members": [ { "kind": "field", "name": "dependencies", "type": { "text": "object" }, "static": true, "default": "{ 'zn-icon': ZnIcon, 'zn-popup': ZnPopup }" }, { "kind": "field", "name": "cachedTextLabel", "type": { "text": "string" }, "privacy": "private" }, { "kind": "field", "name": "defaultSlot", "type": { "text": "HTMLSlotElement" } }, { "kind": "field", "name": "menuItem", "type": { "text": "HTMLElement" } }, { "kind": "field", "name": "type", "type": { "text": "'normal' | 'checkbox'" }, "default": "'normal'", "description": "The type of menu item to render. To use `checked`, this value must be set to `checkbox`.", "attribute": "type" }, { "kind": "field", "name": "variant", "type": { "text": "'default' | 'dropdown' | 'shell'" }, "default": "'default'", "description": "The item's visual style. A standalone item defaults to navigation styling;\na parent zn-menu sets this to `dropdown` or `shell` automatically.", "attribute": "variant", "reflects": true }, { "kind": "field", "name": "checked", "type": { "text": "boolean" }, "default": "false", "description": "Draws the item in a checked state.", "attribute": "checked", "reflects": true }, { "kind": "field", "name": "checkedPosition", "type": { "text": "'left' | 'right'" }, "default": "'left'", "attribute": "checked-position", "reflects": true }, { "kind": "field", "name": "value", "type": { "text": "string" }, "default": "''", "description": "A unique value to store in the menu item. This can be used as a way to identify menu items when selected.", "attribute": "value" }, { "kind": "field", "name": "loading", "type": { "text": "boolean" }, "default": "false", "description": "Draws the menu item in a loading state.", "attribute": "loading", "reflects": true }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Draws the menu item in a disabled state, preventing selection.", "attribute": "disabled", "reflects": true }, { "kind": "field", "name": "color", "type": { "text": "string" }, "attribute": "color" }, { "kind": "field", "name": "href", "type": { "text": "string" }, "attribute": "href" }, { "kind": "field", "name": "dataPath", "type": { "text": "string" }, "attribute": "data-path" }, { "kind": "field", "name": "target", "type": { "text": "'_self' | '_blank' | '_parent' | '_top' | string" }, "attribute": "target" }, { "kind": "field", "name": "dataTarget", "type": { "text": "'modal' | 'slide' | string" }, "attribute": "data-target" }, { "kind": "field", "name": "rel", "type": { "text": "string" }, "default": "'noreferrer noopener'", "attribute": "rel" }, { "kind": "field", "name": "gaid", "type": { "text": "string" }, "attribute": "gaid" }, { "kind": "field", "name": "confirm", "type": { "text": "boolean" }, "default": "false", "attribute": "confirm", "reflects": true }, { "kind": "field", "name": "flush", "type": { "text": "boolean" }, "default": "false", "description": "Removes all padding from the menu item.", "attribute": "flush", "reflects": true }, { "kind": "field", "name": "flushX", "type": { "text": "boolean" }, "default": "false", "description": "Removes horizontal (left/right) padding only. Ignored if flush is set.", "attribute": "flush-x", "reflects": true }, { "kind": "field", "name": "flushY", "type": { "text": "boolean" }, "default": "false", "description": "Removes vertical (top/bottom) padding only. Ignored if flush is set.", "attribute": "flush-y", "reflects": true }, { "kind": "field", "name": "noBorder", "type": { "text": "boolean" }, "default": "false", "description": "Removes the border from the menu item.", "attribute": "no-border", "reflects": true }, { "kind": "field", "name": "active", "type": { "text": "boolean" }, "default": "false", "description": "Marks the menu item as currently active/selected.", "attribute": "active", "reflects": true }, { "kind": "field", "name": "localize", "privacy": "private", "readonly": true, "default": "new LocalizeController(this)" }, { "kind": "field", "name": "hasSlotController", "privacy": "private", "readonly": true, "default": "new HasSlotController(this, 'submenu')" }, { "kind": "field", "name": "submenuController", "type": { "text": "SubmenuController" }, "privacy": "private", "default": "new SubmenuController(this, this.hasSlotController, this.localize)" }, { "kind": "method", "name": "handleDefaultSlotChange", "privacy": "private" }, { "kind": "field", "name": "handleHostClick", "privacy": "private" }, { "kind": "field", "name": "handleMouseOver", "privacy": "private" }, { "kind": "method", "name": "handleCheckedChange" }, { "kind": "method", "name": "handleDisabledChange" }, { "kind": "method", "name": "handleTypeChange" }, { "kind": "method", "name": "getTextLabel", "description": "Returns a text label based on the contents of the menu item's default slot." }, { "kind": "method", "name": "isSubmenu" }, { "kind": "method", "name": "_isLink", "privacy": "private" } ], "events": [ { "description": "Emitted as an example.", "name": "zn-event-name" } ], "attributes": [ { "name": "type", "type": { "text": "'normal' | 'checkbox'" }, "default": "'normal'", "description": "The type of menu item to render. To use `checked`, this value must be set to `checkbox`.", "fieldName": "type" }, { "name": "variant", "type": { "text": "'default' | 'dropdown' | 'shell'" }, "default": "'default'", "description": "The item's visual style. A standalone item defaults to navigation styling;\na parent zn-menu sets this to `dropdown` or `shell` automatically.", "fieldName": "variant" }, { "name": "checked", "type": { "text": "boolean" }, "default": "false", "description": "Draws the item in a checked state.", "fieldName": "checked" }, { "name": "checked-position", "type": { "text": "'left' | 'right'" }, "default": "'left'", "fieldName": "checkedPosition" }, { "name": "value", "type": { "text": "string" }, "default": "''", "description": "A unique value to store in the menu item. This can be used as a way to identify menu items when selected.", "fieldName": "value" }, { "name": "loading", "type": { "text": "boolean" }, "default": "false", "description": "Draws the menu item in a loading state.", "fieldName": "loading" }, { "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Draws the menu item in a disabled state, preventing selection.", "fieldName": "disabled" }, { "name": "color", "type": { "text": "string" }, "fieldName": "color" }, { "name": "href", "type": { "text": "string" }, "fieldName": "href" }, { "name": "data-path", "type": { "text": "string" }, "fieldName": "dataPath" }, { "name": "target", "type": { "text": "'_self' | '_blank' | '_parent' | '_top' | string" }, "fieldName": "target" }, { "name": "data-target", "type": { "text": "'modal' | 'slide' | string" }, "fieldName": "dataTarget" }, { "name": "rel", "type": { "text": "string" }, "default": "'noreferrer noopener'", "fieldName": "rel" }, { "name": "gaid", "type": { "text": "string" }, "fieldName": "gaid" }, { "name": "confirm", "type": { "text": "boolean" }, "default": "false", "fieldName": "confirm" }, { "name": "flush", "type": { "text": "boolean" }, "default": "false", "description": "Removes all padding from the menu item.", "fieldName": "flush" }, { "name": "flush-x", "type": { "text": "boolean" }, "default": "false", "description": "Removes horizontal (left/right) padding only. Ignored if flush is set.", "fieldName": "flushX" }, { "name": "flush-y", "type": { "text": "boolean" }, "default": "false", "description": "Removes vertical (top/bottom) padding only. Ignored if flush is set.", "fieldName": "flushY" }, { "name": "no-border", "type": { "text": "boolean" }, "default": "false", "description": "Removes the border from the menu item.", "fieldName": "noBorder" }, { "name": "active", "type": { "text": "boolean" }, "default": "false", "description": "Marks the menu item as currently active/selected.", "fieldName": "active" } ], "superclass": { "name": "ZincElement", "module": "/src/internal/zinc-element" }, "summary": "Short summary of the component's intended use.", "tagNameWithoutPrefix": "menu-item", "tagName": "zn-menu-item", "customElement": true, "jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/menu-item\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-example\n *\n * @event zn-event-name - Emitted as an example.\n *\n * @slot - The default slot.\n * @slot example - An example slot.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --example - An example CSS custom property.\n */", "documentation": "https://zinc.style/components/menu-item", "status": "experimental", "since": "1.0", "dependencies": [ "zn-example" ] } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "ZnMenuItem", "module": "components/menu-item/menu-item.js" } } ] }, { "kind": "javascript-module", "path": "components/navbar/navbar.js", "declarations": [ { "kind": "class", "description": "", "name": "ZnNavbar", "cssProperties": [ { "description": "An example CSS custom property.", "name": "--example" } ], "cssParts": [ { "description": "The component's base wrapper.", "name": "base" } ], "slots": [ { "description": "The default slot.", "name": "" }, { "description": "Expanding action panels rendered alongside the navbar items.", "name": "expand" }, { "description": "Content rendered below the navbar row (e.g. chips, filters).", "name": "bottom" } ], "members": [ { "kind": "field", "name": "dependencies", "type": { "text": "object" }, "static": true, "default": "{ 'zn-dropdown': ZnDropdown }" }, { "kind": "field", "name": "navigation", "type": { "text": "array" }, "default": "[]", "attribute": "navigation" }, { "kind": "field", "name": "fullWidth", "type": { "text": "boolean" }, "attribute": "full-width", "reflects": true }, { "kind": "field", "name": "iconBar", "type": { "text": "boolean" }, "attribute": "icon-bar", "reflects": true }, { "kind": "field", "name": "slim", "type": { "text": "boolean" }, "attribute": "slim", "reflects": true }, { "kind": "field", "name": "border", "type": { "text": "boolean" }, "attribute": "border", "reflects": true }, { "kind": "field", "name": "hideOne", "type": { "text": "boolean" }, "attribute": "hide-one", "reflects": true }, { "kind": "field", "name": "flush", "type": { "text": "boolean" }, "default": "false", "attribute": "flush", "reflects": true }, { "kind": "field", "name": "gutter", "type": { "text": "boolean" }, "default": "false", "attribute": "gutter", "reflects": true }, { "kind": "field", "name": "stacked", "type": { "text": "boolean" }, "attribute": "stacked" }, { "kind": "field", "name": "dropdown", "type": { "text": "array" }, "default": "[]", "attribute": "dropdown" }, { "kind": "field", "name": "noPad", "type": { "text": "false" }, "attribute": "no-pad" }, { "kind": "field", "name": "manualAddItems", "type": { "text": "boolean" }, "default": "false", "attribute": "manual-add-items" }, { "kind": "field", "name": "isolated", "type": { "text": "boolean" }, "default": "false", "attribute": "isolated" }, { "kind": "field", "name": "color", "type": { "text": "string" }, "attribute": "color", "reflects": true }, { "kind": "field", "name": "masterId", "type": { "text": "string" }, "attribute": "master-id", "reflects": true }, { "kind": "field", "name": "storeKey", "type": { "text": "string" }, "default": "''", "attribute": "store-key" }, { "kind": "field", "name": "storeTtl", "type": { "text": "number" }, "default": "0", "attribute": "store-ttl", "reflects": true }, { "kind": "field", "name": "localStorage", "type": { "text": "boolean" }, "attribute": "local-storage", "reflects": true }, { "kind": "field", "name": "_preItems", "type": { "text": "HTMLElement[]" }, "privacy": "private", "default": "[]" }, { "kind": "field", "name": "_postItems", "type": { "text": "HTMLElement[]" }, "privacy": "private", "default": "[]" }, { "kind": "field", "name": "_appended", "type": { "text": "Element[]" }, "privacy": "private", "attribute": "_appended" }, { "kind": "field", "name": "_expanding", "type": { "text": "Element[]" }, "privacy": "private", "default": "[]" }, { "kind": "field", "name": "_openedTabs", "type": { "text": "string[]" }, "privacy": "private", "default": "[]" }, { "kind": "field", "name": "_itemsObserver", "privacy": "private", "readonly": true, "default": "new MutationController(this, { target: null, config: {childList: true}, callback: () => this._updateVisibility(), })" }, { "kind": "field", "name": "_navItems", "type": { "text": "HTMLElement | null" }, "privacy": "private", "default": "null" }, { "kind": "field", "name": "_expandable", "type": { "text": "HTMLElement | null" }, "privacy": "private", "default": "null" }, { "kind": "field", "name": "_extendedMenu", "type": { "text": "HTMLElement | null" }, "privacy": "private", "default": "null" }, { "kind": "field", "name": "_cloneSources", "privacy": "private", "readonly": true, "default": "new WeakMap()" }, { "kind": "field", "name": "_lightDomClones", "privacy": "private", "readonly": true, "default": "new WeakMap()" }, { "kind": "field", "name": "_navItemsGap", "type": { "text": "number" }, "privacy": "private", "default": "0" }, { "kind": "field", "name": "_expandableMargin", "type": { "text": "number" }, "privacy": "private", "default": "0" }, { "kind": "field", "name": "_totalItemWidth", "type": { "text": "number" }, "privacy": "private", "default": "0" }, { "kind": "field", "name": "_resizeFrame", "type": { "text": "number | null" }, "privacy": "private", "default": "null" }, { "kind": "field", "name": "_resizeController", "type": { "text": "ResizeController" }, "privacy": "private", "default": "new ResizeController(this, { callback: () => this._scheduleResize(), })" }, { "kind": "field", "name": "_store", "type": { "text": "Store" }, "privacy": "protected" }, { "kind": "method", "name": "appendItem", "parameters": [ { "name": "item", "type": { "text": "Element" } } ] }, { "kind": "method", "name": "_cloneLightItem", "privacy": "private", "return": { "type": { "text": "HTMLElement" } }, "parameters": [ { "name": "item", "type": { "text": "HTMLElement" } } ] }, { "kind": "method", "name": "_syncLightDomItems", "privacy": "private" }, { "kind": "method", "name": "addExpandingAction", "parameters": [ { "name": "action", "type": { "text": "Element" } } ] }, { "kind": "field", "name": "_expandingActionObserver", "privacy": "private", "readonly": true, "default": "new MutationController(this, { target: null, config: {attributes: true, attributeFilter: ['open', 'method', 'basis']}, callback: () => this._scheduleResize(), })" }, { "kind": "field", "name": "_scheduleResize", "privacy": "private" }, { "kind": "method", "name": "_observeExpandingAction", "privacy": "private", "parameters": [ { "name": "action", "type": { "text": "Element" } } ] }, { "kind": "method", "name": "_adoptNewLightItems", "privacy": "private", "parameters": [ { "name": "mutations", "type": { "text": "MutationRecord[]" } } ] }, { "kind": "field", "name": "_updateVisibility", "privacy": "private" }, { "kind": "method", "name": "itemCount", "return": { "type": { "text": "number" } } }, { "kind": "method", "name": "_resolveAvailableWidth", "privacy": "private", "return": { "type": { "text": "number" } } }, { "kind": "method", "name": "_measureTotalItemWidth", "privacy": "private", "return": { "type": { "text": "number" } } }, { "kind": "method", "name": "_getItemWidth", "privacy": "private", "return": { "type": { "text": "number" } }, "parameters": [ { "name": "item", "type": { "text": "HTMLElement" } } ] }, { "kind": "method", "name": "_getHorizontalSpacing", "privacy": "private", "return": { "type": { "text": "number" } }, "parameters": [ { "name": "element", "type": { "text": "HTMLElement" } } ] }, { "kind": "method", "name": "_getMoreItemWidth", "privacy": "private", "return": { "type": { "text": "number" } } }, { "kind": "method", "name": "_syncLastVisibleItem", "privacy": "private" }, { "kind": "method", "name": "_getExpandableWidth", "privacy": "private", "return": { "type": { "text": "number" } }, "parameters": [ { "name": "containerWidth", "type": { "text": "number" } } ] }, { "kind": "field", "name": "handleResize" }, { "kind": "field", "name": "_syncExtendedActive", "privacy": "private" }, { "kind": "method", "name": "addItem", "privacy": "public", "return": { "type": { "text": "void" } }, "parameters": [ { "name": "item", "type": { "text": "Element" } }, { "name": "persist", "default": "true", "type": { "text": "boolean" } } ] }, { "kind": "method", "name": "_loadStoredTabs", "privacy": "private" }, { "kind": "method", "name": "_saveTabToStorage", "privacy": "private", "parameters": [ { "name": "newTab", "type": { "text": "StoredTab" } } ] }, { "kind": "field", "name": "handleClick", "privacy": "private" } ], "events": [ { "description": "Emitted as an example.", "name": "zn-event-name" } ], "attributes": [ { "name": "navigation", "type": { "text": "array" }, "default": "[]", "fieldName": "navigation" }, { "name": "full-width", "type": { "text": "boolean" }, "fieldName": "fullWidth" }, { "name": "icon-bar", "type": { "text": "boolean" }, "fieldName": "iconBar" }, { "name": "slim", "type": { "text": "boolean" }, "fieldName": "slim" }, { "name": "border", "type": { "text": "boolean" }, "fieldName": "border" }, { "name": "hide-one", "type": { "text": "boolean" }, "fieldName": "hideOne" }, { "name": "flush", "type": { "text": "boolean" }, "default": "false", "fieldName": "flush" }, { "name": "gutter", "type": { "text": "boolean" }, "default": "false", "fieldName": "gutter" }, { "name": "stacked", "type": { "text": "boolean" }, "fieldName": "stacked" }, { "name": "dropdown", "type": { "text": "array" }, "default": "[]", "fieldName": "dropdown" }, { "name": "no-pad", "type": { "text": "false" }, "fieldName": "noPad" }, { "name": "manual-add-items", "type": { "text": "boolean" }, "default": "false", "fieldName": "manualAddItems" }, { "name": "isolated", "type": { "text": "boolean" }, "default": "false", "fieldName": "isolated" }, { "name": "color", "type": { "text": "string" }, "fieldName": "color" }, { "name": "master-id", "type": { "text": "string" }, "fieldName": "masterId" }, { "name": "store-key", "type": { "text": "string" }, "default": "''", "fieldName": "storeKey" }, { "name": "store-ttl", "type": { "text": "number" }, "default": "0", "fieldName": "storeTtl" }, { "name": "local-storage", "type": { "text": "boolean" }, "fieldName": "localStorage" }, { "name": "_appended", "type": { "text": "Element[]" }, "fieldName": "_appended" } ], "superclass": { "name": "ZincElement", "module": "/src/internal/zinc-element" }, "summary": "Short summary of the component's intended use.", "tagNameWithoutPrefix": "navbar", "tagName": "zn-navbar", "customElement": true, "jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/navbar\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-dropdown\n *\n * @event zn-event-name - Emitted as an example.\n *\n * @slot - The default slot.\n * @slot expand - Expanding action panels rendered alongside the navbar items.\n * @slot bottom - Content rendered below the navbar row (e.g. chips, filters).\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --example - An example CSS custom property.\n */", "documentation": "https://zinc.style/components/navbar", "status": "experimental", "since": "1.0", "dependencies": [ "zn-dropdown" ] } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "ZnNavbar", "module": "components/navbar/navbar.js" } } ] }, { "kind": "javascript-module", "path": "components/note/note.js", "declarations": [ { "kind": "class", "description": "", "name": "ZnNote", "cssProperties": [ { "description": "An example CSS custom property.", "name": "--example" } ], "cssParts": [ { "description": "The component's base wrapper.", "name": "base" } ], "slots": [ { "description": "The note's caption.", "name": "caption" }, { "description": "The note's date.", "name": "date" }, { "description": "The note's body.", "name": "body" } ], "members": [ { "kind": "field", "name": "color", "type": { "text": "typeof colors[number]" }, "attribute": "color", "reflects": true }, { "kind": "field", "name": "caption", "type": { "text": "string" }, "default": "''", "attribute": "caption", "reflects": true }, { "kind": "field", "name": "date", "type": { "text": "string" }, "default": "''", "attribute": "date", "reflects": true }, { "kind": "field", "name": "body", "type": { "text": "string" }, "default": "''", "attribute": "body", "reflects": true }, { "kind": "field", "name": "hasSlotController", "privacy": "private", "readonly": true, "default": "new HasSlotController(this, 'caption', 'date', '[default]', 'snippet', 'footer')" }, { "kind": "field", "name": "expanded", "type": { "text": "boolean" }, "privacy": "private", "default": "false" }, { "kind": "method", "name": "_toggleExpand", "privacy": "private", "return": { "type": { "text": "void" } } } ], "events": [ { "description": "Emitted as an example.", "name": "zn-event-name" } ], "attributes": [ { "name": "color", "type": { "text": "typeof colors[number]" }, "fieldName": "color" }, { "name": "caption", "type": { "text": "string" }, "default": "''", "fieldName": "caption" }, { "name": "date", "type": { "text": "string" }, "default": "''", "fieldName": "date" }, { "name": "body", "type": { "text": "string" }, "default": "''", "fieldName": "body" } ], "superclass": { "name": "ZincElement", "module": "/src/internal/zinc-element" }, "summary": "Short summary of the component's intended use.", "tagNameWithoutPrefix": "note", "tagName": "zn-note", "customElement": true, "jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/note\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-example\n *\n * @event zn-event-name - Emitted as an example.\n *\n * @slot caption - The note's caption.\n * @slot date - The note's date.\n * @slot body - The note's body.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --example - An example CSS custom property.\n */", "documentation": "https://zinc.style/components/note", "status": "experimental", "since": "1.0", "dependencies": [ "zn-example" ] } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "ZnNote", "module": "components/note/note.js" } } ] }, { "kind": "javascript-module", "path": "components/opt-group/opt-group.js", "declarations": [ { "kind": "class", "description": "", "name": "ZnOptGroup", "cssParts": [ { "description": "The component's base wrapper.", "name": "base" }, { "description": "The group label element.", "name": "label" } ], "slots": [ { "description": "The default slot for `` elements.", "name": "" } ], "members": [ { "kind": "field", "name": "label", "type": { "text": "string" }, "default": "''", "description": "The label for the opt-group, displayed as a non-selectable header above the grouped options.", "attribute": "label" }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Disables all options within the group.", "attribute": "disabled", "reflects": true }, { "kind": "method", "name": "handleLabelChange" }, { "kind": "method", "name": "handleDisabledChange" }, { "kind": "method", "name": "handleSlotChange", "privacy": "private" }, { "kind": "method", "name": "propagateDisabled", "privacy": "private" } ], "attributes": [ { "name": "label", "type": { "text": "string" }, "default": "''", "description": "The label for the opt-group, displayed as a non-selectable header above the grouped options.", "fieldName": "label" }, { "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Disables all options within the group.", "fieldName": "disabled" } ], "superclass": { "name": "ZincElement", "module": "/src/internal/zinc-element" }, "summary": "Groups options within a `` under a labeled header, similar to `` in native HTML.", "tagNameWithoutPrefix": "opt-group", "tagName": "zn-opt-group", "customElement": true, "jsDoc": "/**\n * @summary Groups options within a `` under a labeled header, similar to `` in native HTML.\n * @documentation https://zinc.style/components/opt-group\n * @status experimental\n * @since 1.0\n *\n * @slot - The default slot for `` elements.\n *\n * @csspart base - The component's base wrapper.\n * @csspart label - The group label element.\n */", "documentation": "https://zinc.style/components/opt-group", "status": "experimental", "since": "1.0" } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "ZnOptGroup", "module": "components/opt-group/opt-group.js" } } ] }, { "kind": "javascript-module", "path": "components/option/option.js", "declarations": [ { "kind": "class", "description": "", "name": "ZnOption", "cssParts": [ { "description": "The checked option icon, an `` element.", "name": "checked-option-icon" }, { "description": "The component's base wrapper.", "name": "base" }, { "description": "The option's label.", "name": "label" }, { "description": "The container that wraps the prefix.", "name": "prefix" }, { "description": "The container that wraps the suffix.", "name": "suffix" } ], "slots": [ { "description": "The option's label.", "name": "" }, { "description": "Used to prepend an icon or similar element to the menu item.", "name": "prefix" }, { "description": "Used to append an icon or similar element to the menu item.", "name": "suffix" } ], "members": [ { "kind": "field", "name": "dependencies", "type": { "text": "object" }, "static": true, "default": "{ 'zn-icon': ZnIcon }" }, { "kind": "field", "name": "cachedTextLabel", "type": { "text": "string" }, "privacy": "private" }, { "kind": "field", "name": "localize", "privacy": "private", "readonly": true, "default": "new LocalizeController(this)" }, { "kind": "field", "name": "multiple", "type": { "text": "boolean" }, "privacy": "public", "default": "false" }, { "kind": "field", "name": "defaultSlot", "type": { "text": "HTMLSlotElement" } }, { "kind": "field", "name": "current", "type": { "text": "boolean" }, "default": "false" }, { "kind": "field", "name": "hasHover", "type": { "text": "boolean" }, "default": "false" }, { "kind": "field", "name": "value", "type": { "text": "string" }, "default": "''", "description": "The option's value. When selected, the containing form control will receive this value. The value must be unique\nfrom other options in the same group. Values may contain spaces when using JSON array syntax on the parent select.", "attribute": "value", "reflects": true }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Draws the option in a disabled state, preventing selection.", "attribute": "disabled", "reflects": true }, { "kind": "field", "name": "selected", "type": { "text": "boolean" }, "default": "false", "attribute": "selected", "reflects": true }, { "kind": "method", "name": "handleDefaultSlotChange", "privacy": "private" }, { "kind": "method", "name": "handleMouseEnter", "privacy": "private" }, { "kind": "method", "name": "handleMouseLeave", "privacy": "private" }, { "kind": "method", "name": "handleDisabledChange" }, { "kind": "method", "name": "handleSelectedChange" }, { "kind": "method", "name": "getTextLabel", "description": "Returns a plain text label based on the option's content." } ], "attributes": [ { "name": "value", "type": { "text": "string" }, "default": "''", "description": "The option's value. When selected, the containing form control will receive this value. The value must be unique\nfrom other options in the same group. Values may contain spaces when using JSON array syntax on the parent select.", "fieldName": "value" }, { "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Draws the option in a disabled state, preventing selection.", "fieldName": "disabled" }, { "name": "selected", "type": { "text": "boolean" }, "default": "false", "fieldName": "selected" } ], "superclass": { "name": "ZincElement", "module": "/src/internal/zinc-element" }, "summary": "Short summary of the component's intended use.", "tagNameWithoutPrefix": "option", "tagName": "zn-option", "customElement": true, "jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/option\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-icon\n *\n * @slot - The option's label.\n * @slot prefix - Used to prepend an icon or similar element to the menu item.\n * @slot suffix - Used to append an icon or similar element to the menu item.\n *\n * @csspart checked-option-icon - The checked option icon, an `` element.\n * @csspart base - The component's base wrapper.\n * @csspart label - The option's label.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart suffix - The container that wraps the suffix.\n */", "documentation": "https://zinc.style/components/option", "status": "experimental", "since": "1.0", "dependencies": [ "zn-icon" ] } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "ZnOption", "module": "components/option/option.js" } } ] }, { "kind": "javascript-module", "path": "components/order-table/order-table.js", "declarations": [ { "kind": "class", "description": "", "name": "ZnOrderTable", "cssProperties": [ { "description": "An example CSS custom property.", "name": "--example" } ], "cssParts": [ { "description": "The component's base wrapper.", "name": "base" } ], "slots": [ { "description": "The default slot.", "name": "" }, { "description": "An example slot.", "name": "example" } ], "members": [ { "kind": "field", "name": "data", "type": { "text": "OrderTableData" }, "attribute": "data", "reflects": true }, { "kind": "field", "name": "isMobile", "type": { "text": "boolean" }, "privacy": "private", "default": "false" }, { "kind": "field", "name": "modifiedData", "type": { "text": "OrderTableData" }, "privacy": "private" }, { "kind": "field", "name": "resizeEventHandler" }, { "kind": "method", "name": "getHeaders" }, { "kind": "method", "name": "getRows" }, { "kind": "method", "name": "getCaption", "parameters": [ { "name": "item", "type": { "text": "any" } } ] }, { "kind": "method", "name": "getSubItems", "parameters": [ { "name": "item", "type": { "text": "any" } } ] }, { "kind": "method", "name": "getSummary" }, { "kind": "method", "name": "getMobileRows", "privacy": "private" }, { "kind": "method", "name": "getMobileSubItems", "parameters": [ { "name": "item", "type": { "text": "any" } } ] }, { "kind": "method", "name": "getMobileCaption", "parameters": [ { "name": "item", "type": { "text": "any" } }, { "name": "extra", "type": { "text": "any" } } ] } ], "events": [ { "description": "Emitted as an example.", "name": "zn-event-name" } ], "attributes": [ { "name": "data", "type": { "text": "OrderTableData" }, "fieldName": "data" } ], "superclass": { "name": "ZincElement", "module": "/src/internal/zinc-element" }, "summary": "Short summary of the component's intended use.", "tagNameWithoutPrefix": "order-table", "tagName": "zn-order-table", "customElement": true, "jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/order-table\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-example\n *\n * @event zn-event-name - Emitted as an example.\n *\n * @slot - The default slot.\n * @slot example - An example slot.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --example - An example CSS custom property.\n */", "documentation": "https://zinc.style/components/order-table", "status": "experimental", "since": "1.0", "dependencies": [ "zn-example" ] } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "ZnOrderTable", "module": "components/order-table/order-table.js" } } ] }, { "kind": "javascript-module", "path": "components/page/page.js", "declarations": [ { "kind": "class", "description": "", "name": "ZnPage", "slots": [ { "description": "Page content. Use zn-tab for named tabs and header-action/header-actions for header actions.", "name": "", "inheritedFrom": { "name": "ZnTabs", "module": "src/components/tabs/tabs.component.ts" } }, { "description": "Rich subtitle/description content. Falls back to the `summary` attribute when empty.", "name": "description" }, { "description": "Content rendered below the navbar row (e.g. chips, filters). Forwarded to the navbar's bottom slot.", "name": "bottom" }, { "description": "An example slot.", "name": "example", "inheritedFrom": { "name": "ZnTabs", "module": "src/components/tabs/tabs.component.ts" } } ], "members": [ { "kind": "field", "name": "dependencies", "type": { "text": "object" }, "static": true, "default": "{ 'zn-button': ZnButton, 'zn-copy-button': ZnCopyButton, 'zn-expanding-action': ZnExpandingAction, 'zn-icon': ZnIcon, 'zn-navbar': ZnNavbar, 'zn-tab': ZnTab }" }, { "kind": "field", "name": "pageSlotController", "privacy": "private", "readonly": true, "default": "new HasSlotController(this, 'breadcrumb', 'actions', 'caption')" }, { "kind": "field", "name": "caption", "type": { "text": "string" }, "attribute": "caption", "inheritedFrom": { "name": "ZnTabs", "module": "components/tabs/tabs.js" } }, { "kind": "field", "name": "entityId", "type": { "text": "string" }, "attribute": "entity-id" }, { "kind": "field", "name": "entityIdShow", "type": { "text": "boolean" }, "attribute": "entity-id-show" }, { "kind": "field", "name": "fullLocation", "type": { "text": "string" }, "attribute": "full-location" }, { "kind": "field", "name": "modal", "type": { "text": "boolean" }, "default": "false", "attribute": "modal", "reflects": true }, { "kind": "field", "name": "nested", "type": { "text": "boolean" }, "default": "false", "attribute": "nested", "reflects": true }, { "kind": "field", "name": "primary", "type": { "text": "boolean" }, "default": "false", "attribute": "primary", "reflects": true }, { "kind": "field", "name": "previousPath", "type": { "text": "string" }, "attribute": "previous-path" }, { "kind": "field", "name": "previousTarget", "type": { "text": "string" }, "attribute": "previous-target" }, { "kind": "field", "name": "summary", "type": { "text": "string" }, "attribute": "summary" }, { "kind": "field", "name": "scrolled", "type": { "text": "boolean" }, "privacy": "private", "default": "false" }, { "kind": "field", "name": "tabDefinitions", "type": { "text": "TabDefinition[]" }, "privacy": "private", "default": "[]" }, { "kind": "field", "name": "hasExpandingActions", "type": { "text": "boolean" }, "privacy": "private", "default": "false" }, { "kind": "field", "name": "actionObserver", "type": { "text": "MutationObserver | null" }, "privacy": "private", "default": "null" }, { "kind": "field", "name": "tabObserver", "type": { "text": "MutationObserver | null" }, "privacy": "private", "default": "null" }, { "kind": "field", "name": "pageHistoryKey", "type": { "text": "string | null" }, "privacy": "private", "default": "null" }, { "kind": "field", "name": "handleAltPress", "privacy": "private" }, { "kind": "field", "name": "handleAltUp", "privacy": "private" }, { "kind": "field", "name": "handleBreadcrumbSlotChange", "privacy": "private" }, { "kind": "field", "name": "_registerTabs", "inheritedFrom": { "name": "ZnTabs", "module": "components/tabs/tabs.js" } }, { "kind": "method", "name": "getOwnExpandingActions", "privacy": "private" }, { "kind": "method", "name": "getNavbar", "privacy": "private" }, { "kind": "method", "name": "refreshExpandingActionsState", "privacy": "private" }, { "kind": "method", "name": "syncExpandingActionsToNavbar", "privacy": "private" }, { "kind": "method", "name": "prepareTabs", "privacy": "private" }, { "kind": "method", "name": "parsePriority", "privacy": "private", "return": { "type": { "text": "number | null" } }, "parameters": [ { "name": "value", "type": { "text": "string | null" } } ] }, { "kind": "method", "name": "compareTabs", "privacy": "private", "return": { "type": { "text": "number" } }, "parameters": [ { "name": "a", "type": { "text": "TabDefinition" } }, { "name": "b", "type": { "text": "TabDefinition" } } ] }, { "kind": "method", "name": "captionToId", "privacy": "private", "return": { "type": { "text": "string" } }, "parameters": [ { "name": "caption", "type": { "text": "string" } } ] }, { "kind": "method", "name": "uniqueId", "privacy": "private", "return": { "type": { "text": "string" } }, "parameters": [ { "name": "id", "type": { "text": "string" } }, { "name": "usedIds", "type": { "text": "Set" } } ] }, { "kind": "method", "name": "handlePageScroll", "privacy": "private", "parameters": [ { "name": "event", "type": { "text": "Event" } } ] }, { "kind": "method", "name": "handleNavigationSelect", "privacy": "private", "parameters": [ { "name": "event", "type": { "text": "ZnSelectEvent" } } ] }, { "kind": "method", "name": "getNavigationItemPage", "privacy": "private", "return": { "type": { "text": "ZnPage | null" } }, "parameters": [ { "name": "item", "type": { "text": "HTMLElement" } } ] }, { "kind": "method", "name": "activateTab", "privacy": "private", "parameters": [ { "name": "tabId", "type": { "text": "string" } }, { "name": "store", "type": { "text": "boolean" } }, { "name": "pushHistory", "default": "false" } ] }, { "kind": "method", "name": "activateInitialPageTab", "privacy": "private" }, { "kind": "method", "name": "getTabStoreKey", "privacy": "protected", "return": { "type": { "text": "string" } }, "description": "The key the active tab is persisted under. Null disables persistence.", "inheritedFrom": { "name": "ZnTabs", "module": "components/tabs/tabs.js" } }, { "kind": "method", "name": "activateDefaultTab", "privacy": "protected", "description": "Activates the tab the container starts on, ignoring any stored selection.", "inheritedFrom": { "name": "ZnTabs", "module": "components/tabs/tabs.js" } }, { "kind": "method", "name": "getPageHistoryKey", "privacy": "private", "return": { "type": { "text": "string" } } }, { "kind": "method", "name": "activateTabDefinition", "privacy": "private", "parameters": [ { "name": "tab", "type": { "text": "TabDefinition" } }, { "name": "store", "default": "false" } ] }, { "kind": "method", "name": "findNavItemForUri", "privacy": "private", "return": { "type": { "text": "HTMLElement | null" } }, "parameters": [ { "name": "uri", "type": { "text": "string" } } ] }, { "kind": "method", "name": "registerPagePanels", "privacy": "private" }, { "kind": "method", "name": "registerPageNavigationTabs", "privacy": "private" }, { "kind": "method", "name": "syncNavigationActive", "privacy": "private", "parameters": [ { "name": "activeItem", "type": { "text": "HTMLElement" } } ] }, { "kind": "field", "name": "masterId", "type": { "text": "string" }, "attribute": "master-id", "reflects": true, "inheritedFrom": { "name": "ZnTabs", "module": "components/tabs/tabs.js" } }, { "kind": "field", "name": "defaultUri", "type": { "text": "string" }, "default": "''", "attribute": "default-uri", "reflects": true, "inheritedFrom": { "name": "ZnTabs", "module": "components/tabs/tabs.js" } }, { "kind": "field", "name": "_current", "type": { "text": "string" }, "default": "''", "attribute": "active", "reflects": true, "inheritedFrom": { "name": "ZnTabs", "module": "components/tabs/tabs.js" } }, { "kind": "field", "name": "_split", "type": { "text": "number" }, "attribute": "split", "reflects": true, "inheritedFrom": { "name": "ZnTabs", "module": "components/tabs/tabs.js" } }, { "kind": "field", "name": "_splitMin", "type": { "text": "number" }, "default": "60", "attribute": "split-min", "reflects": true, "inheritedFrom": { "name": "ZnTabs", "module": "components/tabs/tabs.js" } }, { "kind": "field", "name": "_splitMinSecondary", "type": { "text": "number" }, "attribute": "split-min-secondary", "reflects": true, "inheritedFrom": { "name": "ZnTabs", "module": "components/tabs/tabs.js" } }, { "kind": "field", "name": "_splitMax", "type": { "text": "number" }, "attribute": "split-max", "reflects": true, "inheritedFrom": { "name": "ZnTabs", "module": "components/tabs/tabs.js" } }, { "kind": "field", "name": "primaryCaption", "type": { "text": "string" }, "default": "'Navigation'", "attribute": "primary-caption", "reflects": true, "inheritedFrom": { "name": "ZnTabs", "module": "components/tabs/tabs.js" } }, { "kind": "field", "name": "secondaryCaption", "type": { "text": "string" }, "default": "'Content'", "attribute": "secondary-caption", "reflects": true, "inheritedFrom": { "name": "ZnTabs", "module": "components/tabs/tabs.js" } }, { "kind": "field", "name": "noPrefetch", "type": { "text": "boolean" }, "default": "false", "attribute": "no-prefetch", "reflects": true, "inheritedFrom": { "name": "ZnTabs", "module": "components/tabs/tabs.js" } }, { "kind": "field", "name": "noCache", "type": { "text": "boolean" }, "default": "false", "attribute": "no-cache", "reflects": true, "inheritedFrom": { "name": "ZnTabs", "module": "components/tabs/tabs.js" } }, { "kind": "field", "name": "localStorage", "type": { "text": "boolean" }, "attribute": "local-storage", "reflects": true, "inheritedFrom": { "name": "ZnTabs", "module": "components/tabs/tabs.js" } }, { "kind": "field", "name": "storeKey", "type": { "text": "string" }, "attribute": "store-key", "inheritedFrom": { "name": "ZnTabs", "module": "components/tabs/tabs.js" } }, { "kind": "field", "name": "storeTtl", "type": { "text": "number" }, "default": "0", "attribute": "store-ttl", "reflects": true, "inheritedFrom": { "name": "ZnTabs", "module": "components/tabs/tabs.js" } }, { "kind": "field", "name": "padded", "type": { "text": "boolean" }, "default": "false", "attribute": "padded", "reflects": true, "inheritedFrom": { "name": "ZnTabs", "module": "components/tabs/tabs.js" } }, { "kind": "field", "name": "fetchStyle", "type": { "text": "string" }, "default": "\"\"", "attribute": "fetch-style", "reflects": true, "inheritedFrom": { "name": "ZnTabs", "module": "components/tabs/tabs.js" } }, { "kind": "field", "name": "fullWidth", "type": { "text": "boolean" }, "default": "false", "attribute": "full-width", "reflects": true, "inheritedFrom": { "name": "ZnTabs", "module": "components/tabs/tabs.js" } }, { "kind": "field", "name": "paddedRight", "type": { "text": "boolean" }, "default": "false", "attribute": "padded-right", "reflects": true, "inheritedFrom": { "name": "ZnTabs", "module": "components/tabs/tabs.js" } }, { "kind": "field", "name": "monitor", "type": { "text": "string" }, "attribute": "monitor", "inheritedFrom": { "name": "ZnTabs", "module": "components/tabs/tabs.js" } }, { "kind": "field", "name": "description", "type": { "text": "string" }, "attribute": "description", "inheritedFrom": { "name": "ZnTabs", "module": "components/tabs/tabs.js" } }, { "kind": "field", "name": "preload", "type": { "text": "boolean" }, "privacy": "protected", "default": "true", "inheritedFrom": { "name": "ZnTabs", "module": "components/tabs/tabs.js" } }, { "kind": "field", "name": "_store", "type": { "text": "Store" }, "privacy": "protected", "inheritedFrom": { "name": "ZnTabs", "module": "components/tabs/tabs.js" } }, { "kind": "field", "name": "_activeClicks", "type": { "text": "number" }, "privacy": "protected", "default": "0", "inheritedFrom": { "name": "ZnTabs", "module": "components/tabs/tabs.js" } }, { "kind": "field", "name": "_panel", "type": { "text": "Element | null | undefined" }, "privacy": "private", "inheritedFrom": { "name": "ZnTabs", "module": "components/tabs/tabs.js" } }, { "kind": "field", "name": "_panels", "type": { "text": "Map" }, "privacy": "private", "default": "new Map()", "inheritedFrom": { "name": "ZnTabs", "module": "components/tabs/tabs.js" } }, { "kind": "field", "name": "_activeTab", "type": { "text": "Element | null" }, "privacy": "private", "default": "null", "inheritedFrom": { "name": "ZnTabs", "module": "components/tabs/tabs.js" } }, { "kind": "field", "name": "_tabs", "type": { "text": "HTMLElement[]" }, "privacy": "private", "default": "[]", "inheritedFrom": { "name": "ZnTabs", "module": "components/tabs/tabs.js" } }, { "kind": "field", "name": "_actions", "type": { "text": "HTMLElement[]" }, "privacy": "private", "default": "[]", "inheritedFrom": { "name": "ZnTabs", "module": "components/tabs/tabs.js" } }, { "kind": "field", "name": "_knownUri", "type": { "text": "Map" }, "privacy": "private", "default": "new Map()", "inheritedFrom": { "name": "ZnTabs", "module": "components/tabs/tabs.js" } }, { "kind": "field", "name": "_defaultTab", "type": { "text": "string" }, "privacy": "private", "default": "''", "inheritedFrom": { "name": "ZnTabs", "module": "components/tabs/tabs.js" } }, { "kind": "field", "name": "hasSlotController", "privacy": "private", "readonly": true, "default": "new HasSlotController(this, '[default]', 'bottom', 'right', 'left', 'top', 'actions')", "inheritedFrom": { "name": "ZnTabs", "module": "components/tabs/tabs.js" } }, { "kind": "field", "name": "_domObserver", "privacy": "private", "readonly": true, "default": "new MutationController(this, { target: null, config: {childList: true, subtree: true}, callback: mutations => { mutations.forEach(mutation => { if (mutation.type !== 'childList') return; if (mutation.addedNodes.length > 0) { this._registerTabs(); } if (mutation.removedNodes.length > 0) { mutation.removedNodes.forEach(node => { const id = node instanceof HTMLElement ? node.id : ''; if (id) this.removeTabAndPanel(id); }); } }); }, })", "inheritedFrom": { "name": "ZnTabs", "module": "components/tabs/tabs.js" } }, { "kind": "field", "name": "_monitorObserver", "privacy": "private", "readonly": true, "default": "new MutationController(this, { target: null, config: {childList: true, subtree: true}, callback: mutations => { mutations.forEach(mutation => { if (mutation.type !== 'childList') return; mutation.addedNodes.forEach(node => { if (node instanceof HTMLElement && node.id === this.monitor) { this.reRegisterTabs(); const storedValue = this.getStoredTab(); if (storedValue !== null) { this.restoreStoredTab(storedValue); } } }); }); }, })", "inheritedFrom": { "name": "ZnTabs", "module": "components/tabs/tabs.js" } }, { "kind": "method", "name": "monitorDom", "inheritedFrom": { "name": "ZnTabs", "module": "components/tabs/tabs.js" } }, { "kind": "method", "name": "getStoredTab", "privacy": "protected", "return": { "type": { "text": "string | null" } }, "inheritedFrom": { "name": "ZnTabs", "module": "components/tabs/tabs.js" } }, { "kind": "method", "name": "storeActiveTab", "privacy": "protected", "parameters": [ { "name": "tabName", "type": { "text": "string" } } ], "inheritedFrom": { "name": "ZnTabs", "module": "components/tabs/tabs.js" } }, { "kind": "method", "name": "restoreStoredTab", "privacy": "protected", "parameters": [ { "name": "stored", "type": { "text": "string" } } ], "inheritedFrom": { "name": "ZnTabs", "module": "components/tabs/tabs.js" } }, { "kind": "field", "name": "handlePopState", "privacy": "private", "readonly": true, "inheritedFrom": { "name": "ZnTabs", "module": "components/tabs/tabs.js" } }, { "kind": "method", "name": "pushTabHistory", "privacy": "private", "parameters": [ { "name": "tabName", "type": { "text": "string" } } ], "inheritedFrom": { "name": "ZnTabs", "module": "components/tabs/tabs.js" } }, { "kind": "method", "name": "getUriForTabId", "privacy": "private", "return": { "type": { "text": "string | null" } }, "parameters": [ { "name": "tabId", "type": { "text": "string" } } ], "inheritedFrom": { "name": "ZnTabs", "module": "components/tabs/tabs.js" } }, { "kind": "method", "name": "_addPanel", "parameters": [ { "name": "panel", "type": { "text": "HTMLElement" } } ], "inheritedFrom": { "name": "ZnTabs", "module": "components/tabs/tabs.js" } }, { "kind": "method", "name": "_addTab", "parameters": [ { "name": "tab", "type": { "text": "HTMLElement" } } ], "inheritedFrom": { "name": "ZnTabs", "module": "components/tabs/tabs.js" } }, { "kind": "field", "name": "reRegisterTabs", "inheritedFrom": { "name": "ZnTabs", "module": "components/tabs/tabs.js" } }, { "kind": "method", "name": "switchTab", "parameters": [ { "name": "inc", "type": { "text": "number" } } ], "inheritedFrom": { "name": "ZnTabs", "module": "components/tabs/tabs.js" } }, { "kind": "method", "name": "nextTab", "inheritedFrom": { "name": "ZnTabs", "module": "components/tabs/tabs.js" } }, { "kind": "method", "name": "previousTab", "inheritedFrom": { "name": "ZnTabs", "module": "components/tabs/tabs.js" } }, { "kind": "method", "name": "_prepareTab", "parameters": [ { "name": "tabId", "type": { "text": "string" } } ], "inheritedFrom": { "name": "ZnTabs", "module": "components/tabs/tabs.js" } }, { "kind": "method", "name": "_uriToId", "return": { "type": { "text": "string" } }, "parameters": [ { "name": "tabUri", "type": { "text": "string" } } ], "inheritedFrom": { "name": "ZnTabs", "module": "components/tabs/tabs.js" } }, { "kind": "method", "name": "_createUriPanel", "return": { "type": { "text": "HTMLDivElement" } }, "parameters": [ { "name": "tabEle", "type": { "text": "Element" } }, { "name": "tabUri", "type": { "text": "string" } }, { "name": "tabId", "type": { "text": "string" } } ], "inheritedFrom": { "name": "ZnTabs", "module": "components/tabs/tabs.js" } }, { "kind": "method", "name": "_handleClick", "parameters": [ { "name": "event", "type": { "text": "PointerEvent" } } ], "inheritedFrom": { "name": "ZnTabs", "module": "components/tabs/tabs.js" } }, { "kind": "method", "name": "fetchUriTab", "parameters": [ { "name": "target", "type": { "text": "HTMLElement" } } ], "inheritedFrom": { "name": "ZnTabs", "module": "components/tabs/tabs.js" } }, { "kind": "method", "name": "clickTab", "parameters": [ { "name": "target", "type": { "text": "HTMLElement" } }, { "name": "refresh", "type": { "text": "boolean" } }, { "name": "pushHistory", "default": "false" } ], "inheritedFrom": { "name": "ZnTabs", "module": "components/tabs/tabs.js" } }, { "kind": "method", "name": "getRefTab", "parameters": [ { "name": "target", "type": { "text": "HTMLElement" } } ], "inheritedFrom": { "name": "ZnTabs", "module": "components/tabs/tabs.js" } }, { "kind": "method", "name": "setActiveTab", "parameters": [ { "name": "tabName", "type": { "text": "string" } }, { "name": "store", "type": { "text": "boolean" } }, { "name": "refresh", "type": { "text": "boolean" } }, { "name": "refTab", "default": "null", "type": { "text": "string | null" } }, { "name": "pushHistory", "default": "false" } ], "inheritedFrom": { "name": "ZnTabs", "module": "components/tabs/tabs.js" } }, { "kind": "method", "name": "_setTabEleActive", "parameters": [ { "name": "ele", "type": { "text": "Element" } }, { "name": "active", "type": { "text": "boolean" } } ], "inheritedFrom": { "name": "ZnTabs", "module": "components/tabs/tabs.js" } }, { "kind": "method", "name": "selectTab", "return": { "type": { "text": "boolean" } }, "parameters": [ { "name": "tabName", "type": { "text": "string" } }, { "name": "refresh", "type": { "text": "boolean" } } ], "inheritedFrom": { "name": "ZnTabs", "module": "components/tabs/tabs.js" } }, { "kind": "method", "name": "getActiveTab", "return": { "type": { "text": "Element[]" } }, "inheritedFrom": { "name": "ZnTabs", "module": "components/tabs/tabs.js" } }, { "kind": "method", "name": "observerDom", "inheritedFrom": { "name": "ZnTabs", "module": "components/tabs/tabs.js" } }, { "kind": "method", "name": "removeTabAndPanel", "parameters": [ { "name": "tabId", "type": { "text": "string" } } ], "inheritedFrom": { "name": "ZnTabs", "module": "components/tabs/tabs.js" } } ], "attributes": [ { "name": "caption", "type": { "text": "string" }, "fieldName": "caption", "inheritedFrom": { "name": "ZnTabs", "module": "src/components/tabs/tabs.component.ts" } }, { "name": "entity-id", "type": { "text": "string" }, "fieldName": "entityId" }, { "name": "entity-id-show", "type": { "text": "boolean" }, "fieldName": "entityIdShow" }, { "name": "full-location", "type": { "text": "string" }, "fieldName": "fullLocation" }, { "name": "modal", "type": { "text": "boolean" }, "default": "false", "fieldName": "modal" }, { "name": "nested", "type": { "text": "boolean" }, "default": "false", "fieldName": "nested" }, { "name": "primary", "type": { "text": "boolean" }, "default": "false", "fieldName": "primary" }, { "name": "previous-path", "type": { "text": "string" }, "fieldName": "previousPath" }, { "name": "previous-target", "type": { "text": "string" }, "fieldName": "previousTarget" }, { "name": "summary", "type": { "text": "string" }, "fieldName": "summary" }, { "name": "master-id", "type": { "text": "string" }, "fieldName": "masterId", "inheritedFrom": { "name": "ZnTabs", "module": "src/components/tabs/tabs.component.ts" } }, { "name": "default-uri", "type": { "text": "string" }, "default": "''", "fieldName": "defaultUri", "inheritedFrom": { "name": "ZnTabs", "module": "src/components/tabs/tabs.component.ts" } }, { "name": "active", "type": { "text": "string" }, "default": "''", "fieldName": "_current", "inheritedFrom": { "name": "ZnTabs", "module": "src/components/tabs/tabs.component.ts" } }, { "name": "split", "type": { "text": "number" }, "fieldName": "_split", "inheritedFrom": { "name": "ZnTabs", "module": "src/components/tabs/tabs.component.ts" } }, { "name": "split-min", "type": { "text": "number" }, "default": "60", "fieldName": "_splitMin", "inheritedFrom": { "name": "ZnTabs", "module": "src/components/tabs/tabs.component.ts" } }, { "name": "split-min-secondary", "type": { "text": "number" }, "fieldName": "_splitMinSecondary", "inheritedFrom": { "name": "ZnTabs", "module": "src/components/tabs/tabs.component.ts" } }, { "name": "split-max", "type": { "text": "number" }, "fieldName": "_splitMax", "inheritedFrom": { "name": "ZnTabs", "module": "src/components/tabs/tabs.component.ts" } }, { "name": "primary-caption", "type": { "text": "string" }, "default": "'Navigation'", "fieldName": "primaryCaption", "inheritedFrom": { "name": "ZnTabs", "module": "src/components/tabs/tabs.component.ts" } }, { "name": "secondary-caption", "type": { "text": "string" }, "default": "'Content'", "fieldName": "secondaryCaption", "inheritedFrom": { "name": "ZnTabs", "module": "src/components/tabs/tabs.component.ts" } }, { "name": "no-prefetch", "type": { "text": "boolean" }, "default": "false", "fieldName": "noPrefetch", "inheritedFrom": { "name": "ZnTabs", "module": "src/components/tabs/tabs.component.ts" } }, { "name": "no-cache", "type": { "text": "boolean" }, "default": "false", "fieldName": "noCache", "inheritedFrom": { "name": "ZnTabs", "module": "src/components/tabs/tabs.component.ts" } }, { "name": "local-storage", "type": { "text": "boolean" }, "fieldName": "localStorage", "inheritedFrom": { "name": "ZnTabs", "module": "src/components/tabs/tabs.component.ts" } }, { "name": "store-key", "type": { "text": "string" }, "fieldName": "storeKey", "inheritedFrom": { "name": "ZnTabs", "module": "src/components/tabs/tabs.component.ts" } }, { "name": "store-ttl", "type": { "text": "number" }, "default": "0", "fieldName": "storeTtl", "inheritedFrom": { "name": "ZnTabs", "module": "src/components/tabs/tabs.component.ts" } }, { "name": "padded", "type": { "text": "boolean" }, "default": "false", "fieldName": "padded", "inheritedFrom": { "name": "ZnTabs", "module": "src/components/tabs/tabs.component.ts" } }, { "name": "fetch-style", "type": { "text": "string" }, "default": "\"\"", "fieldName": "fetchStyle", "inheritedFrom": { "name": "ZnTabs", "module": "src/components/tabs/tabs.component.ts" } }, { "name": "full-width", "type": { "text": "boolean" }, "default": "false", "fieldName": "fullWidth", "inheritedFrom": { "name": "ZnTabs", "module": "src/components/tabs/tabs.component.ts" } }, { "name": "padded-right", "type": { "text": "boolean" }, "default": "false", "fieldName": "paddedRight", "inheritedFrom": { "name": "ZnTabs", "module": "src/components/tabs/tabs.component.ts" } }, { "name": "monitor", "type": { "text": "string" }, "fieldName": "monitor", "inheritedFrom": { "name": "ZnTabs", "module": "src/components/tabs/tabs.component.ts" } }, { "name": "description", "type": { "text": "string" }, "fieldName": "description", "inheritedFrom": { "name": "ZnTabs", "module": "src/components/tabs/tabs.component.ts" } } ], "superclass": { "name": "ZnTabs", "module": "/src/components/tabs" }, "summary": "Combines a page header with tab navigation and tab panels.", "tagNameWithoutPrefix": "page", "tagName": "zn-page", "customElement": true, "jsDoc": "/**\n * @summary Combines a page header with tab navigation and tab panels.\n * @documentation https://zinc.style/components/page\n * @status experimental\n * @since 1.0\n *\n * @slot - Page content. Use zn-tab for named tabs and header-action/header-actions for header actions.\n * @slot description - Rich subtitle/description content. Falls back to the `summary` attribute when empty.\n * @slot bottom - Content rendered below the navbar row (e.g. chips, filters). Forwarded to the navbar's bottom slot.\n */", "documentation": "https://zinc.style/components/page", "status": "experimental", "since": "1.0", "cssParts": [ { "description": "The component's base wrapper.", "name": "base", "inheritedFrom": { "name": "ZnTabs", "module": "src/components/tabs/tabs.component.ts" } } ], "cssProperties": [ { "description": "An example CSS custom property.", "name": "--example", "inheritedFrom": { "name": "ZnTabs", "module": "src/components/tabs/tabs.component.ts" } } ], "events": [ { "description": "Emitted as an example.", "name": "zn-event-name", "inheritedFrom": { "name": "ZnTabs", "module": "src/components/tabs/tabs.component.ts" } } ] } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "ZnPage", "module": "components/page/page.js" } } ] }, { "kind": "javascript-module", "path": "components/page-builder/page-builder.js", "declarations": [ { "kind": "class", "description": "", "name": "ZnPageBuilder", "cssParts": [ { "description": "The grid wrapper.", "name": "base" }, { "description": "The full-width header action bar (only rendered when header slots are filled).", "name": "header" }, { "description": "The left palette panel.", "name": "palette" }, { "description": "The centre section-card canvas.", "name": "canvas" }, { "description": "The right panel while a section is selected.", "name": "inspector" }, { "description": "The inspector's fixed header (icon, section name, type, close).", "name": "inspector-header" }, { "description": "The inspector's scrolling form area.", "name": "inspector-body" } ], "slots": [ { "description": "`