@limetech/lime-elements 37.22.0 → 37.24.0
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 +21 -0
- package/dist/cjs/lime-elements.cjs.js +1 -1
- package/dist/cjs/limel-prosemirror-adapter.cjs.entry.js +1 -1
- package/dist/cjs/limel-prosemirror-adapter.cjs.entry.js.map +1 -1
- package/dist/cjs/limel-select.cjs.entry.js +25 -6
- package/dist/cjs/limel-select.cjs.entry.js.map +1 -1
- package/dist/cjs/limel-text-editor.cjs.entry.js +7 -1
- package/dist/cjs/limel-text-editor.cjs.entry.js.map +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +1 -1
- package/dist/collection/components/select/select.js +16 -5
- package/dist/collection/components/select/select.js.map +1 -1
- package/dist/collection/components/select/select.template.js +19 -3
- package/dist/collection/components/select/select.template.js.map +1 -1
- package/dist/collection/components/text-editor/prosemirror-adapter/menu/full-menu.js.map +1 -0
- package/dist/collection/components/text-editor/prosemirror-adapter/menu/menu-filter.js.map +1 -0
- package/dist/collection/components/text-editor/prosemirror-adapter/menu/types.js.map +1 -0
- package/dist/collection/components/text-editor/{prosemirror-adapter.css → prosemirror-adapter/prosemirror-adapter.css} +4 -1
- package/dist/collection/components/text-editor/{prosemirror-adapter.js → prosemirror-adapter/prosemirror-adapter.js} +3 -7
- package/dist/collection/components/text-editor/prosemirror-adapter/prosemirror-adapter.js.map +1 -0
- package/dist/collection/components/text-editor/text-editor.css +8 -0
- package/dist/collection/components/text-editor/text-editor.js +15 -2
- package/dist/collection/components/text-editor/text-editor.js.map +1 -1
- package/dist/esm/lime-elements.js +1 -1
- package/dist/esm/limel-prosemirror-adapter.entry.js +1 -1
- package/dist/esm/limel-prosemirror-adapter.entry.js.map +1 -1
- package/dist/esm/limel-select.entry.js +25 -6
- package/dist/esm/limel-select.entry.js.map +1 -1
- package/dist/esm/limel-text-editor.entry.js +7 -1
- package/dist/esm/limel-text-editor.entry.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/lime-elements/lime-elements.esm.js +1 -1
- package/dist/lime-elements/p-20d07aab.entry.js +68 -0
- package/dist/lime-elements/p-20d07aab.entry.js.map +1 -0
- package/dist/lime-elements/{p-748d97b9.entry.js → p-5b2e8739.entry.js} +2 -2
- package/dist/lime-elements/p-5b2e8739.entry.js.map +1 -0
- package/dist/lime-elements/p-caf959fe.entry.js +2 -0
- package/dist/lime-elements/p-caf959fe.entry.js.map +1 -0
- package/dist/types/components/select/select.d.ts +4 -1
- package/dist/types/components/select/select.template.d.ts +2 -2
- package/dist/types/components/text-editor/{prosemirror-adapter.d.ts → prosemirror-adapter/prosemirror-adapter.d.ts} +3 -7
- package/dist/types/components/text-editor/text-editor.d.ts +10 -2
- package/dist/types/components.d.ts +50 -34
- package/package.json +1 -1
- package/dist/collection/components/text-editor/menu/full-menu.js.map +0 -1
- package/dist/collection/components/text-editor/menu/menu-filter.js.map +0 -1
- package/dist/collection/components/text-editor/menu/types.js.map +0 -1
- package/dist/collection/components/text-editor/prosemirror-adapter.js.map +0 -1
- package/dist/lime-elements/p-210c09a6.entry.js +0 -2
- package/dist/lime-elements/p-210c09a6.entry.js.map +0 -1
- package/dist/lime-elements/p-6fb481ea.entry.js +0 -68
- package/dist/lime-elements/p-6fb481ea.entry.js.map +0 -1
- package/dist/lime-elements/p-748d97b9.entry.js.map +0 -1
- /package/dist/collection/components/text-editor/{menu → prosemirror-adapter/menu}/full-menu.js +0 -0
- /package/dist/collection/components/text-editor/{menu → prosemirror-adapter/menu}/menu-filter.js +0 -0
- /package/dist/collection/components/text-editor/{menu → prosemirror-adapter/menu}/types.js +0 -0
- /package/dist/types/components/text-editor/{menu → prosemirror-adapter/menu}/full-menu.d.ts +0 -0
- /package/dist/types/components/text-editor/{menu → prosemirror-adapter/menu}/menu-filter.d.ts +0 -0
- /package/dist/types/components/text-editor/{menu → prosemirror-adapter/menu}/types.d.ts +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../src/components/select/select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ListItem } from '../list/list-item.types';\nimport { Option } from '../select/option.types';\nimport { MDCFloatingLabel } from '@material/floating-label';\nimport { MDCSelectHelperText } from '@material/select/helper-text';\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { isMobileDevice } from '../../util/device';\nimport {\n ENTER,\n ENTER_KEY_CODE,\n SPACE,\n SPACE_KEY_CODE,\n} from '../../util/keycodes';\nimport { isMultiple } from '../../util/multiple';\nimport { createRandomString } from '../../util/random-string';\nimport { SelectTemplate, triggerIconColorWarning } from './select.template';\n\n/**\n * @exampleComponent limel-example-select\n * @exampleComponent limel-example-select-with-icons\n * @exampleComponent limel-example-select-with-secondary-text\n * @exampleComponent limel-example-select-multiple\n * @exampleComponent limel-example-select-with-empty-option\n * @exampleComponent limel-example-select-preselected\n * @exampleComponent limel-example-select-change-options\n * @exampleComponent limel-example-select-dialog\n */\n@Component({\n tag: 'limel-select',\n shadow: true,\n styleUrl: 'select.scss',\n})\nexport class Select {\n /**\n * Set to `true` to make the field disabled.\n * and visually shows that the `select` component is editable but disabled.\n * This tells the users that if certain requirements are met,\n * the component may become interactable.\n */\n @Prop({ reflect: true })\n public disabled = false;\n\n /**\n * Set to `true` to make the field read-only.\n * This visualizes the component slightly differently.\n * But shows no visual sign indicating that the component is disabled\n * or can ever become interactable.\n */\n @Prop({ reflect: true })\n public readonly = false;\n\n /**\n * Set to `true` to indicate that the current value of the select is\n * invalid.\n */\n @Prop({ reflect: true })\n public invalid: boolean;\n\n /**\n * True if the control requires a value.\n */\n @Prop({ reflect: true })\n public required = false;\n\n /**\n * Text to display next to the select.\n */\n @Prop({ reflect: true })\n public label: string;\n\n /**\n * Optional helper text to display below the input field when it has focus.\n */\n @Prop({ reflect: true })\n public helperText: string;\n\n /**\n * Currently selected value or values.\n * If `multiple` is `true`, this must be an array. Otherwise it must be a\n * single value.\n */\n @Prop()\n public value: Option | Option[];\n\n /**\n * List of options.\n */\n @Prop()\n public options: Option[] = [];\n\n /**\n * Set to `true` to allow multiple values to be selected.\n */\n @Prop()\n public multiple: boolean = false;\n\n /**\n * Emitted when the value is changed.\n */\n @Event()\n private change: EventEmitter<Option | Option[]>;\n\n @Element()\n private host: HTMLLimelSelectElement;\n\n @State()\n private menuOpen: boolean = false;\n\n private hasChanged: boolean = false;\n private checkValid: boolean = false;\n private mdcSelectHelperText: MDCSelectHelperText;\n private mdcFloatingLabel: MDCFloatingLabel;\n private isMobileDevice: boolean;\n private portalId: string;\n\n constructor() {\n this.handleMenuChange = this.handleMenuChange.bind(this);\n this.handleNativeChange = this.handleNativeChange.bind(this);\n this.handleMenuTriggerKeyPress =\n this.handleMenuTriggerKeyPress.bind(this);\n this.openMenu = this.openMenu.bind(this);\n this.closeMenu = this.closeMenu.bind(this);\n\n this.portalId = createRandomString();\n }\n\n public connectedCallback() {\n this.initialize();\n }\n\n public componentWillLoad() {\n this.isMobileDevice = isMobileDevice();\n\n // It should not be possible to render the native select for consumers, but we still want to make it testable.\n // We can set this attribute in tests to force rendering of the native select\n if (this.host.hasAttribute('data-native')) {\n this.isMobileDevice = true;\n }\n }\n\n public componentDidLoad() {\n this.initialize();\n triggerIconColorWarning(this.options);\n }\n\n private initialize() {\n let element: HTMLElement;\n element = this.host.shadowRoot.querySelector('.mdc-floating-label');\n if (!element) {\n return;\n }\n\n this.mdcFloatingLabel = new MDCFloatingLabel(element);\n\n element = this.host.shadowRoot.querySelector('.mdc-select-helper-text');\n if (element) {\n this.mdcSelectHelperText = new MDCSelectHelperText(element);\n }\n }\n\n public disconnectedCallback() {\n if (this.mdcFloatingLabel) {\n this.mdcFloatingLabel.destroy();\n }\n\n if (this.mdcSelectHelperText) {\n this.mdcSelectHelperText.destroy();\n }\n }\n\n public componentDidUpdate() {\n if (this.menuOpen) {\n this.setMenuFocus();\n }\n }\n\n public render() {\n const dropdownZIndex = getComputedStyle(this.host).getPropertyValue(\n '--dropdown-z-index',\n );\n\n return (\n <SelectTemplate\n id={this.portalId}\n disabled={this.disabled || this.readonly}\n readonly={this.readonly}\n required={this.required}\n invalid={this.invalid}\n label={this.label}\n helperText={this.helperText}\n value={this.value}\n options={this.options}\n onMenuChange={this.handleMenuChange}\n onNativeChange={this.handleNativeChange}\n onTriggerPress={this.handleMenuTriggerKeyPress}\n multiple={this.multiple}\n isOpen={this.menuOpen}\n open={this.openMenu}\n close={this.closeMenu}\n checkValid={this.checkValid}\n native={this.isMobileDevice}\n dropdownZIndex={dropdownZIndex}\n />\n );\n }\n\n @Watch('menuOpen')\n protected watchOpen(newValue: boolean, oldValue: boolean) {\n if (this.checkValid) {\n return;\n }\n\n // Menu was closed for the first time\n if (!newValue && oldValue) {\n this.checkValid = true;\n }\n }\n\n private setMenuFocus() {\n if (this.isMobileDevice) {\n return;\n }\n\n setTimeout(() => {\n const list: HTMLElement = document.querySelector(\n `#${this.portalId} limel-menu-surface limel-list`,\n );\n const firstItem: HTMLElement =\n list?.shadowRoot?.querySelector('[tabindex]');\n\n if (firstItem) {\n firstItem.focus();\n }\n });\n }\n\n private setTriggerFocus() {\n const trigger: HTMLElement = this.host.shadowRoot.querySelector(\n '.limel-select-trigger',\n );\n trigger.focus();\n }\n\n private handleMenuChange(\n event: CustomEvent<Array<ListItem<Option>> | ListItem<Option>>,\n ) {\n event.stopPropagation();\n\n if (isMultiple(event.detail)) {\n const listItems: ListItem[] = event.detail;\n const options: Option[] = listItems.map((item) => item.value);\n this.change.emit(options);\n\n return;\n }\n\n if (!event.detail.selected) {\n return;\n }\n\n const listItem: ListItem = event.detail;\n const option: Option = listItem.value;\n if (option.disabled) {\n return;\n }\n\n this.change.emit(option);\n this.menuOpen = false;\n this.setTriggerFocus();\n }\n\n private openMenu() {\n if (this.emitFirstChangeEvent()) {\n this.hasChanged = true;\n this.change.emit(this.options[0]);\n }\n\n this.menuOpen = true;\n }\n\n private emitFirstChangeEvent() {\n return !this.hasChanged && this.isMobileDevice && !this.value;\n }\n\n private closeMenu() {\n this.menuOpen = false;\n this.setTriggerFocus();\n }\n\n private handleMenuTriggerKeyPress(event: KeyboardEvent) {\n const isEnter = event.key === ENTER || event.keyCode === ENTER_KEY_CODE;\n const isSpace = event.key === SPACE || event.keyCode === SPACE_KEY_CODE;\n\n if (!this.menuOpen && (isSpace || isEnter)) {\n event.stopPropagation();\n event.preventDefault();\n this.menuOpen = true;\n }\n }\n\n private handleNativeChange(event: Event) {\n event.stopPropagation();\n\n const element: HTMLSelectElement = this.host.shadowRoot.querySelector(\n 'select.limel-select__native-control',\n );\n const options = Array.apply(null, element.options) // eslint-disable-line prefer-spread\n .filter((optionElement: HTMLOptionElement) => {\n return !!optionElement.selected;\n })\n .map((optionElement: HTMLOptionElement) => {\n return this.options.find(\n (o) => o.value === optionElement.value,\n );\n });\n\n if (this.multiple) {\n this.change.emit(options);\n\n return;\n }\n\n this.change.emit(options[0]);\n this.menuOpen = false;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../src/components/select/select.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AACnE,OAAO,EACH,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,KAAK,EACL,KAAK,GACR,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EACH,KAAK,EACL,cAAc,EACd,KAAK,EACL,cAAc,GACjB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,cAAc,EAAE,uBAAuB,EAAE,MAAM,mBAAmB,CAAC;AAE5E;;;;;;;;;;GAUG;AAMH,MAAM,OAAO,MAAM;EAmFf;IAPQ,eAAU,GAAY,KAAK,CAAC;IAC5B,eAAU,GAAY,KAAK,CAAC;oBArElB,KAAK;oBASL,KAAK;;oBAaL,KAAK;;;;mBA0ByB,EAAE;oBAMvB,KAAK;oBAYJ,KAAK;IAU7B,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACzD,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC7D,IAAI,CAAC,yBAAyB;MAC1B,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC9C,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACzC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAE3C,IAAI,CAAC,QAAQ,GAAG,kBAAkB,EAAE,CAAC;GACxC;EAEM,iBAAiB;IACpB,IAAI,CAAC,UAAU,EAAE,CAAC;EACtB,CAAC;EAEM,iBAAiB;IACpB,IAAI,CAAC,cAAc,GAAG,cAAc,EAAE,CAAC;IAEvC,8GAA8G;IAC9G,6EAA6E;IAC7E,IAAI,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE;MACvC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;KAC9B;EACL,CAAC;EAEM,gBAAgB;IACnB,IAAI,CAAC,UAAU,EAAE,CAAC;IAClB,uBAAuB,CAAC,IAAI,CAAC,6BAA6B,EAAE,CAAC,CAAC;EAClE,CAAC;EAEO,UAAU;IACd,IAAI,OAAoB,CAAC;IACzB,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC;IACpE,IAAI,CAAC,OAAO,EAAE;MACV,OAAO;KACV;IAED,IAAI,CAAC,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAEtD,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,yBAAyB,CAAC,CAAC;IACxE,IAAI,OAAO,EAAE;MACT,IAAI,CAAC,mBAAmB,GAAG,IAAI,mBAAmB,CAAC,OAAO,CAAC,CAAC;KAC/D;EACL,CAAC;EAEM,oBAAoB;IACvB,IAAI,IAAI,CAAC,gBAAgB,EAAE;MACvB,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC;KACnC;IAED,IAAI,IAAI,CAAC,mBAAmB,EAAE;MAC1B,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,CAAC;KACtC;EACL,CAAC;EAEM,kBAAkB;IACrB,IAAI,IAAI,CAAC,QAAQ,EAAE;MACf,IAAI,CAAC,YAAY,EAAE,CAAC;KACvB;EACL,CAAC;EAEM,MAAM;IACT,MAAM,cAAc,GAAG,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,gBAAgB,CAC/D,oBAAoB,CACvB,CAAC;IAEF,OAAO,CACH,EAAC,cAAc,IACX,EAAE,EAAE,IAAI,CAAC,QAAQ,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EACxC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,YAAY,EAAE,IAAI,CAAC,gBAAgB,EACnC,cAAc,EAAE,IAAI,CAAC,kBAAkB,EACvC,cAAc,EAAE,IAAI,CAAC,yBAAyB,EAC9C,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,MAAM,EAAE,IAAI,CAAC,QAAQ,EACrB,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,KAAK,EAAE,IAAI,CAAC,SAAS,EACrB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,MAAM,EAAE,IAAI,CAAC,cAAc,EAC3B,cAAc,EAAE,cAAc,GAChC,CACL,CAAC;EACN,CAAC;EAGS,SAAS,CAAC,QAAiB,EAAE,QAAiB;IACpD,IAAI,IAAI,CAAC,UAAU,EAAE;MACjB,OAAO;KACV;IAED,qCAAqC;IACrC,IAAI,CAAC,QAAQ,IAAI,QAAQ,EAAE;MACvB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;KAC1B;EACL,CAAC;EAEO,YAAY;IAChB,IAAI,IAAI,CAAC,cAAc,EAAE;MACrB,OAAO;KACV;IAED,UAAU,CAAC,GAAG,EAAE;;MACZ,MAAM,IAAI,GAAgB,QAAQ,CAAC,aAAa,CAC5C,IAAI,IAAI,CAAC,QAAQ,gCAAgC,CACpD,CAAC;MACF,MAAM,SAAS,GACX,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,UAAU,0CAAE,aAAa,CAAC,YAAY,CAAC,CAAC;MAElD,IAAI,SAAS,EAAE;QACX,SAAS,CAAC,KAAK,EAAE,CAAC;OACrB;IACL,CAAC,CAAC,CAAC;EACP,CAAC;EAEO,eAAe;IACnB,MAAM,OAAO,GAAgB,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAC3D,uBAAuB,CAC1B,CAAC;IACF,OAAO,CAAC,KAAK,EAAE,CAAC;EACpB,CAAC;EAEO,gBAAgB,CACpB,KAA8D;IAE9D,KAAK,CAAC,eAAe,EAAE,CAAC;IAExB,IAAI,UAAU,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE;MAC1B,MAAM,SAAS,GAAe,KAAK,CAAC,MAAM,CAAC;MAC3C,MAAM,OAAO,GAAa,SAAS,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;MAC9D,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;MAE1B,OAAO;KACV;IAED,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,EAAE;MACxB,OAAO;KACV;IAED,MAAM,QAAQ,GAAa,KAAK,CAAC,MAAM,CAAC;IACxC,MAAM,MAAM,GAAW,QAAQ,CAAC,KAAK,CAAC;IACtC,IAAI,MAAM,CAAC,QAAQ,EAAE;MACjB,OAAO;KACV;IAED,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IACzB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;IACtB,IAAI,CAAC,eAAe,EAAE,CAAC;EAC3B,CAAC;EAEO,QAAQ;IACZ,IAAI,IAAI,CAAC,oBAAoB,EAAE,EAAE;MAC7B,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;MACvB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,6BAA6B,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;KAC7D;IAED,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;EACzB,CAAC;EAEO,oBAAoB;IACxB,OAAO,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,cAAc,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;EAClE,CAAC;EAEO,SAAS;IACb,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;IACtB,IAAI,CAAC,eAAe,EAAE,CAAC;EAC3B,CAAC;EAEO,yBAAyB,CAAC,KAAoB;IAClD,MAAM,OAAO,GAAG,KAAK,CAAC,GAAG,KAAK,KAAK,IAAI,KAAK,CAAC,OAAO,KAAK,cAAc,CAAC;IACxE,MAAM,OAAO,GAAG,KAAK,CAAC,GAAG,KAAK,KAAK,IAAI,KAAK,CAAC,OAAO,KAAK,cAAc,CAAC;IAExE,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,EAAE;MACxC,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,KAAK,CAAC,cAAc,EAAE,CAAC;MACvB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;KACxB;EACL,CAAC;EAEO,kBAAkB,CAAC,KAAY;IACnC,KAAK,CAAC,eAAe,EAAE,CAAC;IAExB,MAAM,OAAO,GAAsB,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CACjE,qCAAqC,CACxC,CAAC;IACF,MAAM,OAAO,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC,oCAAoC;OAClF,MAAM,CAAC,CAAC,aAAgC,EAAE,EAAE;MACzC,OAAO,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC;IACpC,CAAC,CAAC;OACD,GAAG,CAAC,CAAC,aAAgC,EAAE,EAAE;MACtC,OAAO,IAAI,CAAC,6BAA6B,EAAE,CAAC,IAAI,CAC5C,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,aAAa,CAAC,KAAK,CACzC,CAAC;IACN,CAAC,CAAC,CAAC;IAEP,IAAI,IAAI,CAAC,QAAQ,EAAE;MACf,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;MAE1B,OAAO;KACV;IAED,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;IAC7B,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;EAC1B,CAAC;EAEO,6BAA6B;IACjC,OAAO,IAAI,CAAC,OAAO,CAAC,MAAM,CACtB,CAAC,MAAM,EAAoB,EAAE,CAAC,CAAC,CAAC,WAAW,IAAI,MAAM,CAAC,CACzD,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { ListItem, ListSeparator } from '../list/list-item.types';\nimport { Option } from '../select/option.types';\nimport { MDCFloatingLabel } from '@material/floating-label';\nimport { MDCSelectHelperText } from '@material/select/helper-text';\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { isMobileDevice } from '../../util/device';\nimport {\n ENTER,\n ENTER_KEY_CODE,\n SPACE,\n SPACE_KEY_CODE,\n} from '../../util/keycodes';\nimport { isMultiple } from '../../util/multiple';\nimport { createRandomString } from '../../util/random-string';\nimport { SelectTemplate, triggerIconColorWarning } from './select.template';\n\n/**\n * @exampleComponent limel-example-select\n * @exampleComponent limel-example-select-with-icons\n * @exampleComponent limel-example-select-with-separators\n * @exampleComponent limel-example-select-with-secondary-text\n * @exampleComponent limel-example-select-multiple\n * @exampleComponent limel-example-select-with-empty-option\n * @exampleComponent limel-example-select-preselected\n * @exampleComponent limel-example-select-change-options\n * @exampleComponent limel-example-select-dialog\n */\n@Component({\n tag: 'limel-select',\n shadow: true,\n styleUrl: 'select.scss',\n})\nexport class Select {\n /**\n * Set to `true` to make the field disabled.\n * and visually shows that the `select` component is editable but disabled.\n * This tells the users that if certain requirements are met,\n * the component may become interactable.\n */\n @Prop({ reflect: true })\n public disabled = false;\n\n /**\n * Set to `true` to make the field read-only.\n * This visualizes the component slightly differently.\n * But shows no visual sign indicating that the component is disabled\n * or can ever become interactable.\n */\n @Prop({ reflect: true })\n public readonly = false;\n\n /**\n * Set to `true` to indicate that the current value of the select is\n * invalid.\n */\n @Prop({ reflect: true })\n public invalid: boolean;\n\n /**\n * True if the control requires a value.\n */\n @Prop({ reflect: true })\n public required = false;\n\n /**\n * Text to display next to the select.\n */\n @Prop({ reflect: true })\n public label: string;\n\n /**\n * Optional helper text to display below the input field when it has focus.\n */\n @Prop({ reflect: true })\n public helperText: string;\n\n /**\n * Currently selected value or values.\n * If `multiple` is `true`, this must be an array. Otherwise it must be a\n * single value.\n */\n @Prop()\n public value: Option | Option[];\n\n /**\n * List of options.\n */\n @Prop()\n public options: Array<Option | ListSeparator> = [];\n\n /**\n * Set to `true` to allow multiple values to be selected.\n */\n @Prop()\n public multiple: boolean = false;\n\n /**\n * Emitted when the value is changed.\n */\n @Event()\n private change: EventEmitter<Option | Option[]>;\n\n @Element()\n private host: HTMLLimelSelectElement;\n\n @State()\n private menuOpen: boolean = false;\n\n private hasChanged: boolean = false;\n private checkValid: boolean = false;\n private mdcSelectHelperText: MDCSelectHelperText;\n private mdcFloatingLabel: MDCFloatingLabel;\n private isMobileDevice: boolean;\n private portalId: string;\n\n constructor() {\n this.handleMenuChange = this.handleMenuChange.bind(this);\n this.handleNativeChange = this.handleNativeChange.bind(this);\n this.handleMenuTriggerKeyPress =\n this.handleMenuTriggerKeyPress.bind(this);\n this.openMenu = this.openMenu.bind(this);\n this.closeMenu = this.closeMenu.bind(this);\n\n this.portalId = createRandomString();\n }\n\n public connectedCallback() {\n this.initialize();\n }\n\n public componentWillLoad() {\n this.isMobileDevice = isMobileDevice();\n\n // It should not be possible to render the native select for consumers, but we still want to make it testable.\n // We can set this attribute in tests to force rendering of the native select\n if (this.host.hasAttribute('data-native')) {\n this.isMobileDevice = true;\n }\n }\n\n public componentDidLoad() {\n this.initialize();\n triggerIconColorWarning(this.getOptionsExcludingSeparators());\n }\n\n private initialize() {\n let element: HTMLElement;\n element = this.host.shadowRoot.querySelector('.mdc-floating-label');\n if (!element) {\n return;\n }\n\n this.mdcFloatingLabel = new MDCFloatingLabel(element);\n\n element = this.host.shadowRoot.querySelector('.mdc-select-helper-text');\n if (element) {\n this.mdcSelectHelperText = new MDCSelectHelperText(element);\n }\n }\n\n public disconnectedCallback() {\n if (this.mdcFloatingLabel) {\n this.mdcFloatingLabel.destroy();\n }\n\n if (this.mdcSelectHelperText) {\n this.mdcSelectHelperText.destroy();\n }\n }\n\n public componentDidUpdate() {\n if (this.menuOpen) {\n this.setMenuFocus();\n }\n }\n\n public render() {\n const dropdownZIndex = getComputedStyle(this.host).getPropertyValue(\n '--dropdown-z-index',\n );\n\n return (\n <SelectTemplate\n id={this.portalId}\n disabled={this.disabled || this.readonly}\n readonly={this.readonly}\n required={this.required}\n invalid={this.invalid}\n label={this.label}\n helperText={this.helperText}\n value={this.value}\n options={this.options}\n onMenuChange={this.handleMenuChange}\n onNativeChange={this.handleNativeChange}\n onTriggerPress={this.handleMenuTriggerKeyPress}\n multiple={this.multiple}\n isOpen={this.menuOpen}\n open={this.openMenu}\n close={this.closeMenu}\n checkValid={this.checkValid}\n native={this.isMobileDevice}\n dropdownZIndex={dropdownZIndex}\n />\n );\n }\n\n @Watch('menuOpen')\n protected watchOpen(newValue: boolean, oldValue: boolean) {\n if (this.checkValid) {\n return;\n }\n\n // Menu was closed for the first time\n if (!newValue && oldValue) {\n this.checkValid = true;\n }\n }\n\n private setMenuFocus() {\n if (this.isMobileDevice) {\n return;\n }\n\n setTimeout(() => {\n const list: HTMLElement = document.querySelector(\n `#${this.portalId} limel-menu-surface limel-list`,\n );\n const firstItem: HTMLElement =\n list?.shadowRoot?.querySelector('[tabindex]');\n\n if (firstItem) {\n firstItem.focus();\n }\n });\n }\n\n private setTriggerFocus() {\n const trigger: HTMLElement = this.host.shadowRoot.querySelector(\n '.limel-select-trigger',\n );\n trigger.focus();\n }\n\n private handleMenuChange(\n event: CustomEvent<Array<ListItem<Option>> | ListItem<Option>>,\n ) {\n event.stopPropagation();\n\n if (isMultiple(event.detail)) {\n const listItems: ListItem[] = event.detail;\n const options: Option[] = listItems.map((item) => item.value);\n this.change.emit(options);\n\n return;\n }\n\n if (!event.detail.selected) {\n return;\n }\n\n const listItem: ListItem = event.detail;\n const option: Option = listItem.value;\n if (option.disabled) {\n return;\n }\n\n this.change.emit(option);\n this.menuOpen = false;\n this.setTriggerFocus();\n }\n\n private openMenu() {\n if (this.emitFirstChangeEvent()) {\n this.hasChanged = true;\n this.change.emit(this.getOptionsExcludingSeparators()[0]);\n }\n\n this.menuOpen = true;\n }\n\n private emitFirstChangeEvent() {\n return !this.hasChanged && this.isMobileDevice && !this.value;\n }\n\n private closeMenu() {\n this.menuOpen = false;\n this.setTriggerFocus();\n }\n\n private handleMenuTriggerKeyPress(event: KeyboardEvent) {\n const isEnter = event.key === ENTER || event.keyCode === ENTER_KEY_CODE;\n const isSpace = event.key === SPACE || event.keyCode === SPACE_KEY_CODE;\n\n if (!this.menuOpen && (isSpace || isEnter)) {\n event.stopPropagation();\n event.preventDefault();\n this.menuOpen = true;\n }\n }\n\n private handleNativeChange(event: Event) {\n event.stopPropagation();\n\n const element: HTMLSelectElement = this.host.shadowRoot.querySelector(\n 'select.limel-select__native-control',\n );\n const options = Array.apply(null, element.options) // eslint-disable-line prefer-spread\n .filter((optionElement: HTMLOptionElement) => {\n return !!optionElement.selected;\n })\n .map((optionElement: HTMLOptionElement) => {\n return this.getOptionsExcludingSeparators().find(\n (o) => o.value === optionElement.value,\n );\n });\n\n if (this.multiple) {\n this.change.emit(options);\n\n return;\n }\n\n this.change.emit(options[0]);\n this.menuOpen = false;\n }\n\n private getOptionsExcludingSeparators(): Option[] {\n return this.options.filter(\n (option): option is Option => !('separator' in option),\n );\n }\n}\n"]}
|
|
@@ -74,9 +74,16 @@ const MenuDropdown = (props) => {
|
|
|
74
74
|
} }, h("limel-list", { items: items, type: props.multiple ? 'checkbox' : 'selectable', onChange: props.onMenuChange }))));
|
|
75
75
|
};
|
|
76
76
|
const NativeDropdown = (props) => {
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
77
|
+
const options = props.options
|
|
78
|
+
.filter((option) => !('separator' in option))
|
|
79
|
+
.map(renderOption(props.value));
|
|
80
|
+
return (h("select", { required: props.required, "aria-disabled": props.disabled, "aria-required": props.required, onChange: props.onNativeChange, onFocus: props.open, onBlur: props.close, class: "limel-select__native-control", disabled: props.disabled, multiple: props.multiple }, options));
|
|
81
|
+
};
|
|
82
|
+
const renderOption = (selectedOption) => {
|
|
83
|
+
return (option) => {
|
|
84
|
+
const { value, disabled, text } = option;
|
|
85
|
+
return (h("option", { key: value, value: value, selected: isSelected(option, selectedOption), disabled: disabled }, text));
|
|
86
|
+
};
|
|
80
87
|
};
|
|
81
88
|
function isSelected(option, value) {
|
|
82
89
|
if (!value) {
|
|
@@ -90,6 +97,12 @@ function isSelected(option, value) {
|
|
|
90
97
|
function createMenuItems(options, value, selectIsRequired = false) {
|
|
91
98
|
const menuOptionFilter = getMenuOptionFilter(selectIsRequired);
|
|
92
99
|
return options.filter(menuOptionFilter).map((option) => {
|
|
100
|
+
if ('separator' in option) {
|
|
101
|
+
return {
|
|
102
|
+
text: option.text,
|
|
103
|
+
separator: true,
|
|
104
|
+
};
|
|
105
|
+
}
|
|
93
106
|
const selected = isSelected(option, value);
|
|
94
107
|
const { text, secondaryText, disabled } = option;
|
|
95
108
|
const name = getIconName(option.icon);
|
|
@@ -130,6 +143,9 @@ function getMenuOptionFilter(selectIsRequired) {
|
|
|
130
143
|
// an option should be treated as "empty".
|
|
131
144
|
return true;
|
|
132
145
|
}
|
|
146
|
+
if ('separator' in option) {
|
|
147
|
+
return true;
|
|
148
|
+
}
|
|
133
149
|
};
|
|
134
150
|
}
|
|
135
151
|
function getSelectedText(value, readonly) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select.template.js","sourceRoot":"","sources":["../../../src/components/select/select.template.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ListItem } from '../list/list-item.types';\nimport { Option } from '../select/option.types';\nimport { FunctionalComponent, h } from '@stencil/core';\nimport { isMultiple } from '../../util/multiple';\nimport { getIconColor, getIconName } from '../icon/get-icon-props';\n\ninterface SelectTemplateProps {\n disabled?: boolean;\n readonly?: boolean;\n required?: boolean;\n invalid?: boolean;\n options: Option[];\n value: Option | Option[];\n label?: string;\n helperText?: string;\n multiple?: boolean;\n native: boolean;\n\n onNativeChange: (event: Event) => void;\n\n id: string;\n onMenuChange: (event: CustomEvent<ListItem | ListItem[]>) => void;\n onTriggerPress: (event: KeyboardEvent) => void;\n isOpen: boolean;\n open: () => void;\n close: () => void;\n checkValid: boolean;\n\n dropdownZIndex: string;\n}\n\nexport const SelectTemplate: FunctionalComponent<SelectTemplateProps> = (\n props,\n) => {\n const value = props.value;\n let hasValue = !!props.value;\n let hasEmptyText = true;\n if (isMultiple(value)) {\n hasValue = value.length > 0;\n } else if (hasValue) {\n hasValue = !!value.value;\n hasEmptyText = value.text === '';\n }\n\n let isValid = !props.invalid;\n if (props.checkValid && props.required && !hasValue) {\n isValid = false;\n }\n\n const classList = {\n 'limel-select': true,\n 'mdc-select': true,\n 'mdc-select--outlined': true,\n 'mdc-select--disabled': props.disabled,\n 'limel-select--readonly': props.readonly,\n 'limel-select--required': props.required,\n 'limel-select--invalid': !isValid,\n 'limel-select--empty': !hasValue,\n 'limel-select--with-helper-text': typeof props.helperText === 'string',\n };\n\n return (\n <div class={classList}>\n <SelectValue\n {...props}\n hasValue={hasValue}\n isValid={isValid}\n hasEmptyText={hasEmptyText}\n />\n <HelperText text={props.helperText} isValid={!props.invalid} />\n <SelectDropdown {...props} />\n </div>\n );\n};\n\nconst SelectValue: FunctionalComponent<\n SelectTemplateProps & {\n hasValue: boolean;\n isValid: boolean;\n hasEmptyText: boolean;\n }\n> = (props) => {\n const anchorClassList = {\n 'mdc-select__anchor': true,\n 'limel-select-trigger': true,\n 'limel-select--focused': props.isOpen,\n };\n const labelClassList = {\n 'mdc-floating-label': true,\n 'mdc-floating-label--float-above':\n !props.hasEmptyText ||\n props.isOpen ||\n props.readonly ||\n props.hasValue,\n 'mdc-floating-label--active': props.isOpen,\n };\n\n return (\n <button\n class={anchorClassList}\n onClick={props.open}\n onKeyPress={props.onTriggerPress}\n aria-haspopup=\"listbox\"\n aria-expanded={props.isOpen}\n aria-controls={props.id}\n aria-labelledby=\"s-label s-selected-text\"\n aria-required={props.required}\n disabled={props.disabled || props.readonly}\n >\n <span id=\"s-label\" class={labelClassList}>\n {props.label}\n </span>\n <span class=\"mdc-select__selected-text-container limel-select__selected-option\">\n {getSelectedIcon(props.value)}\n <span\n id=\"s-selected-text\"\n class=\"mdc-select__selected-text limel-select__selected-option__text\"\n >\n {getSelectedText(props.value, props.readonly)}\n </span>\n </span>\n <ShowIcon {...props} isValid={props.isValid} />\n <span class=\"mdc-select__dropdown-icon\">\n <svg\n class=\"mdc-select__dropdown-icon-graphic\"\n viewBox=\"7 10 10 5\"\n focusable=\"false\"\n >\n <polygon\n stroke=\"none\"\n fill-rule=\"evenodd\"\n points=\"7 10 12 15 17 10\"\n ></polygon>\n </svg>\n </span>\n </button>\n );\n};\n\nconst ShowIcon: FunctionalComponent<\n SelectTemplateProps & {\n isValid: boolean;\n }\n> = (props) => {\n if (props.isValid) {\n return;\n }\n\n return (\n <limel-icon name=\"high_importance\" size=\"medium\" class=\"invalid-icon\" />\n );\n};\n\nconst HelperText: FunctionalComponent<{ text: string; isValid: boolean }> = (\n props,\n) => {\n if (typeof props.text !== 'string') {\n return;\n }\n\n return (\n <limel-helper-line\n helperText={props.text.trim()}\n invalid={!props.isValid}\n />\n );\n};\n\nconst SelectDropdown: FunctionalComponent<SelectTemplateProps> = (props) => {\n if (props.native) {\n return <NativeDropdown {...props} />;\n }\n\n return <MenuDropdown {...props} />;\n};\n\nconst MenuDropdown: FunctionalComponent<SelectTemplateProps> = (props) => {\n const items = createMenuItems(props.options, props.value, props.required);\n\n return (\n <limel-portal\n containerId={props.id}\n visible={props.isOpen}\n inheritParentWidth={true}\n containerStyle={{ 'z-index': props.dropdownZIndex }}\n >\n <limel-menu-surface\n open={props.isOpen}\n onDismiss={props.close}\n style={{\n '--mdc-menu-min-width': '100%',\n 'max-height': 'inherit',\n display: 'flex',\n 'min-width': '100%',\n width: 'fit-content',\n }}\n >\n <limel-list\n items={items}\n type={props.multiple ? 'checkbox' : 'selectable'}\n onChange={props.onMenuChange}\n />\n </limel-menu-surface>\n </limel-portal>\n );\n};\n\nconst NativeDropdown: FunctionalComponent<SelectTemplateProps> = (props) => {\n return (\n <select\n required={props.required}\n aria-disabled={props.disabled}\n aria-required={props.required}\n onChange={props.onNativeChange}\n onFocus={props.open}\n onBlur={props.close}\n class=\"limel-select__native-control\"\n disabled={props.disabled}\n multiple={props.multiple}\n >\n {props.options.map((option) => {\n return (\n <option\n key={option.value}\n value={option.value}\n selected={isSelected(option, props.value)}\n disabled={option.disabled}\n >\n {option.text}\n </option>\n );\n })}\n </select>\n );\n};\n\nfunction isSelected(option: Option, value: Option | Option[]): boolean {\n if (!value) {\n return false;\n }\n\n if (isMultiple(value)) {\n return value.some((o) => option.value === o.value);\n }\n\n return option.value === value.value;\n}\n\nfunction createMenuItems(\n options: Option[],\n value: Option | Option[],\n selectIsRequired = false,\n): Array<ListItem<Option>> {\n const menuOptionFilter = getMenuOptionFilter(selectIsRequired);\n\n return options.filter(menuOptionFilter).map((option) => {\n const selected = isSelected(option, value);\n const { text, secondaryText, disabled } = option;\n const name = getIconName(option.icon);\n const color = getIconColor(option.icon, option.iconColor);\n\n if (!name) {\n return {\n text: text,\n secondaryText: secondaryText,\n selected: selected,\n disabled: disabled,\n value: option,\n };\n }\n\n return {\n text: text,\n secondaryText: secondaryText,\n selected: selected,\n disabled: disabled,\n value: option,\n icon: {\n name: name,\n color: color,\n },\n };\n });\n}\n\nfunction getMenuOptionFilter(selectIsRequired: boolean) {\n return (option: Option) => {\n if (!selectIsRequired) {\n // If the select component is NOT required, we keep all options.\n return true;\n }\n\n if (option.text) {\n // If the select component IS required, we keep only options\n // that are not \"empty\". We only check the text property, because\n // some systems use an \"empty option\" that will have a value for\n // the `value` property, to signify \"no option selected\". Such\n // an option should be treated as \"empty\".\n return true;\n }\n };\n}\n\nfunction getSelectedText(value: Option | Option[], readonly: boolean): string {\n if ((!value || (isMultiple(value) && !value.length)) && readonly) {\n return '–';\n }\n\n if (!value) {\n return '';\n }\n\n if (isMultiple(value)) {\n return value.map((option) => option.text).join(', ');\n }\n\n return value.text;\n}\n\nfunction getSelectedIcon(value: any) {\n if (!value || !value.icon) {\n return '';\n }\n\n const name = getIconName(value.icon);\n const color = getIconColor(value.icon, value.iconColor);\n const style: any = {};\n if (color) {\n style.color = color;\n }\n\n return (\n <limel-icon\n class=\"limel-select__selected-option__icon\"\n name={name}\n size=\"medium\"\n style={style}\n />\n );\n}\n\nexport function triggerIconColorWarning(options: Option[]) {\n options.forEach((option) => {\n if (option.iconColor) {\n /* eslint-disable-next-line no-console */\n console.warn(\n \"The `iconColor` prop is deprecated now! Use the new `Icon` interface and instead of `iconColor: 'color-name'` write `icon {name: 'icon-name', color: 'color-name'}`.\",\n );\n }\n });\n}\n"]}
|
|
1
|
+
{"version":3,"file":"select.template.js","sourceRoot":"","sources":["../../../src/components/select/select.template.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ListItem, ListSeparator } from '../list/list-item.types';\nimport { Option } from '../select/option.types';\nimport { FunctionalComponent, h } from '@stencil/core';\nimport { isMultiple } from '../../util/multiple';\nimport { getIconColor, getIconName } from '../icon/get-icon-props';\n\ninterface SelectTemplateProps {\n disabled?: boolean;\n readonly?: boolean;\n required?: boolean;\n invalid?: boolean;\n options: Array<Option | ListSeparator>;\n value: Option | Option[];\n label?: string;\n helperText?: string;\n multiple?: boolean;\n native: boolean;\n\n onNativeChange: (event: Event) => void;\n\n id: string;\n onMenuChange: (event: CustomEvent<ListItem | ListItem[]>) => void;\n onTriggerPress: (event: KeyboardEvent) => void;\n isOpen: boolean;\n open: () => void;\n close: () => void;\n checkValid: boolean;\n\n dropdownZIndex: string;\n}\n\nexport const SelectTemplate: FunctionalComponent<SelectTemplateProps> = (\n props,\n) => {\n const value = props.value;\n let hasValue = !!props.value;\n let hasEmptyText = true;\n if (isMultiple(value)) {\n hasValue = value.length > 0;\n } else if (hasValue) {\n hasValue = !!value.value;\n hasEmptyText = value.text === '';\n }\n\n let isValid = !props.invalid;\n if (props.checkValid && props.required && !hasValue) {\n isValid = false;\n }\n\n const classList = {\n 'limel-select': true,\n 'mdc-select': true,\n 'mdc-select--outlined': true,\n 'mdc-select--disabled': props.disabled,\n 'limel-select--readonly': props.readonly,\n 'limel-select--required': props.required,\n 'limel-select--invalid': !isValid,\n 'limel-select--empty': !hasValue,\n 'limel-select--with-helper-text': typeof props.helperText === 'string',\n };\n\n return (\n <div class={classList}>\n <SelectValue\n {...props}\n hasValue={hasValue}\n isValid={isValid}\n hasEmptyText={hasEmptyText}\n />\n <HelperText text={props.helperText} isValid={!props.invalid} />\n <SelectDropdown {...props} />\n </div>\n );\n};\n\nconst SelectValue: FunctionalComponent<\n SelectTemplateProps & {\n hasValue: boolean;\n isValid: boolean;\n hasEmptyText: boolean;\n }\n> = (props) => {\n const anchorClassList = {\n 'mdc-select__anchor': true,\n 'limel-select-trigger': true,\n 'limel-select--focused': props.isOpen,\n };\n const labelClassList = {\n 'mdc-floating-label': true,\n 'mdc-floating-label--float-above':\n !props.hasEmptyText ||\n props.isOpen ||\n props.readonly ||\n props.hasValue,\n 'mdc-floating-label--active': props.isOpen,\n };\n\n return (\n <button\n class={anchorClassList}\n onClick={props.open}\n onKeyPress={props.onTriggerPress}\n aria-haspopup=\"listbox\"\n aria-expanded={props.isOpen}\n aria-controls={props.id}\n aria-labelledby=\"s-label s-selected-text\"\n aria-required={props.required}\n disabled={props.disabled || props.readonly}\n >\n <span id=\"s-label\" class={labelClassList}>\n {props.label}\n </span>\n <span class=\"mdc-select__selected-text-container limel-select__selected-option\">\n {getSelectedIcon(props.value)}\n <span\n id=\"s-selected-text\"\n class=\"mdc-select__selected-text limel-select__selected-option__text\"\n >\n {getSelectedText(props.value, props.readonly)}\n </span>\n </span>\n <ShowIcon {...props} isValid={props.isValid} />\n <span class=\"mdc-select__dropdown-icon\">\n <svg\n class=\"mdc-select__dropdown-icon-graphic\"\n viewBox=\"7 10 10 5\"\n focusable=\"false\"\n >\n <polygon\n stroke=\"none\"\n fill-rule=\"evenodd\"\n points=\"7 10 12 15 17 10\"\n ></polygon>\n </svg>\n </span>\n </button>\n );\n};\n\nconst ShowIcon: FunctionalComponent<\n SelectTemplateProps & {\n isValid: boolean;\n }\n> = (props) => {\n if (props.isValid) {\n return;\n }\n\n return (\n <limel-icon name=\"high_importance\" size=\"medium\" class=\"invalid-icon\" />\n );\n};\n\nconst HelperText: FunctionalComponent<{ text: string; isValid: boolean }> = (\n props,\n) => {\n if (typeof props.text !== 'string') {\n return;\n }\n\n return (\n <limel-helper-line\n helperText={props.text.trim()}\n invalid={!props.isValid}\n />\n );\n};\n\nconst SelectDropdown: FunctionalComponent<SelectTemplateProps> = (props) => {\n if (props.native) {\n return <NativeDropdown {...props} />;\n }\n\n return <MenuDropdown {...props} />;\n};\n\nconst MenuDropdown: FunctionalComponent<SelectTemplateProps> = (props) => {\n const items = createMenuItems(props.options, props.value, props.required);\n\n return (\n <limel-portal\n containerId={props.id}\n visible={props.isOpen}\n inheritParentWidth={true}\n containerStyle={{ 'z-index': props.dropdownZIndex }}\n >\n <limel-menu-surface\n open={props.isOpen}\n onDismiss={props.close}\n style={{\n '--mdc-menu-min-width': '100%',\n 'max-height': 'inherit',\n display: 'flex',\n 'min-width': '100%',\n width: 'fit-content',\n }}\n >\n <limel-list\n items={items}\n type={props.multiple ? 'checkbox' : 'selectable'}\n onChange={props.onMenuChange}\n />\n </limel-menu-surface>\n </limel-portal>\n );\n};\n\nconst NativeDropdown: FunctionalComponent<SelectTemplateProps> = (props) => {\n const options = props.options\n .filter((option): option is Option => !('separator' in option))\n .map(renderOption(props.value));\n\n return (\n <select\n required={props.required}\n aria-disabled={props.disabled}\n aria-required={props.required}\n onChange={props.onNativeChange}\n onFocus={props.open}\n onBlur={props.close}\n class=\"limel-select__native-control\"\n disabled={props.disabled}\n multiple={props.multiple}\n >\n {options}\n </select>\n );\n};\n\nconst renderOption = (selectedOption: Option | Option[]) => {\n return (option: Option) => {\n const { value, disabled, text } = option;\n\n return (\n <option\n key={value}\n value={value}\n selected={isSelected(option, selectedOption)}\n disabled={disabled}\n >\n {text}\n </option>\n );\n };\n};\n\nfunction isSelected(option: Option, value: Option | Option[]): boolean {\n if (!value) {\n return false;\n }\n\n if (isMultiple(value)) {\n return value.some((o) => option.value === o.value);\n }\n\n return option.value === value.value;\n}\n\nfunction createMenuItems(\n options: Array<Option | ListSeparator>,\n value: Option | Option[],\n selectIsRequired = false,\n): Array<ListItem<Option> | ListSeparator> {\n const menuOptionFilter = getMenuOptionFilter(selectIsRequired);\n\n return options.filter(menuOptionFilter).map((option) => {\n if ('separator' in option) {\n return {\n text: option.text,\n separator: true,\n };\n }\n\n const selected = isSelected(option, value);\n const { text, secondaryText, disabled } = option;\n const name = getIconName(option.icon);\n const color = getIconColor(option.icon, option.iconColor);\n\n if (!name) {\n return {\n text: text,\n secondaryText: secondaryText,\n selected: selected,\n disabled: disabled,\n value: option,\n };\n }\n\n return {\n text: text,\n secondaryText: secondaryText,\n selected: selected,\n disabled: disabled,\n value: option,\n icon: {\n name: name,\n color: color,\n },\n };\n });\n}\n\nfunction getMenuOptionFilter(selectIsRequired: boolean) {\n return (option: Option | ListSeparator) => {\n if (!selectIsRequired) {\n // If the select component is NOT required, we keep all options.\n return true;\n }\n\n if (option.text) {\n // If the select component IS required, we keep only options\n // that are not \"empty\". We only check the text property, because\n // some systems use an \"empty option\" that will have a value for\n // the `value` property, to signify \"no option selected\". Such\n // an option should be treated as \"empty\".\n return true;\n }\n\n if ('separator' in option) {\n return true;\n }\n };\n}\n\nfunction getSelectedText(value: Option | Option[], readonly: boolean): string {\n if ((!value || (isMultiple(value) && !value.length)) && readonly) {\n return '–';\n }\n\n if (!value) {\n return '';\n }\n\n if (isMultiple(value)) {\n return value.map((option) => option.text).join(', ');\n }\n\n return value.text;\n}\n\nfunction getSelectedIcon(value: any) {\n if (!value || !value.icon) {\n return '';\n }\n\n const name = getIconName(value.icon);\n const color = getIconColor(value.icon, value.iconColor);\n const style: any = {};\n if (color) {\n style.color = color;\n }\n\n return (\n <limel-icon\n class=\"limel-select__selected-option__icon\"\n name={name}\n size=\"medium\"\n style={style}\n />\n );\n}\n\nexport function triggerIconColorWarning(options: Option[]) {\n options.forEach((option) => {\n if (option.iconColor) {\n /* eslint-disable-next-line no-console */\n console.warn(\n \"The `iconColor` prop is deprecated now! Use the new `Icon` interface and instead of `iconColor: 'color-name'` write `icon {name: 'icon-name', color: 'color-name'}`.\",\n );\n }\n });\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"full-menu.js","sourceRoot":"","sources":["../../../../../src/components/text-editor/prosemirror-adapter/menu/full-menu.ts"],"names":[],"mappings":"AACA,OAAO,EAAe,QAAQ,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACnE,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAE3D;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,MAAc,EAAmB,EAAE;EAC7D,MAAM,SAAS,GAAG,cAAc,CAAC,MAAM,CAQtC,CAAC;EACF,MAAM,EAAE,UAAU,EAAE,oBAAoB,EAAE,GAAG,SAAS,CAAC;EACvD,MAAM,QAAQ,GAAG,UAAU,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;EAChD,MAAM,iBAAiB,GAAG,IAAI,QAAQ,iCAC/B,oBAAoB,CAAC,IAAI,KAC5B,KAAK,EAAE,IAAI,EACX,KAAK,EAAE,IAAI,IACb,CAAC;EACH,MAAM,cAAc,GAAG,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;EAC7C,MAAM,SAAS,GAAG,YAAY,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;EAEpD,OAAO;IACH,UAAU,CAAC,CAAC,CAAC;IACb,CAAC,iBAAiB,CAAC;IACnB,GAAG,QAAQ;IACX,cAAc;IACd,SAAS;GACZ,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,UAAU,GAAG,CACf,QAA+C,EAChC,EAAE;EACjB,MAAM,eAAe,GAAa,IAAI,QAAQ,CACzC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAyC,CAAC,OAAO,EACpE;IACI,KAAK,EAAE,GAAG;GACb,CACJ,CAAC;EAEF,OAAO,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;AAC3E,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,SAA0B,EAAiB,EAAE;EAC/D,4CAA4C;EAC5C,OAAO,CAAC,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;AACzC,CAAC,CAAC","sourcesContent":["import { Schema } from 'prosemirror-model';\nimport { MenuElement, Dropdown, MenuItem } from 'prosemirror-menu';\nimport { buildMenuItems } from 'prosemirror-example-setup';\n\n/**\n * Creates the full menu for the text editor\n * based on the default menu already in prosemirror-example-setup\n * @param schema - the schema to use for the menu\n *\n * @returns the default menu for the text editor\n */\nexport const buildFullMenu = (schema: Schema): MenuElement[][] => {\n const menuItems = buildMenuItems(schema) as unknown as {\n blockMenu: MenuElement[][];\n fullMenu: MenuElement[][];\n inlineMenu: MenuElement[][];\n insertHorizontalRule: MenuItem;\n typeMenu: Dropdown & {\n content: MenuElement[];\n };\n };\n const { inlineMenu, insertHorizontalRule } = menuItems;\n const typeMenu = getNewMenu(menuItems.typeMenu);\n const newHorizontalRule = new MenuItem({\n ...insertHorizontalRule.spec,\n title: 'hr',\n label: 'hr',\n });\n const historyButtons = menuItems.fullMenu[2];\n const blockMenu = getBlockMenu(menuItems.blockMenu);\n\n return [\n inlineMenu[0],\n [newHorizontalRule],\n ...typeMenu,\n historyButtons,\n blockMenu,\n ];\n};\n\nconst getNewMenu = (\n typeMenu: Dropdown & { content: MenuElement[] },\n): MenuElement[][] => {\n const headingDropdown: Dropdown = new Dropdown(\n (typeMenu.content[2] as Partial<{ content: MenuElement[] }>).content,\n {\n label: 'H',\n },\n );\n\n return [[typeMenu.content[0], typeMenu.content[1]], [headingDropdown]];\n};\n\nconst getBlockMenu = (blockMenu: MenuElement[][]): MenuElement[] => {\n // eslint-disable-next-line no-magic-numbers\n return [...blockMenu[0].slice(0, 5)];\n};\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"menu-filter.js","sourceRoot":"","sources":["../../../../../src/components/text-editor/prosemirror-adapter/menu/menu-filter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAyB,MAAM,kBAAkB,CAAC;AAGnE;;;;;GAKG;AACH,MAAM,QAAQ,GAAiC;EAC3C,MAAM,EAAE,qBAAqB;EAC7B,QAAQ,EAAE,iBAAiB;EAC3B,IAAI,EAAE,kBAAkB;EACxB,IAAI,EAAE,oBAAoB;EAC1B,iBAAiB,EAAE,IAAI;EACvB,SAAS,EAAE,qBAAqB;EAChC,YAAY,EAAE,sBAAsB;EACpC,WAAW,EAAE,qBAAqB;EAClC,WAAW,EAAE,qBAAqB;EAClC,WAAW,EAAE,qBAAqB;EAClC,WAAW,EAAE,qBAAqB;EAClC,WAAW,EAAE,qBAAqB;EAClC,WAAW,EAAE,qBAAqB;EAClC,IAAI,EAAE,kBAAkB;EACxB,IAAI,EAAE,yBAAyB;EAC/B,aAAa,EAAE,qBAAqB;EACpC,cAAc,EAAE,sBAAsB;EACtC,aAAa,EAAE,qBAAqB;EACpC,YAAY,EAAE,uBAAuB;EACrC,UAAU,EAAE,6BAA6B;CAC5C,CAAC;AAEF,MAAM,YAAY,GAAmB;EACjC,QAAQ;EACR,UAAU;EACV,MAAM;EACN,WAAW;EACX,WAAW;EACX,WAAW;EACX,WAAW;EACX,WAAW;EACX,WAAW;EACX,aAAa;EACb,aAAa;EACb,cAAc;CACjB,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAC3B,IAAmB,EACnB,KAAuC,EAC1B,EAAE;EACf,IAAI,SAAS,GAAa,YAAY,CAAC,GAAG,CACtC,CAAC,IAAkB,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,CACzC,CAAC;EAEF,IAAI,KAAK,KAAK,SAAS,EAAE;IACrB,SAAS,GAAG,SAAS,CAAC,MAAM,CACxB,KAAK,CAAC,GAAG,CAAC,CAAC,IAAkB,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CACpD,CAAC;GACL;EAED,OAAO,IAAI;KACN,MAAM,CAAC,CAAC,IAAiB,EAAE,EAAE;IAC1B,IAAI,UAAU,CAAC,IAAI,CAAC,EAAE;MAClB,OAAO,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,QAAQ,CACpC,IAAI,CAAC,IAAI,CAAC,KAAe,CAC5B,CAAC;KACL;SAAM,IAAI,UAAU,CAAC,IAAI,CAAC,EAAE;MACzB,OAAO,IAAI,CAAC;KACf;IAED,OAAO,KAAK,CAAC;EACjB,CAAC,CAAC;KACD,MAAM,CAAC,OAAO,CAAC;KACf,GAAG,CAAC,sBAAsB,CAAC,KAAK,CAAC,CAAC,CAAC;AAC5C,CAAC,CAAC;AAEF,MAAM,sBAAsB,GACxB,CAAC,KAA2B,EAAE,EAAE,CAAC,CAAC,IAAiB,EAAE,EAAE;EACnD,IAAI,UAAU,CAAC,IAAI,CAAC,EAAE;IAClB,OAAO,IAAI,QAAQ,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,EAAE,KAAK,CAAC,EAAE;MACtD,KAAK,EAAE,IAAI,CAAC,KAAK;KACpB,CAAC,CAAC;GACN;EAED,OAAO,IAAI,CAAC;AAChB,CAAC,CAAC;AAEN,MAAM,UAAU,GAAG,CAAC,IAAS,EAAoB,EAAE;EAC/C,OAAO,IAAI,CAAC,IAAI,KAAK,SAAS,CAAC;AACnC,CAAC,CAAC;AAEF,MAAM,UAAU,GAAG,CACf,IAAS,EACgD,EAAE;EAC3D,OAAO,IAAI,CAAC,OAAO,KAAK,SAAS,CAAC;AACtC,CAAC,CAAC","sourcesContent":["import { Dropdown, MenuElement, MenuItem } from 'prosemirror-menu';\nimport { EditorButton, EditorPluginButton } from './types';\n\n/**\n * The available items for the editor toolbar\n * The values must match the titles of the menuItem\n *\n * {@link MenuItem.spec}\n */\nconst allItems: Record<EditorButton, string> = {\n strong: 'Toggle strong style',\n emphasis: 'Toggle emphasis',\n code: 'Toggle code font',\n link: 'Add or remove link',\n 'horizontal rule': 'hr',\n paragraph: 'Change to paragraph',\n 'code block': 'Change to code block',\n 'heading 1': 'Change to heading 1',\n 'heading 2': 'Change to heading 2',\n 'heading 3': 'Change to heading 3',\n 'heading 4': 'Change to heading 4',\n 'heading 5': 'Change to heading 5',\n 'heading 6': 'Change to heading 6',\n undo: 'Undo last change',\n redo: 'Redo last undone change',\n 'bullet list': 'Wrap in bullet list',\n 'ordered list': 'Wrap in ordered list',\n 'block quote': 'Wrap in block quote',\n 'join above': 'Join with above block',\n 'lift out': 'Lift out of enclosing block',\n};\n\nconst defaultItems: EditorButton[] = [\n 'strong',\n 'emphasis',\n 'link',\n 'heading 1',\n 'heading 2',\n 'heading 3',\n 'heading 4',\n 'heading 5',\n 'heading 6',\n 'block quote',\n 'bullet list',\n 'ordered list',\n];\n\n/**\n * Filters the full menu recursively based on the items provided\n *\n * @param menu - The menu to filter\n * @param items - The menu items to display. If undefined, all items will be displayed\n * @returns The filtered menu\n */\nexport const getFilteredMenu = (\n menu: MenuElement[],\n items: EditorPluginButton[] | undefined,\n): MenuElement[] => {\n let menuItems: string[] = defaultItems.map(\n (item: EditorButton) => allItems[item],\n );\n\n if (items !== undefined) {\n menuItems = menuItems.concat(\n items.map((item: EditorButton) => allItems[item]),\n );\n }\n\n return menu\n .filter((item: MenuElement) => {\n if (isMenuItem(item)) {\n return Object.values(menuItems).includes(\n item.spec.title as string,\n );\n } else if (isDropdown(item)) {\n return true;\n }\n\n return false;\n })\n .filter(Boolean)\n .map(createFilteredDropdown(items));\n};\n\nconst createFilteredDropdown =\n (items: EditorPluginButton[]) => (item: MenuElement) => {\n if (isDropdown(item)) {\n return new Dropdown(getFilteredMenu(item.content, items), {\n label: item.label,\n });\n }\n\n return item;\n };\n\nconst isMenuItem = (item: any): item is MenuItem => {\n return item.spec !== undefined;\n};\n\nconst isDropdown = (\n item: any,\n): item is Dropdown & { content: MenuItem[]; label: string } => {\n return item.content !== undefined;\n};\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../src/components/text-editor/prosemirror-adapter/menu/types.ts"],"names":[],"mappings":"","sourcesContent":["/**\n * The `EditorButton` type is used to specify the type of buttons that can be used in the editor toolbar.\n * Each string represents a different button that can be added to the toolbar.\n *\n * The following buttons are available:\n * 'strong' - Button for making text bold.\n * 'emphasis' - Button for italicizing text.\n * 'link' - Button for adding a hyperlink.\n * 'heading 1 - Button for creating a level 1 heading.\n * 'heading 2 - Button for creating a level 2 heading.\n * 'heading 3 - Button for creating a level 3 heading.\n * 'heading 4 - Button for creating a level 4 heading.\n * 'heading 5 - Button for creating a level 5 heading.\n * 'heading 6 - Button for creating a level 6 heading.\n * 'block quote' - Button for creating a block quote.\n *\n * @beta\n */\nexport type EditorButton =\n | 'strong'\n | 'emphasis'\n | 'link'\n | 'heading 1'\n | 'heading 2'\n | 'heading 3'\n | 'heading 4'\n | 'heading 5'\n | 'heading 6'\n | 'block quote'\n | 'bullet list'\n | 'ordered list'\n | EditorPluginButton;\n\n/**\n * The `EditorPluginButton` type is used to specify the type of buttons that can be added to the editor toolbar.\n *\n * 'code' - Button for marking inline code.\n * 'horizontal rule' - Button for inserting a horizontal rule.\n * 'code block' - Button for creating a block of code.\n * 'paragraph'- Button for creating a new paragraph.\n * 'join above' - Button for joining the current block with the one above it.\n * 'lift out' - Button for lifting the current block out of its parent block.\n * 'undo' - Button for undoing the last action.\n * 'redo' - Button for redoing the last undone action.\n *\n * @beta\n */\nexport type EditorPluginButton =\n | 'code'\n | 'horizontal rule'\n | 'code block'\n | 'paragraph'\n | 'join above'\n | 'lift out'\n | 'undo'\n | 'redo';\n"]}
|
|
@@ -109,7 +109,7 @@
|
|
|
109
109
|
font-feature-settings: "liga" 0;
|
|
110
110
|
border-bottom-left-radius: 0.5rem;
|
|
111
111
|
border-bottom-right-radius: 0.5rem;
|
|
112
|
-
padding:
|
|
112
|
+
padding: var(--limel-text-editor-padding);
|
|
113
113
|
background-color: rgb(var(--contrast-100));
|
|
114
114
|
}
|
|
115
115
|
.ProseMirror [draggable][contenteditable=false] {
|
|
@@ -214,6 +214,9 @@ div#editor .ProseMirror-menubar {
|
|
|
214
214
|
div#editor .ProseMirror-menubar[style*="position: fixed"] {
|
|
215
215
|
box-shadow: 0 0.25rem 0.5rem -0.5rem rgb(var(--color-black), 0.8);
|
|
216
216
|
}
|
|
217
|
+
div#editor .ProseMirror-menubar-spacer {
|
|
218
|
+
display: none;
|
|
219
|
+
}
|
|
217
220
|
|
|
218
221
|
.ProseMirror-menubar {
|
|
219
222
|
position: relative;
|
|
@@ -8,15 +8,11 @@ import { exampleSetup } from 'prosemirror-example-setup';
|
|
|
8
8
|
import { buildFullMenu } from './menu/full-menu';
|
|
9
9
|
import { getFilteredMenu } from './menu/menu-filter';
|
|
10
10
|
/**
|
|
11
|
-
* The ProseMirror adapter offers a rich text editing experience with markdown support
|
|
12
|
-
*
|
|
13
|
-
* result as rich text in real-time. For instance, you can type `# Hello, world!`
|
|
14
|
-
* and see it directly turning to a heading 1 (an `<h1>` HTML element).
|
|
15
|
-
*
|
|
16
|
-
* Naturally, you can use standard keyboard hotkeys such as <kbd>Ctrl</kbd> + <kbd>B</kbd>
|
|
17
|
-
* to toggle bold text, <kbd>Ctrl</kbd> + <kbd>I</kbd> to toggle italic text, and so on.
|
|
11
|
+
* The ProseMirror adapter offers a rich text editing experience with markdown support.
|
|
12
|
+
* [Read more...](https://prosemirror.net/)
|
|
18
13
|
*
|
|
19
14
|
* @exampleComponent limel-example-prosemirror-adapter-basic
|
|
15
|
+
* @exampleComponent limel-example-prosemirror-adapter-with-custom-menu
|
|
20
16
|
* @beta
|
|
21
17
|
* @private
|
|
22
18
|
*/
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"prosemirror-adapter.js","sourceRoot":"","sources":["../../../../src/components/text-editor/prosemirror-adapter/prosemirror-adapter.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,SAAS,EACT,OAAO,EACP,KAAK,EAEL,IAAI,EACJ,KAAK,EACL,CAAC,GACJ,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAEzD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAErD;;;;;;;;GAQG;AAMH,MAAM,OAAO,kBAAkB;;IA6DnB,YAAO,GAAG,GAAW,EAAE;MAC3B,IAAI,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,WAAW,KAAK,EAAE,EAAE;QAClC,OAAO,EAAE,CAAC;OACb;WAAM;QACH,OAAO,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC;OAClC;IACL,CAAC,CAAC;;;;EAhDK,iBAAiB,KAAI,CAAC;EAEtB,MAAM;IACT,OAAO,WAAK,EAAE,EAAC,QAAQ,GAAG,CAAC;EAC/B,CAAC;EAEM,gBAAgB;IACnB,MAAM,QAAQ,GAAG,IAAI,MAAM,CAAC;MACxB,KAAK,EAAE,YAAY,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,kBAAkB,EAAE,OAAO,CAAC;MACnE,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK;KAC3B,CAAC,CAAC;IAEH,MAAM,IAAI,GAAoB,aAAa,CAAC,QAAQ,CAAC;OAChD,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,eAAe,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC;OACjD,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IAErC,IAAI,CAAC,IAAI,GAAG,IAAI,UAAU,CACtB,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,SAAS,CAAC,EAC7C;MACI,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC;QACtB,GAAG,EAAE,SAAS,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,KAAK,CACrC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,SAAS,CAAC,CAChD;QACD,OAAO,EAAE,YAAY,CAAC;UAClB,MAAM,EAAE,QAAQ;UAChB,WAAW,EAAE,IAAoB;SACpC,CAAC;OACL,CAAC;MACF,mBAAmB,EAAE,CAAC,WAAW,EAAE,EAAE;QACjC,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;QACpD,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;QAEhC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC;MACrC,CAAC;KACJ,CACJ,CAAC;IAEF,IAAI,IAAI,CAAC,KAAK,EAAE;MACZ,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC;KACxC;EACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CASJ","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n Prop,\n State,\n h,\n} from '@stencil/core';\nimport { EditorState } from 'prosemirror-state';\nimport { EditorView } from 'prosemirror-view';\nimport { Schema, DOMParser } from 'prosemirror-model';\nimport { schema } from 'prosemirror-schema-basic';\nimport { addListNodes } from 'prosemirror-schema-list';\nimport { exampleSetup } from 'prosemirror-example-setup';\nimport { MenuElement, MenuItem } from 'prosemirror-menu';\nimport { buildFullMenu } from './menu/full-menu';\nimport { getFilteredMenu } from './menu/menu-filter';\n\n/**\n * The ProseMirror adapter offers a rich text editing experience with markdown support.\n * [Read more...](https://prosemirror.net/)\n *\n * @exampleComponent limel-example-prosemirror-adapter-basic\n * @exampleComponent limel-example-prosemirror-adapter-with-custom-menu\n * @beta\n * @private\n */\n@Component({\n tag: 'limel-prosemirror-adapter',\n shadow: true,\n styleUrl: 'prosemirror-adapter.scss',\n})\nexport class ProsemirrorAdapter {\n /**\n * The value of the editor, expected to be serialised HTML\n */\n @Prop()\n public value: string;\n\n @Element()\n private host: HTMLLimelTextEditorElement;\n\n @State()\n private view: EditorView;\n\n /**\n * Dispatched when a change is made to the editor\n */\n @Event()\n private change: EventEmitter<string>;\n\n public componentWillLoad() {}\n\n public render() {\n return <div id=\"editor\" />;\n }\n\n public componentDidLoad() {\n const mySchema = new Schema({\n nodes: addListNodes(schema.spec.nodes, 'paragraph block*', 'block'),\n marks: schema.spec.marks,\n });\n\n const menu: MenuElement[][] = buildFullMenu(mySchema)\n .map((items) => getFilteredMenu(items, undefined))\n .filter((items) => items.length);\n\n this.view = new EditorView(\n this.host.shadowRoot.querySelector('#editor'),\n {\n state: EditorState.create({\n doc: DOMParser.fromSchema(mySchema).parse(\n this.host.shadowRoot.querySelector('#editor'),\n ),\n plugins: exampleSetup({\n schema: mySchema,\n menuContent: menu as MenuItem[][],\n }),\n }),\n dispatchTransaction: (transaction) => {\n const newState = this.view.state.apply(transaction);\n this.view.updateState(newState);\n\n this.change.emit(this.getHTML());\n },\n },\n );\n\n if (this.value) {\n this.view.dom.innerHTML = this.value;\n }\n }\n\n private getHTML = (): string => {\n if (this.view.dom.textContent === '') {\n return '';\n } else {\n return this.view.dom.innerHTML;\n }\n };\n}\n"]}
|
|
@@ -1,9 +1,16 @@
|
|
|
1
1
|
import { h } from '@stencil/core';
|
|
2
2
|
/**
|
|
3
|
-
* A rich text editor that
|
|
4
|
-
*
|
|
3
|
+
* A rich text editor that offers a rich text editing experience with markdown support,
|
|
4
|
+
* in the sense that you can easily type markdown syntax and see the rendered
|
|
5
|
+
* result as rich text in real-time. For instance, you can type `# Hello, world!`
|
|
6
|
+
* and see it directly turning to a heading 1 (an `<h1>` HTML element).
|
|
7
|
+
*
|
|
8
|
+
* Naturally, you can use standard keyboard hotkeys such as <kbd>Ctrl</kbd> + <kbd>B</kbd>
|
|
9
|
+
* to toggle bold text, <kbd>Ctrl</kbd> + <kbd>I</kbd> to toggle italic text, and so on.
|
|
5
10
|
*
|
|
6
11
|
* @exampleComponent limel-example-text-editor-basic
|
|
12
|
+
* @exampleComponent limel-example-text-editor-as-form-component
|
|
13
|
+
* @exampleComponent limel-example-text-editor-composite
|
|
7
14
|
* @beta
|
|
8
15
|
* @private
|
|
9
16
|
*/
|
|
@@ -22,6 +29,12 @@ export class TextEditor {
|
|
|
22
29
|
this.value = undefined;
|
|
23
30
|
}
|
|
24
31
|
render() {
|
|
32
|
+
return this.renderEditor();
|
|
33
|
+
}
|
|
34
|
+
renderEditor() {
|
|
35
|
+
if (this.readonly) {
|
|
36
|
+
return h("limel-markdown", { value: this.value });
|
|
37
|
+
}
|
|
25
38
|
return (h("limel-prosemirror-adapter", { onChange: this.handleChange, value: this.value }));
|
|
26
39
|
}
|
|
27
40
|
static get is() { return "limel-text-editor"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"text-editor.js","sourceRoot":"","sources":["../../../src/components/text-editor/text-editor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAExE
|
|
1
|
+
{"version":3,"file":"text-editor.js","sourceRoot":"","sources":["../../../src/components/text-editor/text-editor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAExE;;;;;;;;;;;;;;GAcG;AAMH,MAAM,OAAO,UAAU;;IA6EX,iBAAY,GAAG,GAAG,EAAE,CAAC,CAAC,KAA0B,EAAE,EAAE;MACxD,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IACnC,CAAC,CAAC;;;;;;;;;EApBK,MAAM;IACT,OAAO,IAAI,CAAC,YAAY,EAAE,CAAC;EAC/B,CAAC;EAEO,YAAY;IAChB,IAAI,IAAI,CAAC,QAAQ,EAAE;MACf,OAAO,sBAAgB,KAAK,EAAE,IAAI,CAAC,KAAK,GAAI,CAAC;KAChD;IAED,OAAO,CACH,iCACI,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,KAAK,EAAE,IAAI,CAAC,KAAK,GACnB,CACL,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAMJ","sourcesContent":["import { Component, Event, EventEmitter, Prop, h } from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\n/**\n * A rich text editor that offers a rich text editing experience with markdown support,\n * in the sense that you can easily type markdown syntax and see the rendered\n * result as rich text in real-time. For instance, you can type `# Hello, world!`\n * and see it directly turning to a heading 1 (an `<h1>` HTML element).\n *\n * Naturally, you can use standard keyboard hotkeys such as <kbd>Ctrl</kbd> + <kbd>B</kbd>\n * to toggle bold text, <kbd>Ctrl</kbd> + <kbd>I</kbd> to toggle italic text, and so on.\n *\n * @exampleComponent limel-example-text-editor-basic\n * @exampleComponent limel-example-text-editor-as-form-component\n * @exampleComponent limel-example-text-editor-composite\n * @beta\n * @private\n */\n@Component({\n tag: 'limel-text-editor',\n shadow: true,\n styleUrl: 'text-editor.scss',\n})\nexport class TextEditor implements FormComponent<string> {\n /**\n * Set to `true` to disable the field.\n * Use `disabled` to indicate that the field can normally be interacted\n * with, but is currently disabled. This tells the user that if certain\n * requirements are met, the field may become enabled again.\n */\n @Prop({ reflect: true })\n public disabled?: boolean;\n\n /**\n * Set to `true` to make the component read-only.\n * Use `readonly` when the field is only there to present the data it holds,\n * and will not become possible for the current user to edit.\n * :::note\n * Consider that it might be better to use `limel-markdown`\n * instead of `limel-text-editor` when the goal is visualizing data.\n * :::\n */\n @Prop({ reflect: true })\n public readonly?: boolean;\n\n /**\n * Optional helper text to display below the input field when it has focus\n */\n @Prop({ reflect: true })\n public helperText?: string;\n\n /**\n * The placeholder text shown inside the input field,\n * when the field is empty.\n */\n @Prop({ reflect: true })\n public placeholder?: string;\n\n /**\n * The label of the editor\n */\n @Prop({ reflect: true })\n public label?: string;\n\n /**\n * Set to `true` to indicate that the current value of the editor is\n * invalid.\n */\n @Prop({ reflect: true })\n public invalid?: boolean;\n\n /**\n * Description of the text inside the editor as serialised HTML\n */\n @Prop({ reflect: true })\n public value: string;\n\n /**\n * Dispatched when a change is made to the editor\n */\n @Event()\n public change: EventEmitter<string>;\n\n public render() {\n return this.renderEditor();\n }\n\n private renderEditor() {\n if (this.readonly) {\n return <limel-markdown value={this.value} />;\n }\n\n return (\n <limel-prosemirror-adapter\n onChange={this.handleChange}\n value={this.value}\n />\n );\n }\n\n private handleChange = () => (event: CustomEvent<string>) => {\n event.stopPropagation();\n this.change.emit(event.detail);\n };\n}\n"]}
|
|
@@ -17,7 +17,7 @@ const patchBrowser = () => {
|
|
|
17
17
|
};
|
|
18
18
|
|
|
19
19
|
patchBrowser().then(options => {
|
|
20
|
-
return bootstrapLazy(JSON.parse("[[\"limel-action-bar\",[[1,\"limel-action-bar\",{\"actions\":[16],\"accessibleLabel\":[513,\"accessible-label\"],\"layout\":[513],\"openDirection\":[513,\"open-direction\"],\"overflowCutoff\":[32]}]]],[\"limel-split-button\",[[1,\"limel-split-button\",{\"label\":[513],\"primary\":[516],\"icon\":[513],\"disabled\":[516],\"items\":[16]}]]],[\"limel-file-viewer\",[[1,\"limel-file-viewer\",{\"url\":[513],\"filename\":[513],\"alt\":[513],\"allowFullscreen\":[516,\"allow-fullscreen\"],\"allowOpenInNewTab\":[516,\"allow-open-in-new-tab\"],\"allowDownload\":[516,\"allow-download\"],\"language\":[1],\"officeViewer\":[513,\"office-viewer\"],\"actions\":[16],\"isFullscreen\":[32],\"fileType\":[32],\"loading\":[32],\"fileUrl\":[32]}]]],[\"limel-color-picker\",[[1,\"limel-color-picker\",{\"value\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"tooltipLabel\":[513,\"tooltip-label\"],\"required\":[516],\"readonly\":[516],\"isOpen\":[32]}]]],[\"limel-picker\",[[1,\"limel-picker\",{\"disabled\":[4],\"readonly\":[516],\"label\":[1],\"searchLabel\":[1,\"search-label\"],\"helperText\":[513,\"helper-text\"],\"leadingIcon\":[1,\"leading-icon\"],\"emptyResultMessage\":[1,\"empty-result-message\"],\"required\":[4],\"invalid\":[516],\"value\":[16],\"searcher\":[16],\"multiple\":[4],\"delimiter\":[513],\"actions\":[16],\"actionPosition\":[1,\"action-position\"],\"actionScrollBehavior\":[1,\"action-scroll-behavior\"],\"badgeIcons\":[516,\"badge-icons\"],\"items\":[32],\"textValue\":[32],\"loading\":[32],\"chips\":[32]}]]],[\"limel-date-picker\",[[1,\"limel-date-picker\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"label\":[513],\"placeholder\":[513],\"helperText\":[513,\"helper-text\"],\"required\":[516],\"value\":[16],\"type\":[513],\"format\":[513],\"language\":[513],\"formatter\":[16],\"formattedValue\":[32],\"internalFormat\":[32],\"showPortal\":[32]}]]],[\"limel-dock\",[[1,\"limel-dock\",{\"dockItems\":[16],\"dockFooterItems\":[16],\"accessibleLabel\":[513,\"accessible-label\"],\"expanded\":[516],\"allowResize\":[516,\"allow-resize\"],\"mobileBreakPoint\":[514,\"mobile-break-point\"],\"useMobileLayout\":[32]}]]],[\"limel-file\",[[1,\"limel-file\",{\"value\":[16],\"label\":[513],\"required\":[516],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"accept\":[513],\"language\":[1]}]]],[\"limel-snackbar\",[[1,\"limel-snackbar\",{\"message\":[1],\"timeout\":[2],\"actionText\":[1,\"action-text\"],\"dismissible\":[4],\"multiline\":[4],\"language\":[1],\"show\":[64]}]]],[\"limel-tab-panel\",[[1,\"limel-tab-panel\",{\"tabs\":[1040]}]]],[\"limel-select\",[[1,\"limel-select\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"required\":[516],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"value\":[16],\"options\":[16],\"multiple\":[4],\"menuOpen\":[32]}]]],[\"limel-button-group\",[[1,\"limel-button-group\",{\"value\":[16],\"disabled\":[516],\"selectedButtonId\":[32]}]]],[\"limel-collapsible-section\",[[1,\"limel-collapsible-section\",{\"isOpen\":[1540,\"is-open\"],\"header\":[513],\"actions\":[16]}]]],[\"limel-help\",[[1,\"limel-help\",{\"value\":[1],\"trigger\":[1],\"readMoreLink\":[16],\"openDirection\":[513,\"open-direction\"],\"isOpen\":[32]}]]],[\"limel-table\",[[1,\"limel-table\",{\"data\":[16],\"columns\":[16],\"mode\":[1],\"layout\":[1],\"pageSize\":[2,\"page-size\"],\"totalRows\":[2,\"total-rows\"],\"sorting\":[16],\"activeRow\":[1040],\"movableColumns\":[4,\"movable-columns\"],\"loading\":[4],\"page\":[2],\"emptyMessage\":[1,\"empty-message\"],\"aggregates\":[16],\"selectable\":[4],\"selection\":[16]}]]],[\"limel-circular-progress\",[[1,\"limel-circular-progress\",{\"value\":[2],\"maxValue\":[2,\"max-value\"],\"prefix\":[513],\"suffix\":[1],\"displayPercentageColors\":[4,\"display-percentage-colors\"],\"size\":[513]}]]],[\"limel-info-tile\",[[1,\"limel-info-tile\",{\"value\":[520],\"icon\":[1],\"label\":[513],\"prefix\":[513],\"suffix\":[513],\"disabled\":[516],\"badge\":[520],\"loading\":[516],\"link\":[16],\"progress\":[16]}]]],[\"limel-switch\",[[1,\"limel-switch\",{\"label\":[513],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"value\":[516],\"helperText\":[513,\"helper-text\"],\"readonlyLabels\":[16],\"fieldId\":[32]}]]],[\"limel-header\",[[1,\"limel-header\",{\"icon\":[1],\"heading\":[1],\"subheading\":[1],\"supportingText\":[1,\"supporting-text\"],\"subheadingDivider\":[1,\"subheading-divider\"]}]]],[\"limel-dialog\",[[1,\"limel-dialog\",{\"heading\":[1],\"fullscreen\":[516],\"open\":[1540],\"closingActions\":[16]}]]],[\"limel-progress-flow\",[[1,\"limel-progress-flow\",{\"flowItems\":[16],\"disabled\":[4],\"readonly\":[4]}]]],[\"limel-shortcut\",[[1,\"limel-shortcut\",{\"icon\":[513],\"label\":[513],\"disabled\":[516],\"badge\":[520],\"link\":[16]}]]],[\"limel-banner\",[[1,\"limel-banner\",{\"message\":[513],\"icon\":[513],\"isOpen\":[32],\"open\":[64],\"close\":[64]}]]],[\"limel-callout\",[[1,\"limel-callout\",{\"heading\":[513],\"icon\":[513],\"type\":[513],\"language\":[1]}]]],[\"limel-slider\",[[1,\"limel-slider\",{\"disabled\":[516],\"readonly\":[516],\"factor\":[514],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"unit\":[513],\"value\":[514],\"valuemax\":[514],\"valuemin\":[514],\"step\":[514],\"percentageClass\":[32]}]]],[\"limel-text-editor\",[[1,\"limel-text-editor\",{\"disabled\":[516],\"readonly\":[516],\"helperText\":[513,\"helper-text\"],\"placeholder\":[513],\"label\":[513],\"invalid\":[516],\"value\":[513]}]]],[\"limel-code-editor\",[[1,\"limel-code-editor\",{\"value\":[1],\"language\":[1],\"readonly\":[4],\"lineNumbers\":[4,\"line-numbers\"],\"fold\":[4],\"lint\":[4],\"colorScheme\":[1,\"color-scheme\"],\"random\":[32]}]]],[\"limel-config\",[[1,\"limel-config\",{\"config\":[16]}]]],[\"limel-flex-container\",[[1,\"limel-flex-container\",{\"direction\":[513],\"justify\":[513],\"align\":[513],\"reverse\":[516]}]]],[\"limel-form\",[[1,\"limel-form\",{\"schema\":[16],\"value\":[16],\"disabled\":[4],\"propsFactory\":[16],\"transformErrors\":[16],\"errors\":[16]}]]],[\"limel-grid\",[[1,\"limel-grid\"]]],[\"limel-icon\",[[1,\"limel-icon\",{\"size\":[513],\"name\":[513],\"badge\":[516]}]]],[\"limel-color-picker-palette\",[[17,\"limel-color-picker-palette\",{\"value\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"required\":[516]}]]],[\"limel-dock-button\",[[0,\"limel-dock-button\",{\"item\":[16],\"expanded\":[516],\"useMobileLayout\":[516,\"use-mobile-layout\"],\"isOpen\":[32]}]]],[\"limel-icon-button\",[[1,\"limel-icon-button\",{\"icon\":[513],\"elevated\":[516],\"label\":[513],\"disabled\":[516]}]]],[\"limel-tab-bar\",[[1,\"limel-tab-bar\",{\"tabs\":[1040],\"canScrollLeft\":[32],\"canScrollRight\":[32]},[[9,\"resize\",\"handleWindowResize\"]]]]],[\"limel-checkbox\",[[1,\"limel-checkbox\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"checked\":[516],\"indeterminate\":[516],\"required\":[516],\"readonlyLabels\":[16],\"modified\":[32]}]]],[\"limel-help-content\",[[1,\"limel-help-content\",{\"value\":[1],\"readMoreLink\":[16]}]]],[\"limel-progress-flow-item\",[[0,\"limel-progress-flow-item\",{\"item\":[16],\"disabled\":[4],\"readonly\":[4],\"currentStep\":[4,\"current-step\"]}]]],[\"limel-flatpickr-adapter\",[[1,\"limel-flatpickr-adapter\",{\"value\":[16],\"type\":[1],\"format\":[1],\"isOpen\":[4,\"is-open\"],\"inputElement\":[16],\"language\":[1],\"formatter\":[16]}]]],[\"limel-prosemirror-adapter\",[[1,\"limel-prosemirror-adapter\",{\"value\":[1],\"view\":[32]}]]],[\"limel-breadcrumbs_3\",[[1,\"limel-menu\",{\"items\":[16],\"disabled\":[516],\"openDirection\":[513,\"open-direction\"],\"surfaceWidth\":[513,\"surface-width\"],\"open\":[1540],\"badgeIcons\":[516,\"badge-icons\"],\"gridLayout\":[516,\"grid-layout\"],\"loading\":[516],\"currentSubMenu\":[1040],\"rootItem\":[16],\"searcher\":[16],\"emptyResultMessage\":[1,\"empty-result-message\"],\"loadingSubItems\":[32],\"searchValue\":[32],\"searchResults\":[32]}],[1,\"limel-breadcrumbs\",{\"items\":[16],\"divider\":[1]}],[1,\"limel-menu-list\",{\"items\":[16],\"badgeIcons\":[4,\"badge-icons\"],\"iconSize\":[1,\"icon-size\"],\"type\":[1],\"maxLinesSecondaryText\":[2,\"max-lines-secondary-text\"]}]]],[\"limel-action-bar-item_2\",[[0,\"limel-action-bar-overflow-menu\",{\"items\":[16],\"openDirection\":[513,\"open-direction\"]}],[0,\"limel-action-bar-item\",{\"item\":[16],\"isVisible\":[516,\"is-visible\"]}]]],[\"limel-button\",[[1,\"limel-button\",{\"label\":[513],\"primary\":[516],\"outlined\":[516],\"icon\":[513],\"disabled\":[516],\"loading\":[516],\"loadingFailed\":[516,\"loading-failed\"],\"justLoaded\":[32]}]]],[\"limel-file-dropzone_2\",[[1,\"limel-file-dropzone\",{\"accept\":[513],\"disabled\":[4],\"text\":[1],\"helperText\":[1,\"helper-text\"],\"hasFileToDrop\":[32]}],[1,\"limel-file-input\",{\"accept\":[513],\"disabled\":[516],\"multiple\":[516]}]]],[\"limel-markdown\",[[1,\"limel-markdown\",{\"value\":[1]}]]],[\"limel-linear-progress\",[[1,\"limel-linear-progress\",{\"value\":[514],\"indeterminate\":[516]}]]],[\"limel-chip_2\",[[1,\"limel-chip-set\",{\"value\":[16],\"type\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"inputType\":[513,\"input-type\"],\"maxItems\":[514,\"max-items\"],\"required\":[516],\"searchLabel\":[513,\"search-label\"],\"emptyInputOnBlur\":[516,\"empty-input-on-blur\"],\"clearAllButton\":[4,\"clear-all-button\"],\"leadingIcon\":[513,\"leading-icon\"],\"delimiter\":[513],\"language\":[1],\"editMode\":[32],\"textValue\":[32],\"blurred\":[32],\"inputChipIndexSelected\":[32],\"selectedChipIds\":[32],\"getEditMode\":[64],\"setFocus\":[64],\"emptyInput\":[64]}],[1,\"limel-chip\",{\"language\":[513],\"text\":[513],\"icon\":[1],\"link\":[16],\"badge\":[520],\"disabled\":[516],\"readonly\":[516],\"selected\":[516],\"invalid\":[516],\"removable\":[516],\"type\":[513],\"loading\":[516],\"progress\":[514],\"identifier\":[520]}]]],[\"limel-popover_2\",[[1,\"limel-popover\",{\"open\":[4],\"openDirection\":[513,\"open-direction\"]}],[1,\"limel-popover-surface\",{\"contentCollection\":[16]}]]],[\"limel-spinner\",[[1,\"limel-spinner\",{\"size\":[513],\"limeBranded\":[4,\"lime-branded\"]}]]],[\"limel-badge\",[[1,\"limel-badge\",{\"label\":[520]}]]],[\"limel-dynamic-label_2\",[[1,\"limel-dynamic-label\",{\"value\":[8],\"defaultLabel\":[16],\"labels\":[16]}],[1,\"limel-helper-line\",{\"helperText\":[513,\"helper-text\"],\"length\":[514],\"maxLength\":[514,\"max-length\"],\"invalid\":[516],\"helperTextId\":[513,\"helper-text-id\"]}]]],[\"limel-portal_3\",[[1,\"limel-tooltip\",{\"elementId\":[513,\"element-id\"],\"label\":[513],\"helperLabel\":[513,\"helper-label\"],\"maxlength\":[514],\"openDirection\":[513,\"open-direction\"],\"open\":[32]}],[1,\"limel-tooltip-content\",{\"label\":[513],\"helperLabel\":[513,\"helper-label\"],\"maxlength\":[514]}],[1,\"limel-portal\",{\"openDirection\":[513,\"open-direction\"],\"position\":[513],\"containerId\":[513,\"container-id\"],\"containerStyle\":[16],\"parent\":[16],\"inheritParentWidth\":[516,\"inherit-parent-width\"],\"visible\":[516],\"anchor\":[16]}]]],[\"limel-input-field_3\",[[1,\"limel-input-field\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"label\":[513],\"placeholder\":[513],\"helperText\":[513,\"helper-text\"],\"prefix\":[513],\"suffix\":[513],\"required\":[516],\"value\":[513],\"trailingIcon\":[513,\"trailing-icon\"],\"leadingIcon\":[513,\"leading-icon\"],\"pattern\":[513],\"type\":[513],\"formatNumber\":[516,\"format-number\"],\"step\":[520],\"max\":[514],\"min\":[514],\"maxlength\":[514],\"minlength\":[514],\"completions\":[16],\"showLink\":[516,\"show-link\"],\"locale\":[513],\"isFocused\":[32],\"isModified\":[32],\"showCompletions\":[32]}],[1,\"limel-list\",{\"items\":[16],\"badgeIcons\":[4,\"badge-icons\"],\"iconSize\":[1,\"icon-size\"],\"type\":[1],\"maxLinesSecondaryText\":[2,\"max-lines-secondary-text\"]}],[1,\"limel-menu-surface\",{\"open\":[4],\"allowClicksElement\":[16]}]]]]"), options);
|
|
20
|
+
return bootstrapLazy(JSON.parse("[[\"limel-action-bar\",[[1,\"limel-action-bar\",{\"actions\":[16],\"accessibleLabel\":[513,\"accessible-label\"],\"layout\":[513],\"openDirection\":[513,\"open-direction\"],\"overflowCutoff\":[32]}]]],[\"limel-split-button\",[[1,\"limel-split-button\",{\"label\":[513],\"primary\":[516],\"icon\":[513],\"disabled\":[516],\"items\":[16]}]]],[\"limel-file-viewer\",[[1,\"limel-file-viewer\",{\"url\":[513],\"filename\":[513],\"alt\":[513],\"allowFullscreen\":[516,\"allow-fullscreen\"],\"allowOpenInNewTab\":[516,\"allow-open-in-new-tab\"],\"allowDownload\":[516,\"allow-download\"],\"language\":[1],\"officeViewer\":[513,\"office-viewer\"],\"actions\":[16],\"isFullscreen\":[32],\"fileType\":[32],\"loading\":[32],\"fileUrl\":[32]}]]],[\"limel-color-picker\",[[1,\"limel-color-picker\",{\"value\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"tooltipLabel\":[513,\"tooltip-label\"],\"required\":[516],\"readonly\":[516],\"isOpen\":[32]}]]],[\"limel-picker\",[[1,\"limel-picker\",{\"disabled\":[4],\"readonly\":[516],\"label\":[1],\"searchLabel\":[1,\"search-label\"],\"helperText\":[513,\"helper-text\"],\"leadingIcon\":[1,\"leading-icon\"],\"emptyResultMessage\":[1,\"empty-result-message\"],\"required\":[4],\"invalid\":[516],\"value\":[16],\"searcher\":[16],\"multiple\":[4],\"delimiter\":[513],\"actions\":[16],\"actionPosition\":[1,\"action-position\"],\"actionScrollBehavior\":[1,\"action-scroll-behavior\"],\"badgeIcons\":[516,\"badge-icons\"],\"items\":[32],\"textValue\":[32],\"loading\":[32],\"chips\":[32]}]]],[\"limel-date-picker\",[[1,\"limel-date-picker\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"label\":[513],\"placeholder\":[513],\"helperText\":[513,\"helper-text\"],\"required\":[516],\"value\":[16],\"type\":[513],\"format\":[513],\"language\":[513],\"formatter\":[16],\"formattedValue\":[32],\"internalFormat\":[32],\"showPortal\":[32]}]]],[\"limel-dock\",[[1,\"limel-dock\",{\"dockItems\":[16],\"dockFooterItems\":[16],\"accessibleLabel\":[513,\"accessible-label\"],\"expanded\":[516],\"allowResize\":[516,\"allow-resize\"],\"mobileBreakPoint\":[514,\"mobile-break-point\"],\"useMobileLayout\":[32]}]]],[\"limel-file\",[[1,\"limel-file\",{\"value\":[16],\"label\":[513],\"required\":[516],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"accept\":[513],\"language\":[1]}]]],[\"limel-snackbar\",[[1,\"limel-snackbar\",{\"message\":[1],\"timeout\":[2],\"actionText\":[1,\"action-text\"],\"dismissible\":[4],\"multiline\":[4],\"language\":[1],\"show\":[64]}]]],[\"limel-tab-panel\",[[1,\"limel-tab-panel\",{\"tabs\":[1040]}]]],[\"limel-select\",[[1,\"limel-select\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"required\":[516],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"value\":[16],\"options\":[16],\"multiple\":[4],\"menuOpen\":[32]}]]],[\"limel-button-group\",[[1,\"limel-button-group\",{\"value\":[16],\"disabled\":[516],\"selectedButtonId\":[32]}]]],[\"limel-collapsible-section\",[[1,\"limel-collapsible-section\",{\"isOpen\":[1540,\"is-open\"],\"header\":[513],\"actions\":[16]}]]],[\"limel-help\",[[1,\"limel-help\",{\"value\":[1],\"trigger\":[1],\"readMoreLink\":[16],\"openDirection\":[513,\"open-direction\"],\"isOpen\":[32]}]]],[\"limel-table\",[[1,\"limel-table\",{\"data\":[16],\"columns\":[16],\"mode\":[1],\"layout\":[1],\"pageSize\":[2,\"page-size\"],\"totalRows\":[2,\"total-rows\"],\"sorting\":[16],\"activeRow\":[1040],\"movableColumns\":[4,\"movable-columns\"],\"loading\":[4],\"page\":[2],\"emptyMessage\":[1,\"empty-message\"],\"aggregates\":[16],\"selectable\":[4],\"selection\":[16]}]]],[\"limel-circular-progress\",[[1,\"limel-circular-progress\",{\"value\":[2],\"maxValue\":[2,\"max-value\"],\"prefix\":[513],\"suffix\":[1],\"displayPercentageColors\":[4,\"display-percentage-colors\"],\"size\":[513]}]]],[\"limel-icon\",[[1,\"limel-icon\",{\"size\":[513],\"name\":[513],\"badge\":[516]}]]],[\"limel-info-tile\",[[1,\"limel-info-tile\",{\"value\":[520],\"icon\":[1],\"label\":[513],\"prefix\":[513],\"suffix\":[513],\"disabled\":[516],\"badge\":[520],\"loading\":[516],\"link\":[16],\"progress\":[16]}]]],[\"limel-switch\",[[1,\"limel-switch\",{\"label\":[513],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"value\":[516],\"helperText\":[513,\"helper-text\"],\"readonlyLabels\":[16],\"fieldId\":[32]}]]],[\"limel-header\",[[1,\"limel-header\",{\"icon\":[1],\"heading\":[1],\"subheading\":[1],\"supportingText\":[1,\"supporting-text\"],\"subheadingDivider\":[1,\"subheading-divider\"]}]]],[\"limel-dialog\",[[1,\"limel-dialog\",{\"heading\":[1],\"fullscreen\":[516],\"open\":[1540],\"closingActions\":[16]}]]],[\"limel-progress-flow\",[[1,\"limel-progress-flow\",{\"flowItems\":[16],\"disabled\":[4],\"readonly\":[4]}]]],[\"limel-shortcut\",[[1,\"limel-shortcut\",{\"icon\":[513],\"label\":[513],\"disabled\":[516],\"badge\":[520],\"link\":[16]}]]],[\"limel-text-editor\",[[1,\"limel-text-editor\",{\"disabled\":[516],\"readonly\":[516],\"helperText\":[513,\"helper-text\"],\"placeholder\":[513],\"label\":[513],\"invalid\":[516],\"value\":[513]}]]],[\"limel-banner\",[[1,\"limel-banner\",{\"message\":[513],\"icon\":[513],\"isOpen\":[32],\"open\":[64],\"close\":[64]}]]],[\"limel-callout\",[[1,\"limel-callout\",{\"heading\":[513],\"icon\":[513],\"type\":[513],\"language\":[1]}]]],[\"limel-badge\",[[1,\"limel-badge\",{\"label\":[520]}]]],[\"limel-dynamic-label_2\",[[1,\"limel-dynamic-label\",{\"value\":[8],\"defaultLabel\":[16],\"labels\":[16]}],[1,\"limel-helper-line\",{\"helperText\":[513,\"helper-text\"],\"length\":[514],\"maxLength\":[514,\"max-length\"],\"invalid\":[516],\"helperTextId\":[513,\"helper-text-id\"]}]]],[\"limel-slider\",[[1,\"limel-slider\",{\"disabled\":[516],\"readonly\":[516],\"factor\":[514],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"unit\":[513],\"value\":[514],\"valuemax\":[514],\"valuemin\":[514],\"step\":[514],\"percentageClass\":[32]}]]],[\"limel-code-editor\",[[1,\"limel-code-editor\",{\"value\":[1],\"language\":[1],\"readonly\":[4],\"lineNumbers\":[4,\"line-numbers\"],\"fold\":[4],\"lint\":[4],\"colorScheme\":[1,\"color-scheme\"],\"random\":[32]}]]],[\"limel-config\",[[1,\"limel-config\",{\"config\":[16]}]]],[\"limel-flex-container\",[[1,\"limel-flex-container\",{\"direction\":[513],\"justify\":[513],\"align\":[513],\"reverse\":[516]}]]],[\"limel-form\",[[1,\"limel-form\",{\"schema\":[16],\"value\":[16],\"disabled\":[4],\"propsFactory\":[16],\"transformErrors\":[16],\"errors\":[16]}]]],[\"limel-grid\",[[1,\"limel-grid\"]]],[\"limel-color-picker-palette\",[[17,\"limel-color-picker-palette\",{\"value\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"required\":[516]}]]],[\"limel-dock-button\",[[0,\"limel-dock-button\",{\"item\":[16],\"expanded\":[516],\"useMobileLayout\":[516,\"use-mobile-layout\"],\"isOpen\":[32]}]]],[\"limel-icon-button\",[[1,\"limel-icon-button\",{\"icon\":[513],\"elevated\":[516],\"label\":[513],\"disabled\":[516]}]]],[\"limel-tab-bar\",[[1,\"limel-tab-bar\",{\"tabs\":[1040],\"canScrollLeft\":[32],\"canScrollRight\":[32]},[[9,\"resize\",\"handleWindowResize\"]]]]],[\"limel-checkbox\",[[1,\"limel-checkbox\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"checked\":[516],\"indeterminate\":[516],\"required\":[516],\"readonlyLabels\":[16],\"modified\":[32]}]]],[\"limel-help-content\",[[1,\"limel-help-content\",{\"value\":[1],\"readMoreLink\":[16]}]]],[\"limel-progress-flow-item\",[[0,\"limel-progress-flow-item\",{\"item\":[16],\"disabled\":[4],\"readonly\":[4],\"currentStep\":[4,\"current-step\"]}]]],[\"limel-flatpickr-adapter\",[[1,\"limel-flatpickr-adapter\",{\"value\":[16],\"type\":[1],\"format\":[1],\"isOpen\":[4,\"is-open\"],\"inputElement\":[16],\"language\":[1],\"formatter\":[16]}]]],[\"limel-prosemirror-adapter\",[[1,\"limel-prosemirror-adapter\",{\"value\":[1],\"view\":[32]}]]],[\"limel-breadcrumbs_3\",[[1,\"limel-menu\",{\"items\":[16],\"disabled\":[516],\"openDirection\":[513,\"open-direction\"],\"surfaceWidth\":[513,\"surface-width\"],\"open\":[1540],\"badgeIcons\":[516,\"badge-icons\"],\"gridLayout\":[516,\"grid-layout\"],\"loading\":[516],\"currentSubMenu\":[1040],\"rootItem\":[16],\"searcher\":[16],\"emptyResultMessage\":[1,\"empty-result-message\"],\"loadingSubItems\":[32],\"searchValue\":[32],\"searchResults\":[32]}],[1,\"limel-breadcrumbs\",{\"items\":[16],\"divider\":[1]}],[1,\"limel-menu-list\",{\"items\":[16],\"badgeIcons\":[4,\"badge-icons\"],\"iconSize\":[1,\"icon-size\"],\"type\":[1],\"maxLinesSecondaryText\":[2,\"max-lines-secondary-text\"]}]]],[\"limel-action-bar-item_2\",[[0,\"limel-action-bar-overflow-menu\",{\"items\":[16],\"openDirection\":[513,\"open-direction\"]}],[0,\"limel-action-bar-item\",{\"item\":[16],\"isVisible\":[516,\"is-visible\"]}]]],[\"limel-button\",[[1,\"limel-button\",{\"label\":[513],\"primary\":[516],\"outlined\":[516],\"icon\":[513],\"disabled\":[516],\"loading\":[516],\"loadingFailed\":[516,\"loading-failed\"],\"justLoaded\":[32]}]]],[\"limel-file-dropzone_2\",[[1,\"limel-file-dropzone\",{\"accept\":[513],\"disabled\":[4],\"text\":[1],\"helperText\":[1,\"helper-text\"],\"hasFileToDrop\":[32]}],[1,\"limel-file-input\",{\"accept\":[513],\"disabled\":[516],\"multiple\":[516]}]]],[\"limel-markdown\",[[1,\"limel-markdown\",{\"value\":[1]}]]],[\"limel-linear-progress\",[[1,\"limel-linear-progress\",{\"value\":[514],\"indeterminate\":[516]}]]],[\"limel-chip_2\",[[1,\"limel-chip-set\",{\"value\":[16],\"type\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"inputType\":[513,\"input-type\"],\"maxItems\":[514,\"max-items\"],\"required\":[516],\"searchLabel\":[513,\"search-label\"],\"emptyInputOnBlur\":[516,\"empty-input-on-blur\"],\"clearAllButton\":[4,\"clear-all-button\"],\"leadingIcon\":[513,\"leading-icon\"],\"delimiter\":[513],\"language\":[1],\"editMode\":[32],\"textValue\":[32],\"blurred\":[32],\"inputChipIndexSelected\":[32],\"selectedChipIds\":[32],\"getEditMode\":[64],\"setFocus\":[64],\"emptyInput\":[64]}],[1,\"limel-chip\",{\"language\":[513],\"text\":[513],\"icon\":[1],\"link\":[16],\"badge\":[520],\"disabled\":[516],\"readonly\":[516],\"selected\":[516],\"invalid\":[516],\"removable\":[516],\"type\":[513],\"loading\":[516],\"progress\":[514],\"identifier\":[520]}]]],[\"limel-portal_3\",[[1,\"limel-tooltip\",{\"elementId\":[513,\"element-id\"],\"label\":[513],\"helperLabel\":[513,\"helper-label\"],\"maxlength\":[514],\"openDirection\":[513,\"open-direction\"],\"open\":[32]}],[1,\"limel-tooltip-content\",{\"label\":[513],\"helperLabel\":[513,\"helper-label\"],\"maxlength\":[514]}],[1,\"limel-portal\",{\"openDirection\":[513,\"open-direction\"],\"position\":[513],\"containerId\":[513,\"container-id\"],\"containerStyle\":[16],\"parent\":[16],\"inheritParentWidth\":[516,\"inherit-parent-width\"],\"visible\":[516],\"anchor\":[16]}]]],[\"limel-popover_2\",[[1,\"limel-popover\",{\"open\":[4],\"openDirection\":[513,\"open-direction\"]}],[1,\"limel-popover-surface\",{\"contentCollection\":[16]}]]],[\"limel-spinner\",[[1,\"limel-spinner\",{\"size\":[513],\"limeBranded\":[4,\"lime-branded\"]}]]],[\"limel-input-field_3\",[[1,\"limel-input-field\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"label\":[513],\"placeholder\":[513],\"helperText\":[513,\"helper-text\"],\"prefix\":[513],\"suffix\":[513],\"required\":[516],\"value\":[513],\"trailingIcon\":[513,\"trailing-icon\"],\"leadingIcon\":[513,\"leading-icon\"],\"pattern\":[513],\"type\":[513],\"formatNumber\":[516,\"format-number\"],\"step\":[520],\"max\":[514],\"min\":[514],\"maxlength\":[514],\"minlength\":[514],\"completions\":[16],\"showLink\":[516,\"show-link\"],\"locale\":[513],\"isFocused\":[32],\"isModified\":[32],\"showCompletions\":[32]}],[1,\"limel-list\",{\"items\":[16],\"badgeIcons\":[4,\"badge-icons\"],\"iconSize\":[1,\"icon-size\"],\"type\":[1],\"maxLinesSecondaryText\":[2,\"max-lines-secondary-text\"]}],[1,\"limel-menu-surface\",{\"open\":[4],\"allowClicksElement\":[16]}]]]]"), options);
|
|
21
21
|
});
|
|
22
22
|
|
|
23
23
|
//# sourceMappingURL=lime-elements.js.map
|
|
@@ -16020,7 +16020,7 @@ const isDropdown = (item) => {
|
|
|
16020
16020
|
return item.content !== undefined;
|
|
16021
16021
|
};
|
|
16022
16022
|
|
|
16023
|
-
const prosemirrorAdapterCss = "@charset \"UTF-8\";:host{--mdc-theme-primary:var(\n --lime-primary-color,\n rgb(var(--color-teal-default))\n );--mdc-theme-secondary:var(\n --lime-secondary-color,\n rgb(var(--contrast-1100))\n );--mdc-theme-on-primary:var(\n --lime-on-primary-color,\n rgb(var(--contrast-100))\n );--mdc-theme-on-secondary:var(\n --lime-on-secondary-color,\n rgb(var(--contrast-100))\n );--mdc-theme-text-disabled-on-background:var(\n --lime-text-disabled-on-background-color,\n rgba(var(--contrast-1700), 0.38)\n );--mdc-theme-text-primary-on-background:var(\n --lime-text-primary-on-background-color,\n rgba(var(--contrast-1700), 0.87)\n );--mdc-theme-text-secondary-on-background:var(\n --lime-text-secondary-on-background-color,\n rgba(var(--contrast-1700), 0.54)\n );--mdc-theme-error:var(\n --lime-error-background-color,\n rgb(var(--color-red-dark))\n );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n --lime-surface-background-color,\n rgb(var(--contrast-100))\n );--mdc-theme-on-surface:var(\n --lime-on-surface-color,\n rgb(var(--contrast-1500))\n )}:host(limel-text-editor){isolation:isolate;display:block}*{box-sizing:border-box}.ProseMirror-menubar-wrapper{transition:border 0.2s ease;display:grid;grid-template-rows:auto 1fr;border-radius:0.25rem;border:1px solid;border-color:rgba(var(--contrast-700), 0.65)}.ProseMirror-menubar-wrapper:hover{border-color:rgba(var(--contrast-700), 1)}.ProseMirror-menubar-wrapper:focus-within{border-color:var(--mdc-theme-primary)}.ProseMirror-textblock-dropdown{min-width:3em}.ProseMirror-tooltip .ProseMirror-menu{width:-webkit-fit-content;width:fit-content;white-space:pre}.ProseMirror{position:relative;word-wrap:break-word;white-space:pre-wrap;white-space:break-spaces;-webkit-font-variant-ligatures:none;font-variant-ligatures:none;font-feature-settings:\"liga\" 0;border-bottom-left-radius:0.5rem;border-bottom-right-radius:0.5rem;padding:0.5rem 1rem;background-color:rgb(var(--contrast-100))}.ProseMirror [draggable][contenteditable=false]{user-select:text}.ProseMirror:focus-visible{outline:none}.ProseMirror-hideselection{caret-color:transparent}.ProseMirror-hideselection *::selection{background:transparent}.ProseMirror-hideselection *::-moz-selection{background:transparent}.ProseMirror-selectednode{outline:0.125rem solid rgb(var(--color-sky-light))}li.ProseMirror-selectednode{outline:none}li.ProseMirror-selectednode:after{content:\"\";position:absolute;left:-2rem;right:-0.125rem;top:-0.125rem;bottom:-0.125rem;border:0.125rem solid rgb(var(--color-sky-light));pointer-events:none}img.ProseMirror-separator{display:inline !important;border:none !important;margin:0 !important}div#editor .ProseMirror-menubar{position:sticky !important;z-index:1;top:0}div#editor .ProseMirror-menubar[style*=\"position: fixed\"]{box-shadow:0 0.25rem 0.5rem -0.5rem rgb(var(--color-black), 0.8)}.ProseMirror-menubar{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:0.25rem;align-items:center;padding:0.125rem;background-color:rgb(var(--contrast-100));border-top-left-radius:0.5rem;border-top-right-radius:0.5rem}.ProseMirror-menuitem{position:relative;flex-shrink:0;display:flex;align-items:center;justify-content:center;white-space:nowrap;line-height:1;height:1.5rem;min-width:1.5rem;border-radius:0.25rem;color:rgb(var(--contrast-1100));font-size:0.8125rem}.ProseMirror-menuitem:not(:has(.ProseMirror-menu-disabled)){transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer;color:var(--mdc-theme-on-surface);background-color:transparent}.ProseMirror-menuitem:not(:has(.ProseMirror-menu-disabled)):hover{color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}.ProseMirror-menuitem:not(:has(.ProseMirror-menu-disabled)):active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}.ProseMirror-menuitem:has(.ProseMirror-menu-active){box-shadow:var(--button-shadow-inset);color:var(--mdc-theme-primary)}.ProseMirror-menuitem:has(.ProseMirror-menu-active) svg{color:var(--mdc-theme-primary)}.ProseMirror-menuitem:has(.ProseMirror-menu-dropdown-menu){box-shadow:var(--button-shadow-inset)}.ProseMirror-menuitem svg{fill:currentColor;height:1rem;color:rgb(var(--contrast-1100))}.ProseMirror-menuseparator{border-radius:1rem;background-color:rgb(var(--contrast-600));width:0.125rem;height:1rem}.ProseMirror-menu-dropdown{position:relative;display:flex;align-items:center;gap:0.5rem;padding:0 0.5rem}.ProseMirror-menu-dropdown:after{content:\"\";border-left:0.25rem solid transparent;border-right:0.25rem solid transparent;border-top:0.25rem solid currentColor}.ProseMirror-menu-dropdown-menu,.ProseMirror-menu-submenu{box-shadow:0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)}.ProseMirror-menu-dropdown-menu{position:absolute;top:100%;background:rgb(var(--contrast-100));border-radius:0.25rem;padding:0.125rem}.ProseMirror-menu-submenu{position:absolute;background:rgb(var(--contrast-100));border-radius:0.25rem;padding:0.125rem;display:none;min-width:4em;left:100%;top:-0.75rem}.ProseMirror-menu-dropdown-item{transition:background-color 0.2s ease;cursor:pointer;border-radius:0.375rem;min-height:2.5rem;display:flex;align-items:center;width:100%}.ProseMirror-menu-dropdown-item>div{padding:0 1rem;width:100%}.ProseMirror-menu-dropdown-item:not(:has(.ProseMirror-menu-disabled)):hover{background-color:rgb(var(--contrast-300))}.ProseMirror-menu-submenu-wrap{position:relative;margin-right:-0.25rem}.ProseMirror-menu-submenu-wrap:hover .ProseMirror-menu-submenu{display:block}.ProseMirror-menu-submenu-label{position:relative;display:flex;align-items:center;justify-content:space-between;gap:0.5rem}.ProseMirror-menu-submenu-label:after{content:\"\";border-top:0.25rem solid transparent;border-bottom:0.25rem solid transparent;border-left:0.25rem solid currentColor}.ProseMirror-menu-disabled{opacity:0.3;cursor:default}.ProseMirror-menu-submenu-wrap-active .ProseMirror-menu-submenu{display:block}blockquote{position:relative;font-weight:100;font-size:0.875rem;max-width:100%;line-height:1.4;margin:0;padding:0.5rem 1.25rem;border-radius:0.05rem 0.75rem;background-color:rgb(var(--contrast-300))}blockquote:before,blockquote:after{position:absolute;font-size:2.75rem;opacity:0.4}blockquote:before{content:\"“\";left:0;top:-0.75rem}blockquote:after{content:\"”\";right:0;bottom:-2rem}:host(limel-markdown.truncate-paragraphs) p{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}p,li{font-size:0.875rem;word-break:break-word;hyphens:auto;-webkit-hyphens:auto}a{word-break:break-all}p{margin-top:0;margin-bottom:0.5rem}p:only-child{margin-bottom:0}a{transition:color 0.2s ease;color:var(--markdown-hyperlink-color, rgb(var(--color-blue-dark)));text-decoration:none}a:hover{color:var(--markdown-hyperlink-color--hovered, rgb(var(--color-blue-default)))}hr{margin:1.75rem 0 2rem 0;border-width:0;border-top:1px solid rgb(var(--contrast-500))}dl{display:grid;grid-template-columns:1fr 2fr;grid-template-rows:1fr;margin-bottom:2rem;border:1px solid rgb(var(--contrast-400));border-radius:0.375rem;background-color:rgb(var(--contrast-200))}dl dt,dl dd{padding:0.375rem 0.5rem;font-size:0.875rem;margin:0}dl dt:nth-of-type(even),dl dd:nth-of-type(even){background-color:rgb(var(--contrast-300))}dl dt:first-child{border-top-left-radius:0.375rem}dl dt:last-child{border-bottom-left-radius:0.375rem}dl dd:first-child{border-top-right-radius:0.375rem}dl dd:last-child{border-bottom-right-radius:0.375rem}h1{font-size:1.5rem}h2{font-size:1.25rem}h3{font-size:1.125rem}h4{font-size:1rem}h5{font-size:0.875rem}h6{font-size:0.75rem}h1,h2{margin-top:0.5rem;margin-bottom:0.5rem;letter-spacing:-0.03125rem;font-weight:500}h3,h4{margin-top:0.75rem;margin-bottom:0.25rem;font-weight:600}h5,h6{margin-top:0.5rem;margin-bottom:0.125rem;font-weight:600}h1,h2,h3,h4,h5,h6{word-break:break-word;hyphens:auto;-webkit-hyphens:auto}:not([contenteditable=true]) h1,:not([contenteditable=true]) h2,:not([contenteditable=true]) h3,:not([contenteditable=true]) h4,:not([contenteditable=true]) h5,:not([contenteditable=true]) h6{text-wrap:balance}[contenteditable=true] h1,[contenteditable=true] h2,[contenteditable=true] h3,[contenteditable=true] h4,[contenteditable=true] h5,[contenteditable=true] h6{text-wrap:initial}ul{list-style:none}ul li{position:relative;margin-left:0.75rem}ul li:before{content:\"\";position:absolute;left:-0.5rem;top:0.5rem;width:0.25rem;height:0.25rem;border-radius:50%;background-color:rgb(var(--contrast-700));display:block}ol{margin-top:0.25rem;padding-left:1rem}ul{margin-top:0.25rem;padding-left:0}ul ul,ul ol,ol ol,ol ul{margin-left:0}li{margin-bottom:0.25rem}code{font-family:ui-monospace, \"Cascadia Code\", \"Source Code Pro\", Menlo, Consolas, \"DejaVu Sans Mono\", monospace;font-size:0.8125rem;letter-spacing:-0.0125rem;color:rgb(var(--contrast-1300));-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;display:inline-block;border-radius:0.25rem;padding:0.03125rem 0.25rem;background-color:rgb(var(--contrast-600))}pre>code{display:block;margin:0.5rem 0;padding:0.5rem 0.75rem;overflow:auto;white-space:pre-wrap}:host(limel-markdown:not(.no-table-styles)) table{table-layout:auto;min-width:100%;border-collapse:collapse;border-spacing:0;background:transparent;margin:0.75rem 0;border:1px solid rgb(var(--contrast-400))}:host(limel-markdown:not(.no-table-styles)) th,:host(limel-markdown:not(.no-table-styles)) td{text-align:left;vertical-align:top;transition:background-color 0.2s ease;font-size:0.875rem}:host(limel-markdown:not(.no-table-styles)) td{padding:0.5rem 0.375rem 0.75rem 0.375rem}:host(limel-markdown:not(.no-table-styles)) tr th{background-color:rgb(var(--contrast-400));padding:0.25rem 0.375rem;font-weight:normal}:host(limel-markdown:not(.no-table-styles)) tr th:only-child{text-align:center}:host(limel-markdown:not(.no-table-styles)) tbody tr:nth-child(odd) td{background-color:rgb(var(--contrast-200))}:host(limel-markdown:not(.no-table-styles)) tbody tr:hover td{background-color:rgb(var(--contrast-300))}";
|
|
16023
|
+
const prosemirrorAdapterCss = "@charset \"UTF-8\";:host{--mdc-theme-primary:var(\n --lime-primary-color,\n rgb(var(--color-teal-default))\n );--mdc-theme-secondary:var(\n --lime-secondary-color,\n rgb(var(--contrast-1100))\n );--mdc-theme-on-primary:var(\n --lime-on-primary-color,\n rgb(var(--contrast-100))\n );--mdc-theme-on-secondary:var(\n --lime-on-secondary-color,\n rgb(var(--contrast-100))\n );--mdc-theme-text-disabled-on-background:var(\n --lime-text-disabled-on-background-color,\n rgba(var(--contrast-1700), 0.38)\n );--mdc-theme-text-primary-on-background:var(\n --lime-text-primary-on-background-color,\n rgba(var(--contrast-1700), 0.87)\n );--mdc-theme-text-secondary-on-background:var(\n --lime-text-secondary-on-background-color,\n rgba(var(--contrast-1700), 0.54)\n );--mdc-theme-error:var(\n --lime-error-background-color,\n rgb(var(--color-red-dark))\n );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n --lime-surface-background-color,\n rgb(var(--contrast-100))\n );--mdc-theme-on-surface:var(\n --lime-on-surface-color,\n rgb(var(--contrast-1500))\n )}:host(limel-text-editor){isolation:isolate;display:block}*{box-sizing:border-box}.ProseMirror-menubar-wrapper{transition:border 0.2s ease;display:grid;grid-template-rows:auto 1fr;border-radius:0.25rem;border:1px solid;border-color:rgba(var(--contrast-700), 0.65)}.ProseMirror-menubar-wrapper:hover{border-color:rgba(var(--contrast-700), 1)}.ProseMirror-menubar-wrapper:focus-within{border-color:var(--mdc-theme-primary)}.ProseMirror-textblock-dropdown{min-width:3em}.ProseMirror-tooltip .ProseMirror-menu{width:-webkit-fit-content;width:fit-content;white-space:pre}.ProseMirror{position:relative;word-wrap:break-word;white-space:pre-wrap;white-space:break-spaces;-webkit-font-variant-ligatures:none;font-variant-ligatures:none;font-feature-settings:\"liga\" 0;border-bottom-left-radius:0.5rem;border-bottom-right-radius:0.5rem;padding:var(--limel-text-editor-padding);background-color:rgb(var(--contrast-100))}.ProseMirror [draggable][contenteditable=false]{user-select:text}.ProseMirror:focus-visible{outline:none}.ProseMirror-hideselection{caret-color:transparent}.ProseMirror-hideselection *::selection{background:transparent}.ProseMirror-hideselection *::-moz-selection{background:transparent}.ProseMirror-selectednode{outline:0.125rem solid rgb(var(--color-sky-light))}li.ProseMirror-selectednode{outline:none}li.ProseMirror-selectednode:after{content:\"\";position:absolute;left:-2rem;right:-0.125rem;top:-0.125rem;bottom:-0.125rem;border:0.125rem solid rgb(var(--color-sky-light));pointer-events:none}img.ProseMirror-separator{display:inline !important;border:none !important;margin:0 !important}div#editor .ProseMirror-menubar{position:sticky !important;z-index:1;top:0}div#editor .ProseMirror-menubar[style*=\"position: fixed\"]{box-shadow:0 0.25rem 0.5rem -0.5rem rgb(var(--color-black), 0.8)}div#editor .ProseMirror-menubar-spacer{display:none}.ProseMirror-menubar{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:0.25rem;align-items:center;padding:0.125rem;background-color:rgb(var(--contrast-100));border-top-left-radius:0.5rem;border-top-right-radius:0.5rem}.ProseMirror-menuitem{position:relative;flex-shrink:0;display:flex;align-items:center;justify-content:center;white-space:nowrap;line-height:1;height:1.5rem;min-width:1.5rem;border-radius:0.25rem;color:rgb(var(--contrast-1100));font-size:0.8125rem}.ProseMirror-menuitem:not(:has(.ProseMirror-menu-disabled)){transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer;color:var(--mdc-theme-on-surface);background-color:transparent}.ProseMirror-menuitem:not(:has(.ProseMirror-menu-disabled)):hover{color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}.ProseMirror-menuitem:not(:has(.ProseMirror-menu-disabled)):active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}.ProseMirror-menuitem:has(.ProseMirror-menu-active){box-shadow:var(--button-shadow-inset);color:var(--mdc-theme-primary)}.ProseMirror-menuitem:has(.ProseMirror-menu-active) svg{color:var(--mdc-theme-primary)}.ProseMirror-menuitem:has(.ProseMirror-menu-dropdown-menu){box-shadow:var(--button-shadow-inset)}.ProseMirror-menuitem svg{fill:currentColor;height:1rem;color:rgb(var(--contrast-1100))}.ProseMirror-menuseparator{border-radius:1rem;background-color:rgb(var(--contrast-600));width:0.125rem;height:1rem}.ProseMirror-menu-dropdown{position:relative;display:flex;align-items:center;gap:0.5rem;padding:0 0.5rem}.ProseMirror-menu-dropdown:after{content:\"\";border-left:0.25rem solid transparent;border-right:0.25rem solid transparent;border-top:0.25rem solid currentColor}.ProseMirror-menu-dropdown-menu,.ProseMirror-menu-submenu{box-shadow:0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)}.ProseMirror-menu-dropdown-menu{position:absolute;top:100%;background:rgb(var(--contrast-100));border-radius:0.25rem;padding:0.125rem}.ProseMirror-menu-submenu{position:absolute;background:rgb(var(--contrast-100));border-radius:0.25rem;padding:0.125rem;display:none;min-width:4em;left:100%;top:-0.75rem}.ProseMirror-menu-dropdown-item{transition:background-color 0.2s ease;cursor:pointer;border-radius:0.375rem;min-height:2.5rem;display:flex;align-items:center;width:100%}.ProseMirror-menu-dropdown-item>div{padding:0 1rem;width:100%}.ProseMirror-menu-dropdown-item:not(:has(.ProseMirror-menu-disabled)):hover{background-color:rgb(var(--contrast-300))}.ProseMirror-menu-submenu-wrap{position:relative;margin-right:-0.25rem}.ProseMirror-menu-submenu-wrap:hover .ProseMirror-menu-submenu{display:block}.ProseMirror-menu-submenu-label{position:relative;display:flex;align-items:center;justify-content:space-between;gap:0.5rem}.ProseMirror-menu-submenu-label:after{content:\"\";border-top:0.25rem solid transparent;border-bottom:0.25rem solid transparent;border-left:0.25rem solid currentColor}.ProseMirror-menu-disabled{opacity:0.3;cursor:default}.ProseMirror-menu-submenu-wrap-active .ProseMirror-menu-submenu{display:block}blockquote{position:relative;font-weight:100;font-size:0.875rem;max-width:100%;line-height:1.4;margin:0;padding:0.5rem 1.25rem;border-radius:0.05rem 0.75rem;background-color:rgb(var(--contrast-300))}blockquote:before,blockquote:after{position:absolute;font-size:2.75rem;opacity:0.4}blockquote:before{content:\"“\";left:0;top:-0.75rem}blockquote:after{content:\"”\";right:0;bottom:-2rem}:host(limel-markdown.truncate-paragraphs) p{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}p,li{font-size:0.875rem;word-break:break-word;hyphens:auto;-webkit-hyphens:auto}a{word-break:break-all}p{margin-top:0;margin-bottom:0.5rem}p:only-child{margin-bottom:0}a{transition:color 0.2s ease;color:var(--markdown-hyperlink-color, rgb(var(--color-blue-dark)));text-decoration:none}a:hover{color:var(--markdown-hyperlink-color--hovered, rgb(var(--color-blue-default)))}hr{margin:1.75rem 0 2rem 0;border-width:0;border-top:1px solid rgb(var(--contrast-500))}dl{display:grid;grid-template-columns:1fr 2fr;grid-template-rows:1fr;margin-bottom:2rem;border:1px solid rgb(var(--contrast-400));border-radius:0.375rem;background-color:rgb(var(--contrast-200))}dl dt,dl dd{padding:0.375rem 0.5rem;font-size:0.875rem;margin:0}dl dt:nth-of-type(even),dl dd:nth-of-type(even){background-color:rgb(var(--contrast-300))}dl dt:first-child{border-top-left-radius:0.375rem}dl dt:last-child{border-bottom-left-radius:0.375rem}dl dd:first-child{border-top-right-radius:0.375rem}dl dd:last-child{border-bottom-right-radius:0.375rem}h1{font-size:1.5rem}h2{font-size:1.25rem}h3{font-size:1.125rem}h4{font-size:1rem}h5{font-size:0.875rem}h6{font-size:0.75rem}h1,h2{margin-top:0.5rem;margin-bottom:0.5rem;letter-spacing:-0.03125rem;font-weight:500}h3,h4{margin-top:0.75rem;margin-bottom:0.25rem;font-weight:600}h5,h6{margin-top:0.5rem;margin-bottom:0.125rem;font-weight:600}h1,h2,h3,h4,h5,h6{word-break:break-word;hyphens:auto;-webkit-hyphens:auto}:not([contenteditable=true]) h1,:not([contenteditable=true]) h2,:not([contenteditable=true]) h3,:not([contenteditable=true]) h4,:not([contenteditable=true]) h5,:not([contenteditable=true]) h6{text-wrap:balance}[contenteditable=true] h1,[contenteditable=true] h2,[contenteditable=true] h3,[contenteditable=true] h4,[contenteditable=true] h5,[contenteditable=true] h6{text-wrap:initial}ul{list-style:none}ul li{position:relative;margin-left:0.75rem}ul li:before{content:\"\";position:absolute;left:-0.5rem;top:0.5rem;width:0.25rem;height:0.25rem;border-radius:50%;background-color:rgb(var(--contrast-700));display:block}ol{margin-top:0.25rem;padding-left:1rem}ul{margin-top:0.25rem;padding-left:0}ul ul,ul ol,ol ol,ol ul{margin-left:0}li{margin-bottom:0.25rem}code{font-family:ui-monospace, \"Cascadia Code\", \"Source Code Pro\", Menlo, Consolas, \"DejaVu Sans Mono\", monospace;font-size:0.8125rem;letter-spacing:-0.0125rem;color:rgb(var(--contrast-1300));-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;display:inline-block;border-radius:0.25rem;padding:0.03125rem 0.25rem;background-color:rgb(var(--contrast-600))}pre>code{display:block;margin:0.5rem 0;padding:0.5rem 0.75rem;overflow:auto;white-space:pre-wrap}:host(limel-markdown:not(.no-table-styles)) table{table-layout:auto;min-width:100%;border-collapse:collapse;border-spacing:0;background:transparent;margin:0.75rem 0;border:1px solid rgb(var(--contrast-400))}:host(limel-markdown:not(.no-table-styles)) th,:host(limel-markdown:not(.no-table-styles)) td{text-align:left;vertical-align:top;transition:background-color 0.2s ease;font-size:0.875rem}:host(limel-markdown:not(.no-table-styles)) td{padding:0.5rem 0.375rem 0.75rem 0.375rem}:host(limel-markdown:not(.no-table-styles)) tr th{background-color:rgb(var(--contrast-400));padding:0.25rem 0.375rem;font-weight:normal}:host(limel-markdown:not(.no-table-styles)) tr th:only-child{text-align:center}:host(limel-markdown:not(.no-table-styles)) tbody tr:nth-child(odd) td{background-color:rgb(var(--contrast-200))}:host(limel-markdown:not(.no-table-styles)) tbody tr:hover td{background-color:rgb(var(--contrast-300))}";
|
|
16024
16024
|
|
|
16025
16025
|
const ProsemirrorAdapter = class {
|
|
16026
16026
|
constructor(hostRef) {
|