custom-elements.json

{
  "version": "1.0.0",
  "modules": [
    {
      "kind": "javascript-module",
      "path": "src/components/dnn-button/dnn-button.tsx",
      "declarations": [
        {
          "kind": "class",
          "name": "dnn-button.tsx",
          "tagName": "dnn-button",
          "description": "",
          "attributes": [
            {
              "name": "confirm",
              "type": {
                "text": "boolean"
              },
              "description": "Optionally add a confirmation dialog before firing the action.",
              "default": "false",
              "required": false
            },
            {
              "name": "confirm-message",
              "type": {
                "text": "string"
              },
              "description": "The text of the confirmation message;",
              "default": "\"Are you sure ?\"",
              "required": false
            },
            {
              "name": "confirm-no-text",
              "type": {
                "text": "string"
              },
              "description": "The text of the no button for confirmation.",
              "default": "\"No\"",
              "required": false
            },
            {
              "name": "confirm-yes-text",
              "type": {
                "text": "string"
              },
              "description": "The text of the yes button for confirmation.",
              "default": "\"Yes\"",
              "required": false
            },
            {
              "name": "disabled",
              "type": {
                "text": "boolean"
              },
              "description": "Disables the button",
              "default": "false",
              "required": false
            },
            {
              "name": "form-button-type",
              "type": {
                "text": "\"button\" | \"reset\" | \"submit\""
              },
              "description": "Optional button type,\ncan be either submit, reset or button and defaults to button if not specified.\nWarning: DNN wraps the whole page in a form, only use this if you are handling\nform submission manually.",
              "default": "'button'",
              "required": false
            },
            {
              "name": "reversed",
              "type": {
                "text": "boolean"
              },
              "description": "Optionally reverses the button style.",
              "default": "false",
              "required": false
            },
            {
              "name": "size",
              "type": {
                "text": "\"large\" | \"normal\" | \"small\""
              },
              "description": "Optionally sets the button size, small normal or large, defaults to normal",
              "default": "'normal'",
              "required": false
            },
            {
              "name": "type",
              "type": {
                "text": "\"danger\" | \"primary\" | \"secondary\" | \"tertiary\""
              },
              "description": "Optional button style,\ncan be either primary, secondary or tertiary or danger and defaults to primary if not specified",
              "default": "'primary'",
              "required": false
            }
          ],
          "members": [],
          "events": [
            {
              "name": "canceled",
              "type": {
                "text": "any"
              },
              "description": "Fires when confirm is true and the user cancels the action."
            },
            {
              "name": "confirmed",
              "type": {
                "text": "any"
              },
              "description": "Fires when confirm is true and the user confirms the action."
            }
          ],
          "slots": [
            {
              "name": "Content of the button",
              "description": ""
            }
          ],
          "cssProperties": [
            {
              "name": "--background-color",
              "description": "The background color of the button."
            },
            {
              "name": "--border-color",
              "description": "The border color of the button."
            },
            {
              "name": "--border-radius",
              "description": "The border radius of the button."
            },
            {
              "name": "--border-size",
              "description": "The border size of the button."
            },
            {
              "name": "--color",
              "description": "The text color of the button."
            },
            {
              "name": "--padding",
              "description": "The padding of the button."
            }
          ],
          "cssParts": []
        }
      ]
    },
    {
      "kind": "javascript-module",
      "path": "src/components/dnn-checkbox/dnn-checkbox.tsx",
      "declarations": [
        {
          "kind": "class",
          "name": "dnn-checkbox.tsx",
          "tagName": "dnn-checkbox",
          "description": "",
          "attributes": [
            {
              "name": "checked",
              "type": {
                "text": "\"checked\" | \"intermediate\" | \"unchecked\""
              },
              "description": "Defines if the checkbox is checked (true) or unchecked (false) or in an intermediate state (undefined)",
              "default": "\"unchecked\"",
              "required": false
            },
            {
              "name": "name",
              "type": {
                "text": "string"
              },
              "description": "The name to show in the formData (if using forms).",
              "required": false
            },
            {
              "name": "use-intermediate",
              "type": {
                "text": "boolean"
              },
              "description": "Defines if clicking the checkbox will go through the intermediate state between checked and unchecked (tri-state)",
              "default": "false",
              "required": false
            },
            {
              "name": "value",
              "type": {
                "text": "string"
              },
              "description": "The value for this checkbox (not to be confused with its checked state).",
              "default": "\"on\"",
              "required": false
            }
          ],
          "members": [],
          "events": [
            {
              "name": "checkedchange",
              "type": {
                "text": "\"checked\" | \"intermediate\" | \"unchecked\""
              },
              "description": "Fires up when the checkbox checked property changes."
            }
          ],
          "slots": [
            {
              "name": " ",
              "description": "The label for the checkbox."
            },
            {
              "name": "checkedicon",
              "description": "Allows overriding the default checked icon."
            },
            {
              "name": "intermediateicon",
              "description": "If intermadiate state is used, allows overriding its icon."
            },
            {
              "name": "uncheckedicon",
              "description": "Allows overriding the unchecked icon."
            }
          ],
          "cssProperties": [
            {
              "name": "--focus-color",
              "description": "The color to outline the checkbox when hovered or focused, default to the dnn primary color."
            }
          ],
          "cssParts": []
        }
      ]
    },
    {
      "kind": "javascript-module",
      "path": "src/components/dnn-chevron/dnn-chevron.tsx",
      "declarations": [
        {
          "kind": "class",
          "name": "dnn-chevron.tsx",
          "tagName": "dnn-chevron",
          "description": "",
          "attributes": [
            {
              "name": "collapse-text",
              "type": {
                "text": "string"
              },
              "description": "Collapse text for screen readers",
              "default": "\"collapse\"",
              "required": false
            },
            {
              "name": "expand-text",
              "type": {
                "text": "string"
              },
              "description": "Expand text for screen readers",
              "default": "\"expand\"",
              "required": false
            },
            {
              "name": "expanded",
              "type": {
                "text": "boolean"
              },
              "description": "Is the chevron expanded",
              "default": "false",
              "required": false
            }
          ],
          "members": [],
          "events": [
            {
              "name": "changed",
              "type": {
                "text": "any"
              },
              "description": "Fires up when the expanded status changes"
            }
          ],
          "slots": [],
          "cssProperties": [],
          "cssParts": []
        }
      ]
    },
    {
      "kind": "javascript-module",
      "path": "src/components/dnn-collapsible/dnn-collapsible.tsx",
      "declarations": [
        {
          "kind": "class",
          "name": "dnn-collapsible.tsx",
          "tagName": "dnn-collapsible",
          "description": "",
          "attributes": [
            {
              "name": "expanded",
              "type": {
                "text": "boolean"
              },
              "description": "Defines if the panel is expanded or not.",
              "default": "false",
              "required": false
            },
            {
              "name": "transition-duration",
              "type": {
                "text": "number"
              },
              "description": "Defines the transition time in ms, defaults to 150ms",
              "default": "150",
              "required": false
            }
          ],
          "members": [
            {
              "kind": "method",
              "name": "updateSize",
              "description": "Updates the component height, use to update after a slot content changes.",
              "signature": "updateSize() => Promise<void>"
            }
          ],
          "events": [
            {
              "name": "dnnCollapsibleHeightChanged",
              "type": {
                "text": "void"
              },
              "description": "Fires whenever the collapsible height has changed"
            }
          ],
          "slots": [],
          "cssProperties": [],
          "cssParts": []
        }
      ]
    },
    {
      "kind": "javascript-module",
      "path": "src/components/dnn-color-input/dnn-color-input.tsx",
      "declarations": [
        {
          "kind": "class",
          "name": "dnn-color-input.tsx",
          "tagName": "dnn-color-input",
          "description": "A custom input component that allows previewing and changing a color value.",
          "attributes": [
            {
              "name": "color",
              "type": {
                "text": "string"
              },
              "description": "Sets the initial color, must be a valid 8 character hexadecimal string without the # sign.",
              "default": "\"000088\"",
              "required": false
            },
            {
              "name": "contrast-color",
              "type": {
                "text": "string"
              },
              "description": "Sets the initial contrast color, must be a valid 8 character hexadecimal string without the # sign.",
              "default": "\"FFFFFF\"",
              "required": false
            },
            {
              "name": "dark-color",
              "type": {
                "text": "string"
              },
              "description": "Sets the initial dark color, must be a valid 8 character hexadecimal string without the # sign.",
              "default": "\"0000044\"",
              "required": false
            },
            {
              "name": "help-text",
              "type": {
                "text": "string"
              },
              "description": "Defines the help label displayed under the field.",
              "required": false
            },
            {
              "name": "label",
              "type": {
                "text": "string"
              },
              "description": "The label for this input.",
              "required": false
            },
            {
              "name": "light-color",
              "type": {
                "text": "string"
              },
              "description": "Sets the initial light color, must be a valid 8 character hexadecimal string without the # sign.",
              "default": "\"00000FF\"",
              "required": false
            },
            {
              "name": "name",
              "type": {
                "text": "string"
              },
              "description": "The name for this input if forms are used.",
              "required": false
            },
            {
              "name": "readonly",
              "type": {
                "text": "boolean"
              },
              "description": "Disables interacting with the component.",
              "required": false
            },
            {
              "name": "use-contrast-color",
              "type": {
                "text": "boolean"
              },
              "description": "If true, the picker will allow selecting a contast color too.",
              "required": false
            },
            {
              "name": "use-dark-color",
              "type": {
                "text": "boolean"
              },
              "description": "If true, the picker will allow selecting a dark color too.",
              "required": false
            },
            {
              "name": "use-light-color",
              "type": {
                "text": "boolean"
              },
              "description": "If true, the picker will allow selecting a light color too.",
              "required": false
            }
          ],
          "members": [
            {
              "kind": "field",
              "name": "localization",
              "type": {
                "text": "{ contrast: string; preview: string; cancel: string; confirm: string; normal: string; light: string; dark: string; }"
              },
              "description": "Can be used to customize the text language.",
              "default": "{\n    contrast: \"Contrast\",\n    preview: \"Preview\",\n    cancel: \"Cancel\",\n    confirm: \"Confirm\",\n    normal: \"Normal\",\n    light: \"Light\",\n    dark: \"Dark\",\n  }",
              "required": false
            }
          ],
          "events": [
            {
              "name": "colorChange",
              "type": {
                "text": "DnnColorInfo"
              },
              "description": "Fires when the color was changed and confirmed."
            },
            {
              "name": "colorInput",
              "type": {
                "text": "DnnColorInfo"
              },
              "description": "Fires live as the user is trying color changes inside the modal."
            }
          ],
          "slots": [
            {
              "name": "prefix",
              "description": "Can be used to inject content before the input field."
            },
            {
              "name": "suffix",
              "description": "Can be used to inject content after the input field."
            }
          ],
          "cssProperties": [
            {
              "name": "--background",
              "description": "Defines the background color."
            },
            {
              "name": "--contast-text-align",
              "description": "Allows customizing the text alignment of the contast indicator text."
            },
            {
              "name": "--control-radius",
              "description": "Defines the radius for the control corners."
            },
            {
              "name": "--focus-color",
              "description": "Defines the color when the component is focused."
            },
            {
              "name": "--foreground",
              "description": "Defines the foreground color."
            }
          ],
          "cssParts": []
        }
      ]
    },
    {
      "kind": "javascript-module",
      "path": "src/components/dnn-color-picker/dnn-color-picker.tsx",
      "declarations": [
        {
          "kind": "class",
          "name": "dnn-color-picker.tsx",
          "tagName": "dnn-color-picker",
          "description": "Color Picker for Dnn",
          "attributes": [
            {
              "name": "color",
              "type": {
                "text": "string"
              },
              "description": "Sets the initial color, must be a valid 8 character hexadecimal string without the # sign.",
              "default": "\"FFFFFF\"",
              "required": false
            },
            {
              "name": "color-box-height",
              "type": {
                "text": "string"
              },
              "description": "Sets the width-height ratio of the color picker saturation-lightness box.",
              "default": "\"50%\"",
              "required": false
            }
          ],
          "members": [],
          "events": [
            {
              "name": "colorChanged",
              "type": {
                "text": "ColorInfo"
              },
              "description": "Fires up when the color is changed and emits a ColorInfo object"
            }
          ],
          "slots": [],
          "cssProperties": [],
          "cssParts": []
        }
      ]
    },
    {
      "kind": "javascript-module",
      "path": "src/components/dnn-dropzone/dnn-dropzone.tsx",
      "declarations": [
        {
          "kind": "class",
          "name": "dnn-dropzone.tsx",
          "tagName": "dnn-dropzone",
          "description": "",
          "attributes": [
            {
              "name": "allow-camera-mode",
              "type": {
                "text": "boolean"
              },
              "description": "If true, will allow the user to take a snapshot\nusing the device camera. (only works over https).",
              "default": "false",
              "required": false
            },
            {
              "name": "capture-quality",
              "type": {
                "text": "number"
              },
              "description": "Specifies the jpeg quality for when the device\ncamera is used to generate a picture.\nNeeds to be a number between 0 and 1 and defaults to 0.8",
              "default": "0.8",
              "required": false
            },
            {
              "name": "max-file-size",
              "type": {
                "text": "number"
              },
              "description": "Max file size in bytes.",
              "required": false
            },
            {
              "name": "name",
              "type": {
                "text": "string"
              },
              "description": "The name of the field when used in a form.",
              "required": false
            }
          ],
          "members": [
            {
              "kind": "field",
              "name": "allowedExtensions",
              "type": {
                "text": "string[]"
              },
              "description": "A list of allowed file extensions.\nIf not specified, any file is allowed.\nEx: [\"jpg\", \"jpeg\", \"gif\", \"png\"]",
              "required": false
            },
            {
              "kind": "field",
              "name": "resx",
              "type": {
                "text": "DropzoneResx"
              },
              "description": "Localization strings",
              "required": false
            }
          ],
          "events": [
            {
              "name": "filesSelected",
              "type": {
                "text": "File[]"
              },
              "description": "Fires when file were selected."
            }
          ],
          "slots": [],
          "cssProperties": [
            {
              "name": "--border-color",
              "description": "The color of the border."
            },
            {
              "name": "--border-radius",
              "description": "The radius of the controls borders."
            },
            {
              "name": "--drop-background-color",
              "description": "The color of the background when a file is dropping."
            }
          ],
          "cssParts": []
        }
      ]
    },
    {
      "kind": "javascript-module",
      "path": "src/components/examples/dnn-example-form/dnn-example-form.tsx",
      "declarations": [
        {
          "kind": "class",
          "name": "dnn-example-form.tsx",
          "tagName": "dnn-example-form",
          "description": "Do not use this component in production, it is meant for testing purposes only and is not distributed in the production package.",
          "attributes": [],
          "members": [],
          "events": [],
          "slots": [],
          "cssProperties": [],
          "cssParts": []
        }
      ]
    },
    {
      "kind": "javascript-module",
      "path": "src/components/dnn-fieldset/dnn-fieldset.tsx",
      "declarations": [
        {
          "kind": "class",
          "name": "dnn-fieldset.tsx",
          "tagName": "dnn-fieldset",
          "description": "A custom input component that wraps the html input element is a mobile friendly component that supports a label, some help text and other features.",
          "attributes": [
            {
              "name": "disabled",
              "type": {
                "text": "boolean"
              },
              "description": "If true, the fieldset will display as disabled.",
              "required": false
            },
            {
              "name": "float-label",
              "type": {
                "text": "boolean"
              },
              "description": "If true, the label will float in the container, set false to show it on top.",
              "required": false
            },
            {
              "name": "focused",
              "type": {
                "text": "boolean"
              },
              "description": "If true the fieldset will display as focused.",
              "required": false
            },
            {
              "name": "help-text",
              "type": {
                "text": "string"
              },
              "description": "Can be used to show some help text about this field.",
              "required": false
            },
            {
              "name": "invalid",
              "type": {
                "text": "boolean"
              },
              "description": "If true, the  fieldset will display as invalid.",
              "required": false
            },
            {
              "name": "label",
              "type": {
                "text": "string"
              },
              "description": "Sets the text of the fieldset label (caption).",
              "required": false
            },
            {
              "name": "resizable",
              "type": {
                "text": "\"block\" | \"both\" | \"horizontal\" | \"inline\" | \"none\" | \"vertical\""
              },
              "description": "Can be set to specify if the fieldset can be resized by the user.",
              "default": "\"none\"",
              "required": false
            }
          ],
          "members": [
            {
              "kind": "method",
              "name": "disable",
              "description": "Sets the fieldset to a disabled state.",
              "signature": "disable() => Promise<void>"
            },
            {
              "kind": "method",
              "name": "enable",
              "description": "Sets the fieldset to an enabled state.",
              "signature": "enable() => Promise<void>"
            },
            {
              "kind": "method",
              "name": "pinLabel",
              "description": "Places the label on the top of the container.",
              "signature": "pinLabel() => Promise<void>"
            },
            {
              "kind": "method",
              "name": "setBlurred",
              "description": "Unsets the fieldset focused state.",
              "signature": "setBlurred() => Promise<void>"
            },
            {
              "kind": "method",
              "name": "setFocused",
              "description": "Sets the fieldset to the focused state.",
              "signature": "setFocused() => Promise<void>"
            },
            {
              "kind": "method",
              "name": "setValidity",
              "description": "Sets the validity of the field.",
              "signature": "setValidity(valid: boolean, message?: string) => Promise<void>"
            },
            {
              "kind": "method",
              "name": "unpinLabel",
              "description": "Places the label in the vertical middle of the container.",
              "signature": "unpinLabel() => Promise<void>"
            }
          ],
          "events": [],
          "slots": [
            {
              "name": "label-prefix",
              "description": "Can be used to inject content before the labe."
            },
            {
              "name": "label-suffix",
              "description": "Can be used to inject content after the label."
            }
          ],
          "cssProperties": [
            {
              "name": "--background",
              "description": "Defines the background color."
            },
            {
              "name": "--control-radius",
              "description": "Defines the radius for the control corners."
            },
            {
              "name": "--danger-color",
              "description": "Defines the danger color used for invalid data."
            },
            {
              "name": "--focus-color",
              "description": "Defines the color when the component is focused."
            },
            {
              "name": "--foreground",
              "description": "Defines the foreground color."
            }
          ],
          "cssParts": []
        }
      ]
    },
    {
      "kind": "javascript-module",
      "path": "src/components/dnn-image-cropper/dnn-image-cropper.tsx",
      "declarations": [
        {
          "kind": "class",
          "name": "dnn-image-cropper.tsx",
          "tagName": "dnn-image-cropper",
          "description": "Allows cropping an image in-browser with the option to enforce a specific final size.\nAll computation happens in the browser and the final image is emmited\nin an event that has a data-url of the image.",
          "attributes": [
            {
              "name": "height",
              "type": {
                "text": "number"
              },
              "description": "Sets the desired final image height.",
              "required": false
            },
            {
              "name": "name",
              "type": {
                "text": "string"
              },
              "description": "The name of the control when used in a form.",
              "required": false
            },
            {
              "name": "prevent-undersized",
              "type": {
                "text": "boolean"
              },
              "description": "When set to true, prevents cropping an image smaller than the required size, which would blow pixel and make the final picture look blurry.",
              "default": "false",
              "required": false
            },
            {
              "name": "quality",
              "type": {
                "text": "number"
              },
              "description": "Sets the output quality of the cropped image (number between 0 and 1).",
              "default": "0.8",
              "required": false
            },
            {
              "name": "width",
              "type": {
                "text": "number"
              },
              "description": "Sets the desired final image width.",
              "required": false
            }
          ],
          "members": [
            {
              "kind": "field",
              "name": "resx",
              "type": {
                "text": "ImageCropperResx"
              },
              "description": "Can be used to customize controls text.\nSome values support tokens, see default values for examples.",
              "required": false
            },
            {
              "kind": "method",
              "name": "clear",
              "description": "Clears the current image and crop (resets the component).",
              "signature": "clear() => Promise<void>"
            }
          ],
          "events": [
            {
              "name": "imageCropChanged",
              "type": {
                "text": "string"
              },
              "description": "When the image crop changes, emits the dataurl for the new cropped image."
            },
            {
              "name": "imageFileCropChanged",
              "type": {
                "text": "File"
              },
              "description": "Emits both when a file is initially select and when the crop has changed.\nCompared to imageCropChanged, this event emits the file itself, which can be useful for uploading the file to a server including its name."
            }
          ],
          "slots": [],
          "cssProperties": [],
          "cssParts": []
        }
      ]
    },
    {
      "kind": "javascript-module",
      "path": "src/components/dnn-input/dnn-input.tsx",
      "declarations": [
        {
          "kind": "class",
          "name": "dnn-input.tsx",
          "tagName": "dnn-input",
          "description": "A custom input component that wraps the html input element is a mobile friendly component that supports a label, some help text and other features.",
          "attributes": [
            {
              "name": "allow-show-password",
              "type": {
                "text": "boolean"
              },
              "description": "If true, enables users to switch between a password and a text field (to view their password).",
              "required": false
            },
            {
              "name": "autocomplete",
              "type": {
                "text": "string"
              },
              "description": "Defines the type of auto-completion to use for this field, see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete.",
              "default": "\"off\"",
              "required": false
            },
            {
              "name": "disable-validity-reporting",
              "type": {
                "text": "boolean"
              },
              "description": "",
              "required": false
            },
            {
              "name": "disabled",
              "type": {
                "text": "boolean"
              },
              "description": "Defines whether the field is disabled.",
              "required": false
            },
            {
              "name": "help-text",
              "type": {
                "text": "string"
              },
              "description": "Defines the help label displayed under the field.",
              "required": false
            },
            {
              "name": "label",
              "type": {
                "text": "string"
              },
              "description": "The label for this input.",
              "required": false
            },
            {
              "name": "max",
              "type": {
                "text": "number | string"
              },
              "description": "Defines the maximum allowed value.",
              "required": false
            },
            {
              "name": "maxlength",
              "type": {
                "text": "number"
              },
              "description": "Defines the maximum amount of charaters.",
              "required": false
            },
            {
              "name": "min",
              "type": {
                "text": "number | string"
              },
              "description": "Defines the minimum allowed value.",
              "required": false
            },
            {
              "name": "minlength",
              "type": {
                "text": "number"
              },
              "description": "Defines the minimum amount of charaters.",
              "required": false
            },
            {
              "name": "multiple",
              "type": {
                "text": "boolean"
              },
              "description": "If true, allows multiple emails to be entered separated by commas.",
              "required": false
            },
            {
              "name": "name",
              "type": {
                "text": "string"
              },
              "description": "The name for this input when used in forms.",
              "required": false
            },
            {
              "name": "pattern",
              "type": {
                "text": "string"
              },
              "description": "Valid for text, search, url, tel, email, and password, the pattern attribute defines a regular expression that the input's value must match in order for the value to pass constraint validation.",
              "required": false
            },
            {
              "name": "readonly",
              "type": {
                "text": "boolean"
              },
              "description": "Defines wheter the defined value is readonly.",
              "required": false
            },
            {
              "name": "required",
              "type": {
                "text": "boolean"
              },
              "description": "Defines whether the field requires having a value.",
              "required": false
            },
            {
              "name": "step",
              "type": {
                "text": "number | string"
              },
              "description": "Defines the possible steps for numbers and dates/times. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date#step",
              "required": false
            },
            {
              "name": "type",
              "type": {
                "text": "\"date\" | \"datetime-local\" | \"email\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"time\" | \"url\""
              },
              "description": "The input type, supports most of html standard input type, see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types.",
              "default": "\"text\"",
              "required": false
            },
            {
              "name": "value",
              "type": {
                "text": "number | string | string[]"
              },
              "description": "The value of the input.",
              "required": false
            }
          ],
          "members": [
            {
              "kind": "method",
              "name": "checkValidity",
              "description": "Reports the input validity details. See https://developer.mozilla.org/en-US/docs/Web/API/ValidityState",
              "signature": "checkValidity() => Promise<ValidityState>"
            },
            {
              "kind": "method",
              "name": "setCustomValidity",
              "description": "Can be used to set a custom validity message.",
              "signature": "setCustomValidity(message: string) => Promise<void>"
            }
          ],
          "events": [
            {
              "name": "valueChange",
              "type": {
                "text": "number | string | string[]"
              },
              "description": "Fires when the value has changed and the user exits the input."
            },
            {
              "name": "valueInput",
              "type": {
                "text": "number | string | string[]"
              },
              "description": "Fires when the using is inputing data (on keystrokes)."
            }
          ],
          "slots": [
            {
              "name": "prefix",
              "description": "Can be used to inject content before the input field."
            },
            {
              "name": "suffix",
              "description": "Can be used to inject content after the input field."
            }
          ],
          "cssProperties": [
            {
              "name": "--background",
              "description": "Defines the background color."
            },
            {
              "name": "--control-radius",
              "description": "Defines the radius for the control corners."
            },
            {
              "name": "--danger-color",
              "description": "Defines the danger color used for invalid data."
            },
            {
              "name": "--focus-color",
              "description": "Defines the color when the component is focused."
            },
            {
              "name": "--foreground",
              "description": "Defines the foreground color."
            },
            {
              "name": "--input-text-align",
              "description": "Allows customizing the text alignment of the input text."
            }
          ],
          "cssParts": []
        }
      ]
    },
    {
      "kind": "javascript-module",
      "path": "src/components/dnn-modal/dnn-modal.tsx",
      "declarations": [
        {
          "kind": "class",
          "name": "dnn-modal.tsx",
          "tagName": "dnn-modal",
          "description": "",
          "attributes": [
            {
              "name": "backdrop-dismiss",
              "type": {
                "text": "boolean"
              },
              "description": "Pass false to remove the backdrop click auto-dismiss feature.",
              "default": "true",
              "required": false
            },
            {
              "name": "close-text",
              "type": {
                "text": "string"
              },
              "description": "Optionally pass the aria-label text for the close button.\nDefaults to \"Close modal\" if not provided.",
              "default": "\"Close modal\"",
              "required": false
            },
            {
              "name": "resizable",
              "type": {
                "text": "boolean"
              },
              "description": "If set to true, the modal becomes resizable.",
              "default": "false",
              "required": false
            },
            {
              "name": "show-close-button",
              "type": {
                "text": "boolean"
              },
              "description": "Optionally you can pass false to not show the close button.\nIf you decide to do so, you should either not also prevent dismissal by clicking the backdrop\nor provide your own dismissal logic in the modal content.",
              "default": "true",
              "required": false
            },
            {
              "name": "visible",
              "type": {
                "text": "boolean"
              },
              "description": "Reflects the visible state of the modal.",
              "default": "false",
              "required": false
            }
          ],
          "members": [
            {
              "kind": "method",
              "name": "hide",
              "description": "Hides the modal",
              "signature": "hide() => Promise<void>"
            },
            {
              "kind": "method",
              "name": "show",
              "description": "Shows the modal",
              "signature": "show() => Promise<void>"
            }
          ],
          "events": [
            {
              "name": "dismissed",
              "type": {
                "text": "any"
              },
              "description": "Fires when the modal is dismissed."
            }
          ],
          "slots": [],
          "cssProperties": [
            {
              "name": "--max-width",
              "description": "The maximum width of the module."
            }
          ],
          "cssParts": []
        }
      ]
    },
    {
      "kind": "javascript-module",
      "path": "src/components/dnn-monaco-editor/dnn-monaco-editor.tsx",
      "declarations": [
        {
          "kind": "class",
          "name": "dnn-monaco-editor.tsx",
          "tagName": "dnn-monaco-editor",
          "description": "",
          "attributes": [
            {
              "name": "language",
              "type": {
                "text": "\"html\" | \"ruby\" | \"plaintext\" | \"bat\" | \"coffeescript\" | \"c\" | \"cpp\" | \"csharp\" | \"dockerfile\" | \"fsharp\" | \"go\" | \"handlebars\" | \"ini\" | \"pug\" | \"java\" | \"lua\" | \"markdown\" | \"msdax\" | \"objective-c\" | \"postiats\" | \"php\" | \"powershell\" | \"python\" | \"r\" | \"razor\" | \"swift\" | \"sql\" | \"vb\" | \"xml\" | \"less\" | \"scss\" | \"css\" | \"yaml\" | \"sol\" | \"sb\" | \"json\" | \"typescript\" | \"javascript\""
              },
              "description": "Defines the language for the editor.",
              "default": "\"html\"",
              "required": false
            },
            {
              "name": "name",
              "type": {
                "text": "string"
              },
              "description": "The name of the control to use for forms.",
              "required": false
            },
            {
              "name": "value",
              "type": {
                "text": "string"
              },
              "description": "Sets the code contained in the editor",
              "default": "\"\"",
              "required": false
            }
          ],
          "members": [],
          "events": [
            {
              "name": "contentChanged",
              "type": {
                "text": "string"
              },
              "description": "Emits the new value of the content when it is changed."
            }
          ],
          "slots": [],
          "cssProperties": [
            {
              "name": "--monaco-editor-height",
              "description": "height of the editor, default is 50vh"
            },
            {
              "name": "--monaco-editor-width",
              "description": "width of the editor, default is 100%"
            }
          ],
          "cssParts": []
        }
      ]
    },
    {
      "kind": "javascript-module",
      "path": "src/components/dnn-permissions-grid/dnn-permissions-grid.tsx",
      "declarations": [
        {
          "kind": "class",
          "name": "dnn-permissions-grid.tsx",
          "tagName": "dnn-permissions-grid",
          "description": "",
          "attributes": [],
          "members": [
            {
              "kind": "field",
              "name": "foundUsers",
              "type": {
                "text": "ISearchedUser[]"
              },
              "description": "The list of users to show under the search users field when a search is performed.",
              "default": "[]",
              "required": false
            },
            {
              "kind": "field",
              "name": "permissions",
              "type": {
                "text": "IPermissions"
              },
              "description": "The list of permissions.",
              "required": true
            },
            {
              "kind": "field",
              "name": "resx",
              "type": {
                "text": "ILocalization"
              },
              "description": "Optionally allows localizing the component strings.",
              "required": false
            },
            {
              "kind": "field",
              "name": "roleGroups",
              "type": {
                "text": "IRoleGroup[]"
              },
              "description": "The list of role groups.",
              "required": true
            },
            {
              "kind": "field",
              "name": "roles",
              "type": {
                "text": "IRole[]"
              },
              "description": "The list of possible roles.",
              "required": true
            }
          ],
          "events": [
            {
              "name": "permissionsChanged",
              "type": {
                "text": "IPermissions"
              },
              "description": "Fires when any permissions have changed, can be used for instance to have linked permissions."
            },
            {
              "name": "userSearchQueryChanged",
              "type": {
                "text": "string"
              },
              "description": "Fires when searching for users to add to the permissions. Emits the search query."
            }
          ],
          "slots": [],
          "cssProperties": [],
          "cssParts": []
        }
      ]
    },
    {
      "kind": "javascript-module",
      "path": "src/components/dnn-progress-bar/dnn-progress-bar.tsx",
      "declarations": [
        {
          "kind": "class",
          "name": "dnn-progress-bar.tsx",
          "tagName": "dnn-progress-bar",
          "description": "",
          "attributes": [
            {
              "name": "max",
              "type": {
                "text": "number"
              },
              "description": "Sets the max value for the progress bar.",
              "default": "100",
              "required": false
            },
            {
              "name": "use-gradient",
              "type": {
                "text": "boolean"
              },
              "description": "Determines if gradient colors will be used for progress bar.",
              "default": "false",
              "required": false
            },
            {
              "name": "value",
              "type": {
                "text": "number"
              },
              "description": "Sets to current value for the progress bar.",
              "required": false
            }
          ],
          "members": [],
          "events": [],
          "slots": [],
          "cssProperties": [
            {
              "name": "--background-color",
              "description": "The background color of the progress bar."
            },
            {
              "name": "--border-radius",
              "description": "The border radius of the progress bar."
            },
            {
              "name": "--gradient-color-end",
              "description": "The gradient end color of the progress bar."
            },
            {
              "name": "--gradient-color-start",
              "description": "The gradient start color of the progress bar."
            },
            {
              "name": "--gradient-direction",
              "description": "The gradient direction of the progress bar."
            },
            {
              "name": "--height",
              "description": "The height of the progress bar."
            },
            {
              "name": "--min-width",
              "description": "The minimum width of the progress bar."
            },
            {
              "name": "--value-background-color",
              "description": "The value background color of the progress bar."
            }
          ],
          "cssParts": []
        }
      ]
    },
    {
      "kind": "javascript-module",
      "path": "src/components/dnn-richtext/dnn-richtext.tsx",
      "declarations": [
        {
          "kind": "class",
          "name": "dnn-richtext.tsx",
          "tagName": "dnn-richtext",
          "description": "",
          "attributes": [
            {
              "name": "name",
              "type": {
                "text": "string"
              },
              "description": "Name of the field when used in a form.",
              "required": false
            },
            {
              "name": "value",
              "type": {
                "text": "string"
              },
              "description": "Sets the value of the content of the editor.",
              "required": false
            }
          ],
          "members": [
            {
              "kind": "field",
              "name": "options",
              "type": {
                "text": "Config"
              },
              "description": "Optional configuration for Jodit, see https://xdsoft.net/jodit/docs/classes/config.Config.html",
              "required": false
            }
          ],
          "events": [
            {
              "name": "valueChange",
              "type": {
                "text": "string"
              },
              "description": "Fires when the value changed."
            },
            {
              "name": "valueInput",
              "type": {
                "text": "string"
              },
              "description": "Fires during value input."
            }
          ],
          "slots": [],
          "cssProperties": [],
          "cssParts": []
        }
      ]
    },
    {
      "kind": "javascript-module",
      "path": "src/components/dnn-searchbox/dnn-searchbox.tsx",
      "declarations": [
        {
          "kind": "class",
          "name": "dnn-searchbox.tsx",
          "tagName": "dnn-searchbox",
          "description": "",
          "attributes": [
            {
              "name": "debounced",
              "type": {
                "text": "boolean"
              },
              "description": "Debounces the queryChanged by 500ms.",
              "default": "true",
              "required": false
            },
            {
              "name": "placeholder",
              "type": {
                "text": "string"
              },
              "description": "Sets the field placeholder text.",
              "default": "\"\"",
              "required": false
            },
            {
              "name": "query",
              "type": {
                "text": "string"
              },
              "description": "Sets the query",
              "default": "\"\"",
              "required": false
            }
          ],
          "members": [],
          "events": [
            {
              "name": "queryChanged",
              "type": {
                "text": "string"
              },
              "description": "Fires up each time the search query changes.\nThe data passed is the new query."
            }
          ],
          "slots": [],
          "cssProperties": [],
          "cssParts": []
        }
      ]
    },
    {
      "kind": "javascript-module",
      "path": "src/components/dnn-select/dnn-select.tsx",
      "declarations": [
        {
          "kind": "class",
          "name": "dnn-select.tsx",
          "tagName": "dnn-select",
          "description": "",
          "attributes": [
            {
              "name": "disable-validity-reporting",
              "type": {
                "text": "boolean"
              },
              "description": "",
              "required": false
            },
            {
              "name": "disabled",
              "type": {
                "text": "boolean"
              },
              "description": "Defines whether the field is disabled.",
              "required": false
            },
            {
              "name": "help-text",
              "type": {
                "text": "string"
              },
              "description": "Defines the help label displayed under the field.",
              "required": false
            },
            {
              "name": "label",
              "type": {
                "text": "string"
              },
              "description": "The label for this input.",
              "required": false
            },
            {
              "name": "name",
              "type": {
                "text": "string"
              },
              "description": "The name for this input, if used in forms.",
              "required": false
            },
            {
              "name": "required",
              "type": {
                "text": "boolean"
              },
              "description": "Defines whether the field requires having a value.",
              "required": false
            },
            {
              "name": "value",
              "type": {
                "text": "string"
              },
              "description": "The value of the input.",
              "required": false
            }
          ],
          "members": [
            {
              "kind": "method",
              "name": "reportValidity",
              "description": "Reports the element validity.",
              "signature": "reportValidity(valid: boolean, message?: string) => Promise<void>"
            }
          ],
          "events": [
            {
              "name": "valueChange",
              "type": {
                "text": "string"
              },
              "description": "Fires when the value has changed and the user exits the input."
            }
          ],
          "slots": [],
          "cssProperties": [
            {
              "name": "--background",
              "description": "Defines the background color."
            },
            {
              "name": "--control-radius",
              "description": "Defines the radius for the control corners."
            },
            {
              "name": "--danger-color",
              "description": "Defines the danger color used for invalid data."
            },
            {
              "name": "--focus-color",
              "description": "Defines the color when the component is focused."
            },
            {
              "name": "--foreground",
              "description": "Defines the foreground color."
            },
            {
              "name": "--input-text-align",
              "description": "Allows customizing the text alignment of the input text."
            }
          ],
          "cssParts": []
        }
      ]
    },
    {
      "kind": "javascript-module",
      "path": "src/components/dnn-sort-icon/dnn-sort-icon.tsx",
      "declarations": [
        {
          "kind": "class",
          "name": "dnn-sort-icon.tsx",
          "tagName": "dnn-sort-icon",
          "description": "",
          "attributes": [
            {
              "name": "sort-direction",
              "type": {
                "text": "\"asc\" | \"desc\" | \"none\""
              },
              "description": "Defines the current sort direction",
              "default": "\"none\"",
              "required": false
            }
          ],
          "members": [],
          "events": [
            {
              "name": "sortChanged",
              "type": {
                "text": "\"asc\" | \"desc\" | \"none\""
              },
              "description": "Emitted when the sort is changed."
            }
          ],
          "slots": [],
          "cssProperties": [
            {
              "name": "--color",
              "description": "Normal Color of the inactive sort icon."
            },
            {
              "name": "--color-hover",
              "description": "Color of the icons when hovered."
            },
            {
              "name": "--color-sorted",
              "description": "Color of the sorted sort icon."
            }
          ],
          "cssParts": []
        }
      ]
    },
    {
      "kind": "javascript-module",
      "path": "src/components/dnn-tab/dnn-tab.tsx",
      "declarations": [
        {
          "kind": "class",
          "name": "dnn-tab.tsx",
          "tagName": "dnn-tab",
          "description": "Represents a single tab and must be used inside a dnn-tabs element.",
          "attributes": [
            {
              "name": "tab-title",
              "type": {
                "text": "string"
              },
              "description": "Defines the tab title.",
              "required": true
            }
          ],
          "members": [
            {
              "kind": "method",
              "name": "hide",
              "description": "Hides the modal",
              "signature": "hide() => Promise<void>"
            },
            {
              "kind": "method",
              "name": "show",
              "description": "Shows the tab.",
              "signature": "show() => Promise<void>"
            }
          ],
          "events": [],
          "slots": [],
          "cssProperties": [],
          "cssParts": []
        }
      ]
    },
    {
      "kind": "javascript-module",
      "path": "src/components/dnn-tabs/dnn-tabs.tsx",
      "declarations": [
        {
          "kind": "class",
          "name": "dnn-tabs.tsx",
          "tagName": "dnn-tabs",
          "description": "`dnn-tabs` is a container for `dnn-tab` and should only contain `dnn-tab` elements for its content.",
          "attributes": [],
          "members": [],
          "events": [],
          "slots": [],
          "cssProperties": [
            {
              "name": "--color-background",
              "description": "The color of the inactive tabs."
            },
            {
              "name": "--color-focus",
              "description": "outline color when hovering or pre-selecting a tab."
            },
            {
              "name": "--color-text",
              "description": "The color of the text for inactive tabs."
            },
            {
              "name": "--color-visible",
              "description": "The color of the active tab."
            },
            {
              "name": "--color-visible-text",
              "description": "The color of the text for the active tab."
            }
          ],
          "cssParts": []
        }
      ]
    },
    {
      "kind": "javascript-module",
      "path": "src/components/dnn-textarea/dnn-textarea.tsx",
      "declarations": [
        {
          "kind": "class",
          "name": "dnn-textarea.tsx",
          "tagName": "dnn-textarea",
          "description": "A custom textarea component.",
          "attributes": [
            {
              "name": "autocomplete",
              "type": {
                "text": "string"
              },
              "description": "Defines the type of auto-completion to use for this field, see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete.",
              "default": "\"off\"",
              "required": false
            },
            {
              "name": "disabled",
              "type": {
                "text": "boolean"
              },
              "description": "Defines whether the field is disabled.",
              "required": false
            },
            {
              "name": "help-text",
              "type": {
                "text": "string"
              },
              "description": "Defines the help label displayed under the field.",
              "required": false
            },
            {
              "name": "label",
              "type": {
                "text": "string"
              },
              "description": "The label for this input.",
              "required": false
            },
            {
              "name": "maxlength",
              "type": {
                "text": "number"
              },
              "description": "Defines the maximum amount of charaters.",
              "required": false
            },
            {
              "name": "minlength",
              "type": {
                "text": "number"
              },
              "description": "Defines the minimum amount of charaters.",
              "required": false
            },
            {
              "name": "name",
              "type": {
                "text": "string"
              },
              "description": "The name for this input when used in forms.",
              "required": false
            },
            {
              "name": "readonly",
              "type": {
                "text": "boolean"
              },
              "description": "Defines wheter the defined value is readonly.",
              "required": false
            },
            {
              "name": "required",
              "type": {
                "text": "boolean"
              },
              "description": "Defines whether the field requires having a value.",
              "required": false
            },
            {
              "name": "resizable",
              "type": {
                "text": "\"block\" | \"both\" | \"horizontal\" | \"inline\" | \"none\" | \"vertical\""
              },
              "description": "Can be set to change how the user can resize the field.",
              "default": "\"block\"",
              "required": false
            },
            {
              "name": "value",
              "type": {
                "text": "string"
              },
              "description": "Sets the value of the textarea.",
              "required": false
            }
          ],
          "members": [
            {
              "kind": "method",
              "name": "checkValidity",
              "description": "Reports the input validity details. See https://developer.mozilla.org/en-US/docs/Web/API/ValidityState",
              "signature": "checkValidity() => Promise<ValidityState>"
            },
            {
              "kind": "method",
              "name": "setCustomValidity",
              "description": "Can be used to set a custom validity message.",
              "signature": "setCustomValidity(message: string) => Promise<void>"
            }
          ],
          "events": [
            {
              "name": "valueChange",
              "type": {
                "text": "string"
              },
              "description": "Fires when the value has changed and the user exits the input."
            },
            {
              "name": "valueInput",
              "type": {
                "text": "string"
              },
              "description": "Fires when the using is inputing data (on keystrokes)."
            }
          ],
          "slots": [],
          "cssProperties": [
            {
              "name": "--background",
              "description": "Defines the background color."
            },
            {
              "name": "--control-radius",
              "description": "Defines the radius for the control corners."
            },
            {
              "name": "--danger-color",
              "description": "Defines the danger color used for invalid data."
            },
            {
              "name": "--focus-color",
              "description": "Defines the color when the component is focused."
            },
            {
              "name": "--foreground",
              "description": "Defines the foreground color."
            }
          ],
          "cssParts": []
        }
      ]
    },
    {
      "kind": "javascript-module",
      "path": "src/components/dnn-toggle/dnn-toggle.tsx",
      "declarations": [
        {
          "kind": "class",
          "name": "dnn-toggle.tsx",
          "tagName": "dnn-toggle",
          "description": "",
          "attributes": [
            {
              "name": "checked",
              "type": {
                "text": "boolean"
              },
              "description": "If 'true' the toggle is checked (on).",
              "default": "false",
              "required": false
            },
            {
              "name": "disabled",
              "type": {
                "text": "boolean"
              },
              "description": "If 'true' the toggle is not be interacted with.",
              "default": "false",
              "required": false
            },
            {
              "name": "name",
              "type": {
                "text": "string"
              },
              "description": "The field name to use in forms.",
              "required": false
            },
            {
              "name": "value",
              "type": {
                "text": "string"
              },
              "description": "The value to post when used in forms.",
              "default": "\"on\"",
              "required": false
            }
          ],
          "members": [],
          "events": [
            {
              "name": "checkChanged",
              "type": {
                "text": "DnnToggleChangeEventDetail"
              },
              "description": "Fires when the toggle changed"
            }
          ],
          "slots": [],
          "cssProperties": [
            {
              "name": "--background",
              "description": "Background of the toggle."
            },
            {
              "name": "--background-checked",
              "description": "Background of the toggle when checked."
            },
            {
              "name": "--border-radius",
              "description": "The radius of the background borders."
            },
            {
              "name": "--handle-background",
              "description": "Background of the handle."
            },
            {
              "name": "--handle-background-checked",
              "description": "Background of the handle when checked."
            },
            {
              "name": "--handle-border-radius",
              "description": "The radius of the handle."
            }
          ],
          "cssParts": []
        }
      ]
    },
    {
      "kind": "javascript-module",
      "path": "src/components/dnn-treeview-item/dnn-treeview-item.tsx",
      "declarations": [
        {
          "kind": "class",
          "name": "dnn-treeview-item.tsx",
          "tagName": "dnn-treeview-item",
          "description": "",
          "attributes": [
            {
              "name": "expanded",
              "type": {
                "text": "boolean"
              },
              "description": "Defines if the current node is expanded.",
              "default": "false",
              "required": false
            }
          ],
          "members": [],
          "events": [
            {
              "name": "userCollapsed",
              "type": {
                "text": "void"
              },
              "description": "Fires when the user collapses a node."
            },
            {
              "name": "userExpanded",
              "type": {
                "text": "void"
              },
              "description": "Fires when the user expands a node."
            }
          ],
          "slots": [
            {
              "name": " ",
              "description": "The content of this node."
            },
            {
              "name": "children",
              "description": "The content nested under this node."
            }
          ],
          "cssProperties": [],
          "cssParts": []
        }
      ]
    },
    {
      "kind": "javascript-module",
      "path": "src/components/dnn-vertical-overflow-menu/dnn-vertical-overflow-menu.tsx",
      "declarations": [
        {
          "kind": "class",
          "name": "dnn-vertical-overflow-menu.tsx",
          "tagName": "dnn-vertical-overflow-menu",
          "description": "A component that shows a vertical list of items as they fit. When they don't all fit, it puts the ones that don't fit into a dropdown menu.",
          "attributes": [],
          "members": [],
          "events": [],
          "slots": [
            {
              "name": "()",
              "description": "The items to show in the menu."
            }
          ],
          "cssProperties": [
            {
              "name": "--background-color",
              "description": "Defines the menu background color."
            },
            {
              "name": "--foreground-color",
              "description": "A color that contrasts with the background color."
            }
          ],
          "cssParts": []
        }
      ]
    },
    {
      "kind": "javascript-module",
      "path": "src/components/dnn-vertical-splitview/dnn-vertical-splitview.tsx",
      "declarations": [
        {
          "kind": "class",
          "name": "dnn-vertical-splitview.tsx",
          "tagName": "dnn-vertical-splitview",
          "description": "This allows splitting a UI into vertical adjustable panels, the splitter itself is not part of this component.\n- The content for the left part should be injected in the `left` slot.\n- The content for the right part should be injected in the `right` slot.\n- The content for the actual splitter should go in the default slot and other UI elements can be injected as long as you handle their behaviour, by default only the drag behavior is implemented in the component.",
          "attributes": [
            {
              "name": "split-width-percentage",
              "type": {
                "text": "number"
              },
              "description": "The percentage position of the splitter in the container.",
              "default": "30",
              "required": false
            },
            {
              "name": "splitter-width",
              "type": {
                "text": "number"
              },
              "description": "The width of the splitter area.",
              "default": "16",
              "required": false
            }
          ],
          "members": [
            {
              "kind": "method",
              "name": "getSplitWidthPercentage",
              "description": "Gets the current divider position percentage.",
              "signature": "getSplitWidthPercentage() => Promise<number>"
            },
            {
              "kind": "method",
              "name": "setSplitWidthPercentage",
              "description": "Sets the width percentage of the divider",
              "signature": "setSplitWidthPercentage(newWidth: number) => Promise<void>"
            }
          ],
          "events": [
            {
              "name": "widthChanged",
              "type": {
                "text": "number"
              },
              "description": "Fires when the width of the divider changes."
            }
          ],
          "slots": [
            {
              "name": "default",
              "description": "The split divider control you want to use."
            },
            {
              "name": "left",
              "description": "The content of the left pane."
            },
            {
              "name": "right",
              "description": "The content of the right pane."
            }
          ],
          "cssProperties": [
            {
              "name": "--left-pane-background-color",
              "description": "Allows customizing the left pane background-color"
            },
            {
              "name": "--right-pane-background-color",
              "description": "Allows customizing the right pane background-color"
            }
          ],
          "cssParts": []
        }
      ]
    }
  ]
}