@limetech/lime-elements 37.2.0-next.2 → 37.2.0-next.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +8 -0
- package/dist/cjs/limel-form.cjs.entry.js.map +1 -1
- package/dist/cjs/limel-help.cjs.entry.js.map +1 -1
- package/dist/collection/components/action-bar/action-bar-item/action-bar-overflow-menu.js +1 -1
- package/dist/collection/components/form/form.types.js.map +1 -1
- package/dist/collection/components/form/widgets/input-field.js.map +1 -1
- package/dist/collection/components/help/help.js +16 -4
- package/dist/collection/components/help/help.js.map +1 -1
- package/dist/collection/components/help/help.types.js +2 -0
- package/dist/collection/components/help/help.types.js.map +1 -0
- package/dist/collection/components/menu/menu.js +2 -2
- package/dist/collection/components/menu-list/menu-list.js +1 -1
- package/dist/collection/components/split-button/split-button.js +1 -1
- package/dist/esm/limel-form.entry.js.map +1 -1
- package/dist/esm/limel-help.entry.js.map +1 -1
- package/dist/lime-elements/p-1ca94bcf.entry.js.map +1 -1
- package/dist/lime-elements/p-8289f3f5.entry.js.map +1 -1
- package/dist/types/components/form/form.types.d.ts +2 -2
- package/dist/types/components/help/help.d.ts +6 -13
- package/dist/types/components/help/help.types.d.ts +28 -0
- package/dist/types/components.d.ts +8 -0
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"limel-help.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,OAAO,GAAG,qmCAAqmC;;
|
|
1
|
+
{"file":"limel-help.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,OAAO,GAAG,qmCAAqmC;;MC+BxmC,IAAI;;;IAoDL,gBAAW,GAAG,CAAC,KAAiB;MACpC,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;KACtB,CAAC;IAEM,mBAAc,GAAG,CAAC,KAAkB;MACxC,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;KACvB,CAAC;;mBAjDuB,GAAG;;yBAYU,WAAW;kBAGhC,KAAK;;EAEf,MAAM;IACT,OAAO;MACHA,2BACI,IAAI,EAAE,IAAI,CAAC,MAAM,EACjB,OAAO,EAAE,IAAI,CAAC,cAAc,EAC5B,aAAa,EAAE,IAAI,CAAC,aAAa,IAEjCA,oBACI,IAAI,EAAC,SAAS,EACd,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,KAAK,EAAE;UACH,SAAS,EAAE,IAAI,CAAC,MAAM;SACzB,IAEA,IAAI,CAAC,OAAO,CACR,EACTA,gCACI,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,YAAY,EAAE,IAAI,CAAC,YAAY,GACjC,CACU;KACnB,CAAC;GACL;;;;;;","names":["h"],"sources":["./src/components/help/help.scss?tag=limel-help&encapsulation=shadow","./src/components/help/help.tsx"],"sourcesContent":["@use '../../style/mixins';\n\nlimel-popover {\n display: flex;\n --popover-surface-width: min(calc(100vw - 4rem), 22rem);\n}\n\nbutton[slot='trigger'] {\n all: unset;\n\n @include mixins.is-flat-clickable(\n $color--hovered: rgb(var(--color-sky-dark)),\n $background-color: var(--lime-elevated-surface-background-color)\n );\n @include mixins.visualize-keyboard-focus;\n\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n color: rgb(var(--color-sky-default));\n border-radius: 50%;\n box-shadow: 0 0 0 1px rgb(var(--color-sky-lighter), 0.7);\n width: 0.875rem;\n height: 0.875rem;\n font-size: 0.75rem;\n\n &.is-open {\n color: rgb(var(--color-white));\n background-color: rgb(var(--color-sky-default));\n box-shadow: var(--button-shadow-inset);\n }\n}\n","import { Component, h, Prop, State } from '@stencil/core';\nimport { OpenDirection } from '../menu/menu.types';\nimport { Link } from '../../interface';\nimport { Help as HelpInterface } from './help.types';\n\n/**\n * A good design is self-explanatory! However, sometimes concepts are\n * too complex to understand, no matter how well-designed a user interface is.\n * In such cases, contextual help can be a great way to provide users with\n * help precisely where and when users need it.\n *\n * In app interface design, providing contextual help emerges as a viable practice\n * for enhancing user experience and usability.\n * Contextual help serves as a quick-to-access guiding,\n * empowering users to more easily understand and navigate through\n * the intricacies of an application.\n *\n * Using this component designers empower users to grasp the functionality\n * of an app more effortlessly, minimizes the learning curve,\n * transforming complex features into accessible opportunities for exploration.\n *\n * @exampleComponent limel-example-help\n * @exampleComponent limel-example-read-more\n * @exampleComponent limel-example-open-direction\n * @exampleComponent limel-example-placement\n */\n@Component({\n tag: 'limel-help',\n shadow: true,\n styleUrl: 'help.scss',\n})\nexport class Help implements HelpInterface {\n /**\n * @inheritdoc\n */\n @Prop()\n public value: string;\n\n /**\n * @inheritdoc\n */\n @Prop()\n public trigger: string = '?';\n\n /**\n * @inheritdoc\n */\n @Prop()\n public readMoreLink?: Link;\n\n /**\n * @inheritdoc\n */\n @Prop({ reflect: true })\n public openDirection: OpenDirection = 'top-start';\n\n @State()\n private isOpen = false;\n\n public render() {\n return [\n <limel-popover\n open={this.isOpen}\n onClose={this.onPopoverClose}\n openDirection={this.openDirection}\n >\n <button\n slot=\"trigger\"\n onClick={this.openPopover}\n class={{\n 'is-open': this.isOpen,\n }}\n >\n {this.trigger}\n </button>\n <limel-help-content\n value={this.value}\n readMoreLink={this.readMoreLink}\n />\n </limel-popover>,\n ];\n }\n\n private openPopover = (event: MouseEvent) => {\n event.stopPropagation();\n this.isOpen = true;\n };\n\n private onPopoverClose = (event: CustomEvent) => {\n event.stopPropagation();\n this.isOpen = false;\n };\n}\n"],"version":3}
|
|
@@ -33,7 +33,7 @@ export class ActionBarOverflowMenu {
|
|
|
33
33
|
"mutable": false,
|
|
34
34
|
"complexType": {
|
|
35
35
|
"original": "Array<MenuItem | ListSeparator>",
|
|
36
|
-
"resolved": "(MenuItem<any>
|
|
36
|
+
"resolved": "(ListSeparator | MenuItem<any>)[]",
|
|
37
37
|
"references": {
|
|
38
38
|
"Array": {
|
|
39
39
|
"location": "global"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"form.types.js","sourceRoot":"","sources":["../../../src/components/form/form.types.ts"],"names":[],"mappings":"AAyOA,MAAM,CAAN,IAAY,cAmBX;AAnBD,WAAY,cAAc;EACtB;;KAEG;EACH,qCAAmB,CAAA;EAEnB;;KAEG;EACH,+BAAa,CAAA;EAEb;;;;;;KAMG;EACH,6BAAW,CAAA;AACf,CAAC,EAnBW,cAAc,KAAd,cAAc,QAmBzB","sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"form.types.js","sourceRoot":"","sources":["../../../src/components/form/form.types.ts"],"names":[],"mappings":"AAyOA,MAAM,CAAN,IAAY,cAmBX;AAnBD,WAAY,cAAc;EACtB;;KAEG;EACH,qCAAmB,CAAA;EAEnB;;KAEG;EACH,+BAAa,CAAA;EAEb;;;;;;KAMG;EACH,6BAAW,CAAA;AACf,CAAC,EAnBW,cAAc,KAAd,cAAc,QAmBzB","sourcesContent":["import { Help } from '../help/help.types';\nimport { EventEmitter } from '@stencil/core';\n\nexport interface ValidationStatus {\n /**\n * True if the form is valid, false otherwise\n *\n * If the form is invalid, any errors can be found on the `errors` property\n */\n valid: boolean;\n\n /**\n * List of validation errors\n */\n errors?: FormError[];\n}\n\nexport interface FormError {\n /**\n * Name of the error\n */\n name: string;\n\n /**\n * Params of the error\n */\n params?: unknown;\n\n /**\n * Name of the invalid property\n */\n property: string;\n\n /**\n * Path to the property within the schema\n */\n schemaPath: string;\n\n /**\n * String describing the error\n */\n message: string;\n}\n\nexport type ValidationError = {\n /**\n * Name of the field the error belongs to\n */\n [key: string]: string[] | ValidationError;\n};\n\nexport interface FormComponent<T = any> {\n /**\n * The value of the current property\n */\n value: T;\n\n /**\n * Whether or not the current property is required\n */\n required?: boolean;\n\n /**\n * Whether or not the current property is readonly\n */\n readonly?: boolean;\n\n /**\n * Whether or not the current property is disabled\n */\n disabled?: boolean;\n\n /**\n * The label of the current property\n */\n label?: string;\n\n /**\n * The helper text for the current property\n */\n helperText?: string;\n\n /**\n * Additional contextual information about the form\n */\n formInfo?: FormInfo;\n\n /**\n * The event to emit when the value of the current property has changed\n */\n change: EventEmitter<T>;\n}\n\nexport interface FormInfo {\n /**\n * The schema of the current property\n */\n schema?: object;\n\n /**\n * The schema of the whole form\n */\n rootSchema?: object;\n\n /**\n * A tree of errors for this property and its children\n */\n errorSchema?: object;\n\n /**\n * The value of the whole form\n */\n rootValue?: any;\n\n /**\n * The name of the current property\n */\n name?: string;\n\n /**\n * Path to the property within the schema\n */\n schemaPath?: string[];\n}\n\n/**\n * Lime elements specific options that can be specified under the `lime` key in\n * a schema, e.g.\n *\n * ```ts\n * const schema = {\n * type: 'object',\n * lime: {\n * collapsible: true,\n * },\n * };\n * ```\n */\nexport interface LimeSchemaOptions {\n /**\n * When specified on an object it will render all sub components inside a\n * collapsible section\n */\n collapsible?: boolean;\n\n /**\n * When `collapsible` is `true`, set this to `false` to make the\n * collapsible section load in the open state.\n * Defaults to `true`.\n */\n collapsed?: boolean;\n\n /**\n * Will render the field using the specified component. The component\n * should implement the `FormComponent` interface\n */\n component?: FormComponentOptions;\n\n /**\n * When specified on an object it will render the sub components with the\n * specified layout\n */\n layout?: FormLayoutOptions<any>;\n\n /**\n * Mark the field as disabled\n */\n disabled?: boolean;\n\n help?: string | Help;\n}\n\n/**\n * Options for a component to be rendered inside a form\n */\nexport interface FormComponentOptions {\n /**\n * Name of the component\n */\n name?: string;\n\n /**\n * Extra properties to give the component in addition to the properties\n * specified on the `FormComponent` interface\n */\n props?: Record<string, any>;\n}\n\nexport interface FormLayoutOptions<T = FormLayoutType.Default> {\n /**\n * The type of layout to use\n */\n type: T;\n}\n\nexport interface GridLayoutOptions\n extends FormLayoutOptions<FormLayoutType.Grid> {\n /**\n * When specified on a component within the grid, the component will take\n * up the the specified number of columns in the form\n */\n // eslint-disable-next-line no-magic-numbers\n colSpan?: 1 | 2 | 3 | 4 | 5 | 'all';\n\n /**\n * When specified on a component within the grid, the component will take\n * up the the specified number of rows in the form\n */\n rowSpan?: number;\n\n /**\n * Number of columns to use in the layout\n */\n // eslint-disable-next-line no-magic-numbers\n columns?: 1 | 2 | 3 | 4 | 5;\n\n /**\n * Attempts to fill in holes earlier in the grid, if smaller items come up\n * later. This may cause items to appear out-of-order, when doing so would\n * fill holes left by larger items. Defaults to `true`.\n */\n dense?: boolean;\n}\n\nexport interface RowLayoutOptions\n extends FormLayoutOptions<FormLayoutType.Row> {\n /**\n * When specified on a field, the chosen icon will be displayed\n * on the left side of the row, beside the title.\n */\n icon?: string;\n}\n\nexport enum FormLayoutType {\n /**\n * The default layout\n */\n Default = 'default',\n\n /**\n * Render the form fields using a responsive grid layout\n */\n Grid = 'grid',\n\n /**\n * Render the form fields in full-width rows.\n * Each row can have a leading `icon`, and a field.\n * `title` and `description` provided by the schema will be placed\n * on the row itself, and not on the field.\n * This layout is good for creating UIs for user settings pages.\n */\n Row = 'row',\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input-field.js","sourceRoot":"","sources":["../../../../src/components/form/widgets/input-field.ts"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { InputType } from '
|
|
1
|
+
{"version":3,"file":"input-field.js","sourceRoot":"","sources":["../../../../src/components/form/widgets/input-field.ts"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { InputType } from '../../input-field/input-field.types';\nimport { isIntegerType, isNumberType } from '../schema';\nimport { WidgetProps } from './types';\nimport { LimeElementsWidgetAdapter } from '../adapters';\nimport { Slider } from './slider';\n\nexport class InputField extends React.Component {\n constructor(public props: WidgetProps) {\n super(props);\n this.handleChange = this.handleChange.bind(this);\n }\n\n public render() {\n const props: WidgetProps = this.props;\n\n if (isRange(props.schema)) {\n return React.createElement(Slider, props);\n }\n\n const type: InputType = getInputType(props.schema);\n const step: number | 'any' = getStepSize(props.schema);\n const additionalProps = getAdditionalProps(props.schema);\n\n return React.createElement(LimeElementsWidgetAdapter, {\n name: 'limel-input-field',\n value: props.value,\n events: {\n change: this.handleChange,\n },\n widgetProps: props,\n extraProps: {\n step: step,\n type: type,\n ...additionalProps,\n },\n });\n }\n\n private handleChange(event: CustomEvent<string>) {\n event.stopPropagation();\n const props = this.props;\n const type = getInputType(props.schema);\n\n if (!props.onChange) {\n return;\n }\n\n let value: string;\n if (event.detail || typeof event.detail === 'number') {\n value = event.detail;\n } else if (type === 'number') {\n value = null;\n } else {\n value = props.required ? null : '';\n }\n\n props.onChange(value);\n }\n}\n\nfunction getInputType(schema: any): InputType {\n if (isNumberType(schema) || isIntegerType(schema)) {\n return 'number';\n }\n\n if (schema.format === 'email') {\n return 'email';\n }\n\n return 'text';\n}\n\nfunction getStepSize(schema: any): 'any' | number {\n if (isNumberType(schema) && schema.multipleOf) {\n return parseFloat(schema.multipleOf) || 'any';\n }\n\n if (isIntegerType(schema)) {\n return parseInt(schema.multipleOf, 10) || 1;\n }\n\n return 'any';\n}\n\nfunction getAdditionalProps(schema: any) {\n let props: any = {};\n\n if (schema.minimum) {\n props.min = schema.minimum;\n }\n\n if (schema.maximum) {\n props.max = schema.maximum;\n }\n\n if (schema.maxLength) {\n props.maxlength = schema.maxLength;\n }\n\n if (schema.minLength) {\n props.minlength = schema.minLength;\n }\n\n if (schema.lime?.component?.props) {\n props = {\n ...props,\n ...schema.lime.component.props,\n };\n }\n\n return props;\n}\n\nfunction isRange(schema: any): boolean {\n if (!isNumberType(schema) && !isIntegerType(schema)) {\n return false;\n }\n\n return 'minimum' in schema && 'maximum' in schema && 'multipleOf' in schema;\n}\n"]}
|
|
@@ -68,7 +68,10 @@ export class Help {
|
|
|
68
68
|
"required": false,
|
|
69
69
|
"optional": false,
|
|
70
70
|
"docs": {
|
|
71
|
-
"tags": [
|
|
71
|
+
"tags": [{
|
|
72
|
+
"name": "inheritdoc",
|
|
73
|
+
"text": undefined
|
|
74
|
+
}],
|
|
72
75
|
"text": "The markdown content that will be displayed in the popover."
|
|
73
76
|
},
|
|
74
77
|
"attribute": "value",
|
|
@@ -85,7 +88,10 @@ export class Help {
|
|
|
85
88
|
"required": false,
|
|
86
89
|
"optional": false,
|
|
87
90
|
"docs": {
|
|
88
|
-
"tags": [
|
|
91
|
+
"tags": [{
|
|
92
|
+
"name": "inheritdoc",
|
|
93
|
+
"text": undefined
|
|
94
|
+
}],
|
|
89
95
|
"text": "Visualizes the trigger element. Defaults to: **?**\n:::important\nBe consistent across the product if you want to change it to a custom character.\nAll instances of the help component should have the same trigger visualization.\n:::"
|
|
90
96
|
},
|
|
91
97
|
"attribute": "trigger",
|
|
@@ -108,7 +114,10 @@ export class Help {
|
|
|
108
114
|
"required": false,
|
|
109
115
|
"optional": true,
|
|
110
116
|
"docs": {
|
|
111
|
-
"tags": [
|
|
117
|
+
"tags": [{
|
|
118
|
+
"name": "inheritdoc",
|
|
119
|
+
"text": undefined
|
|
120
|
+
}],
|
|
112
121
|
"text": "If supplied, it will render a \"Read more\" link at the bottom of the content.\nEven though you can add a link anywhere in the content, it is recommended to\nuse the read more link. Because it will always be displayed at the bottom\nof the popover after the content, does not scroll away with the content,\nand it will be styled in a consistent way."
|
|
113
122
|
}
|
|
114
123
|
},
|
|
@@ -128,7 +137,10 @@ export class Help {
|
|
|
128
137
|
"required": false,
|
|
129
138
|
"optional": false,
|
|
130
139
|
"docs": {
|
|
131
|
-
"tags": [
|
|
140
|
+
"tags": [{
|
|
141
|
+
"name": "inheritdoc",
|
|
142
|
+
"text": undefined
|
|
143
|
+
}],
|
|
132
144
|
"text": "Decides the popover's location in relation to the trigger."
|
|
133
145
|
},
|
|
134
146
|
"attribute": "open-direction",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"help.js","sourceRoot":"","sources":["../../../src/components/help/help.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"help.js","sourceRoot":"","sources":["../../../src/components/help/help.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAK1D;;;;;;;;;;;;;;;;;;;;GAoBG;AAMH,MAAM,OAAO,IAAI;;IAoDL,gBAAW,GAAG,CAAC,KAAiB,EAAE,EAAE;MACxC,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;IACvB,CAAC,CAAC;IAEM,mBAAc,GAAG,CAAC,KAAkB,EAAE,EAAE;MAC5C,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;IACxB,CAAC,CAAC;;mBAjDuB,GAAG;;yBAYU,WAAW;kBAGhC,KAAK;;EAEf,MAAM;IACT,OAAO;MACH,qBACI,IAAI,EAAE,IAAI,CAAC,MAAM,EACjB,OAAO,EAAE,IAAI,CAAC,cAAc,EAC5B,aAAa,EAAE,IAAI,CAAC,aAAa;QAEjC,cACI,IAAI,EAAC,SAAS,EACd,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,KAAK,EAAE;YACH,SAAS,EAAE,IAAI,CAAC,MAAM;WACzB,IAEA,IAAI,CAAC,OAAO,CACR;QACT,0BACI,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,YAAY,EAAE,IAAI,CAAC,YAAY,GACjC,CACU;KACnB,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAWJ","sourcesContent":["import { Component, h, Prop, State } from '@stencil/core';\nimport { OpenDirection } from '../menu/menu.types';\nimport { Link } from '../../interface';\nimport { Help as HelpInterface } from './help.types';\n\n/**\n * A good design is self-explanatory! However, sometimes concepts are\n * too complex to understand, no matter how well-designed a user interface is.\n * In such cases, contextual help can be a great way to provide users with\n * help precisely where and when users need it.\n *\n * In app interface design, providing contextual help emerges as a viable practice\n * for enhancing user experience and usability.\n * Contextual help serves as a quick-to-access guiding,\n * empowering users to more easily understand and navigate through\n * the intricacies of an application.\n *\n * Using this component designers empower users to grasp the functionality\n * of an app more effortlessly, minimizes the learning curve,\n * transforming complex features into accessible opportunities for exploration.\n *\n * @exampleComponent limel-example-help\n * @exampleComponent limel-example-read-more\n * @exampleComponent limel-example-open-direction\n * @exampleComponent limel-example-placement\n */\n@Component({\n tag: 'limel-help',\n shadow: true,\n styleUrl: 'help.scss',\n})\nexport class Help implements HelpInterface {\n /**\n * @inheritdoc\n */\n @Prop()\n public value: string;\n\n /**\n * @inheritdoc\n */\n @Prop()\n public trigger: string = '?';\n\n /**\n * @inheritdoc\n */\n @Prop()\n public readMoreLink?: Link;\n\n /**\n * @inheritdoc\n */\n @Prop({ reflect: true })\n public openDirection: OpenDirection = 'top-start';\n\n @State()\n private isOpen = false;\n\n public render() {\n return [\n <limel-popover\n open={this.isOpen}\n onClose={this.onPopoverClose}\n openDirection={this.openDirection}\n >\n <button\n slot=\"trigger\"\n onClick={this.openPopover}\n class={{\n 'is-open': this.isOpen,\n }}\n >\n {this.trigger}\n </button>\n <limel-help-content\n value={this.value}\n readMoreLink={this.readMoreLink}\n />\n </limel-popover>,\n ];\n }\n\n private openPopover = (event: MouseEvent) => {\n event.stopPropagation();\n this.isOpen = true;\n };\n\n private onPopoverClose = (event: CustomEvent) => {\n event.stopPropagation();\n this.isOpen = false;\n };\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"help.types.js","sourceRoot":"","sources":["../../../src/components/help/help.types.ts"],"names":[],"mappings":"","sourcesContent":["import { OpenDirection } from '../menu/menu.types';\nimport { Link } from '../../interface';\n\nexport interface Help {\n /**\n * Decides the popover's location in relation to the trigger.\n */\n openDirection: OpenDirection;\n\n /**\n * If supplied, it will render a \"Read more\" link at the bottom of the content.\n * Even though you can add a link anywhere in the content, it is recommended to\n * use the read more link. Because it will always be displayed at the bottom\n * of the popover after the content, does not scroll away with the content,\n * and it will be styled in a consistent way.\n */\n readMoreLink?: Link;\n\n /**\n * Visualizes the trigger element. Defaults to: **?**\n * :::important\n * Be consistent across the product if you want to change it to a custom character.\n * All instances of the help component should have the same trigger visualization.\n * :::\n */\n trigger: string;\n\n /**\n * The markdown content that will be displayed in the popover.\n */\n value: string;\n}\n"]}
|
|
@@ -450,7 +450,7 @@ export class Menu {
|
|
|
450
450
|
"mutable": false,
|
|
451
451
|
"complexType": {
|
|
452
452
|
"original": "Array<MenuItem | ListSeparator>",
|
|
453
|
-
"resolved": "(MenuItem<any>
|
|
453
|
+
"resolved": "(ListSeparator | MenuItem<any>)[]",
|
|
454
454
|
"references": {
|
|
455
455
|
"Array": {
|
|
456
456
|
"location": "global"
|
|
@@ -640,7 +640,7 @@ export class Menu {
|
|
|
640
640
|
"mutable": false,
|
|
641
641
|
"complexType": {
|
|
642
642
|
"original": "MenuSearcher",
|
|
643
|
-
"resolved": "(query: string) => Promise<(MenuItem<any>
|
|
643
|
+
"resolved": "(query: string) => Promise<(ListSeparator | MenuItem<any>)[]>",
|
|
644
644
|
"references": {
|
|
645
645
|
"MenuSearcher": {
|
|
646
646
|
"location": "import",
|
|
@@ -119,7 +119,7 @@ export class MenuList {
|
|
|
119
119
|
"mutable": false,
|
|
120
120
|
"complexType": {
|
|
121
121
|
"original": "Array<MenuItem | ListSeparator>",
|
|
122
|
-
"resolved": "(MenuItem<any>
|
|
122
|
+
"resolved": "(ListSeparator | MenuItem<any>)[]",
|
|
123
123
|
"references": {
|
|
124
124
|
"Array": {
|
|
125
125
|
"location": "global"
|
|
@@ -125,7 +125,7 @@ export class SplitButton {
|
|
|
125
125
|
"mutable": false,
|
|
126
126
|
"complexType": {
|
|
127
127
|
"original": "Array<MenuItem | ListSeparator>",
|
|
128
|
-
"resolved": "(MenuItem<any>
|
|
128
|
+
"resolved": "(ListSeparator | MenuItem<any>)[]",
|
|
129
129
|
"references": {
|
|
130
130
|
"Array": {
|
|
131
131
|
"location": "global"
|