@dnncommunity/dnn-elements 0.24.0-beta.8 → 0.24.0-beta.9

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.
Files changed (138) hide show
  1. package/dist/cjs/dnn-checkbox.cjs.entry.js +4 -1
  2. package/dist/cjs/dnn-checkbox.cjs.entry.js.map +1 -1
  3. package/dist/cjs/dnn-chevron.cjs.entry.js +1 -1
  4. package/dist/cjs/dnn-collapsible.cjs.entry.js +1 -1
  5. package/dist/cjs/dnn-color-input.cjs.entry.js +14 -14
  6. package/dist/cjs/dnn-color-picker.cjs.entry.js +3 -3
  7. package/dist/cjs/dnn-dropzone.cjs.entry.js +9 -9
  8. package/dist/cjs/dnn-fieldset.cjs.entry.js +4 -4
  9. package/dist/cjs/dnn-image-cropper.cjs.entry.js +2 -2
  10. package/dist/cjs/dnn-input.cjs.entry.js +7 -7
  11. package/dist/cjs/dnn-modal.cjs.entry.js +2 -2
  12. package/dist/cjs/dnn-monaco-editor.cjs.entry.js +1 -1
  13. package/dist/cjs/dnn-permissions-grid.cjs.entry.js +10 -10
  14. package/dist/cjs/dnn-permissions-grid.cjs.entry.js.map +1 -1
  15. package/dist/cjs/dnn-progress-bar.cjs.entry.js +1 -1
  16. package/dist/cjs/dnn-richtext.cjs.entry.js +2 -2
  17. package/dist/cjs/dnn-searchbox.cjs.entry.js +1 -1
  18. package/dist/cjs/dnn-select.cjs.entry.js +2 -2
  19. package/dist/cjs/dnn-sort-icon.cjs.entry.js +4 -4
  20. package/dist/cjs/dnn-tab_2.cjs.entry.js +3 -3
  21. package/dist/cjs/dnn-textarea.cjs.entry.js +1 -1
  22. package/dist/cjs/dnn-toggle.cjs.entry.js +2 -2
  23. package/dist/cjs/dnn-treeview-item.cjs.entry.js +2 -2
  24. package/dist/cjs/dnn-vertical-overflow-menu.cjs.entry.js +2 -2
  25. package/dist/cjs/dnn-vertical-splitview.cjs.entry.js +4 -4
  26. package/dist/cjs/dnn.cjs.js +1 -1
  27. package/dist/cjs/loader.cjs.js +1 -1
  28. package/dist/collection/components/dnn-checkbox/dnn-checkbox.js +14 -2
  29. package/dist/collection/components/dnn-checkbox/dnn-checkbox.js.map +1 -1
  30. package/dist/collection/components/dnn-chevron/dnn-chevron.js +1 -1
  31. package/dist/collection/components/dnn-collapsible/dnn-collapsible.js +1 -1
  32. package/dist/collection/components/dnn-color-input/dnn-color-input.js +14 -14
  33. package/dist/collection/components/dnn-color-picker/dnn-color-picker.js +3 -3
  34. package/dist/collection/components/dnn-dropzone/dnn-dropzone.js +9 -9
  35. package/dist/collection/components/dnn-fieldset/dnn-fieldset.js +4 -4
  36. package/dist/collection/components/dnn-image-cropper/dnn-image-cropper.js +2 -2
  37. package/dist/collection/components/dnn-input/dnn-input.js +7 -7
  38. package/dist/collection/components/dnn-modal/dnn-modal.js +2 -2
  39. package/dist/collection/components/dnn-monaco-editor/dnn-monaco-editor.js +1 -1
  40. package/dist/collection/components/dnn-permissions-grid/dnn-permissions-grid.css +1 -1
  41. package/dist/collection/components/dnn-permissions-grid/dnn-permissions-grid.js +9 -9
  42. package/dist/collection/components/dnn-permissions-grid/dnn-permissions-grid.js.map +1 -1
  43. package/dist/collection/components/dnn-progress-bar/dnn-progress-bar.js +1 -1
  44. package/dist/collection/components/dnn-richtext/dnn-richtext.js +2 -2
  45. package/dist/collection/components/dnn-searchbox/dnn-searchbox.js +1 -1
  46. package/dist/collection/components/dnn-select/dnn-select.js +2 -2
  47. package/dist/collection/components/dnn-sort-icon/dnn-sort-icon.js +4 -4
  48. package/dist/collection/components/dnn-tab/dnn-tab.js +2 -2
  49. package/dist/collection/components/dnn-tabs/dnn-tabs.js +1 -1
  50. package/dist/collection/components/dnn-textarea/dnn-textarea.js +1 -1
  51. package/dist/collection/components/dnn-toggle/dnn-toggle.js +2 -2
  52. package/dist/collection/components/dnn-treeview-item/dnn-treeview-item.js +2 -2
  53. package/dist/collection/components/dnn-vertical-overflow-menu/dnn-vertical-overflow-menu.js +2 -2
  54. package/dist/collection/components/dnn-vertical-splitview/dnn-vertical-splitview.js +4 -4
  55. package/dist/dnn/dnn.esm.js +1 -1
  56. package/dist/dnn/dnn.esm.js.map +1 -1
  57. package/dist/dnn/{p-6e54915d.entry.js → p-03d3f2b1.entry.js} +2 -2
  58. package/dist/dnn/{p-96c850a8.entry.js → p-15c86eb3.entry.js} +2 -2
  59. package/dist/dnn/{p-350e4008.entry.js → p-16db9c38.entry.js} +2 -2
  60. package/dist/dnn/p-45e1c385.entry.js +2 -0
  61. package/dist/dnn/{p-2486e9db.entry.js.map → p-45e1c385.entry.js.map} +1 -1
  62. package/dist/dnn/{p-4574844c.entry.js → p-52ae7b31.entry.js} +2 -2
  63. package/dist/dnn/{p-90dd4620.entry.js → p-576364af.entry.js} +2 -2
  64. package/dist/dnn/{p-07a78c58.entry.js → p-5a244627.entry.js} +2 -2
  65. package/dist/dnn/{p-70b71aeb.entry.js → p-5b8e0904.entry.js} +2 -2
  66. package/dist/dnn/{p-50b6bb3f.entry.js → p-6643b369.entry.js} +2 -2
  67. package/dist/dnn/{p-7c4bcd14.entry.js → p-6659a086.entry.js} +2 -2
  68. package/dist/dnn/{p-8564bc60.entry.js → p-672fb82d.entry.js} +2 -2
  69. package/dist/dnn/{p-61dfb826.entry.js → p-69d5f883.entry.js} +2 -2
  70. package/dist/dnn/p-6e2adf25.entry.js +2 -0
  71. package/dist/dnn/p-6e2adf25.entry.js.map +1 -0
  72. package/dist/dnn/{p-b96b7c4a.entry.js → p-73fddf11.entry.js} +2 -2
  73. package/dist/dnn/p-9a06ad79.entry.js +2 -0
  74. package/dist/dnn/{p-535748e2.entry.js → p-a6982c8d.entry.js} +2 -2
  75. package/dist/dnn/{p-9ecfe643.entry.js → p-af925605.entry.js} +2 -2
  76. package/dist/dnn/{p-d7d6dffb.entry.js → p-bc1dd08b.entry.js} +2 -2
  77. package/dist/dnn/{p-21c5ef07.entry.js → p-cfbd1373.entry.js} +2 -2
  78. package/dist/dnn/{p-b553c159.entry.js → p-d67edea7.entry.js} +2 -2
  79. package/dist/dnn/{p-e23840d6.entry.js → p-dcf4505a.entry.js} +2 -2
  80. package/dist/dnn/p-ea2d6fd2.entry.js +2 -0
  81. package/dist/dnn/p-ea2d6fd2.entry.js.map +1 -0
  82. package/dist/dnn/{p-3b3475e0.entry.js → p-f107355e.entry.js} +2 -2
  83. package/dist/esm/dnn-checkbox.entry.js +4 -1
  84. package/dist/esm/dnn-checkbox.entry.js.map +1 -1
  85. package/dist/esm/dnn-chevron.entry.js +1 -1
  86. package/dist/esm/dnn-collapsible.entry.js +1 -1
  87. package/dist/esm/dnn-color-input.entry.js +14 -14
  88. package/dist/esm/dnn-color-picker.entry.js +3 -3
  89. package/dist/esm/dnn-dropzone.entry.js +9 -9
  90. package/dist/esm/dnn-fieldset.entry.js +4 -4
  91. package/dist/esm/dnn-image-cropper.entry.js +2 -2
  92. package/dist/esm/dnn-input.entry.js +7 -7
  93. package/dist/esm/dnn-modal.entry.js +2 -2
  94. package/dist/esm/dnn-monaco-editor.entry.js +1 -1
  95. package/dist/esm/dnn-permissions-grid.entry.js +10 -10
  96. package/dist/esm/dnn-permissions-grid.entry.js.map +1 -1
  97. package/dist/esm/dnn-progress-bar.entry.js +1 -1
  98. package/dist/esm/dnn-richtext.entry.js +2 -2
  99. package/dist/esm/dnn-searchbox.entry.js +1 -1
  100. package/dist/esm/dnn-select.entry.js +2 -2
  101. package/dist/esm/dnn-sort-icon.entry.js +4 -4
  102. package/dist/esm/dnn-tab_2.entry.js +3 -3
  103. package/dist/esm/dnn-textarea.entry.js +1 -1
  104. package/dist/esm/dnn-toggle.entry.js +2 -2
  105. package/dist/esm/dnn-treeview-item.entry.js +2 -2
  106. package/dist/esm/dnn-vertical-overflow-menu.entry.js +2 -2
  107. package/dist/esm/dnn-vertical-splitview.entry.js +4 -4
  108. package/dist/esm/dnn.js +1 -1
  109. package/dist/esm/loader.js +1 -1
  110. package/dist/types/components/dnn-checkbox/dnn-checkbox.d.ts +2 -1
  111. package/dist/types/components.d.ts +12 -0
  112. package/package.json +1 -1
  113. package/dist/dnn/p-2486e9db.entry.js +0 -2
  114. package/dist/dnn/p-3d1d6321.entry.js +0 -2
  115. package/dist/dnn/p-3d1d6321.entry.js.map +0 -1
  116. package/dist/dnn/p-5b15b44a.entry.js +0 -2
  117. package/dist/dnn/p-b5241c09.entry.js +0 -2
  118. package/dist/dnn/p-b5241c09.entry.js.map +0 -1
  119. /package/dist/dnn/{p-6e54915d.entry.js.map → p-03d3f2b1.entry.js.map} +0 -0
  120. /package/dist/dnn/{p-96c850a8.entry.js.map → p-15c86eb3.entry.js.map} +0 -0
  121. /package/dist/dnn/{p-350e4008.entry.js.map → p-16db9c38.entry.js.map} +0 -0
  122. /package/dist/dnn/{p-4574844c.entry.js.map → p-52ae7b31.entry.js.map} +0 -0
  123. /package/dist/dnn/{p-90dd4620.entry.js.map → p-576364af.entry.js.map} +0 -0
  124. /package/dist/dnn/{p-07a78c58.entry.js.map → p-5a244627.entry.js.map} +0 -0
  125. /package/dist/dnn/{p-70b71aeb.entry.js.map → p-5b8e0904.entry.js.map} +0 -0
  126. /package/dist/dnn/{p-50b6bb3f.entry.js.map → p-6643b369.entry.js.map} +0 -0
  127. /package/dist/dnn/{p-7c4bcd14.entry.js.map → p-6659a086.entry.js.map} +0 -0
  128. /package/dist/dnn/{p-8564bc60.entry.js.map → p-672fb82d.entry.js.map} +0 -0
  129. /package/dist/dnn/{p-61dfb826.entry.js.map → p-69d5f883.entry.js.map} +0 -0
  130. /package/dist/dnn/{p-b96b7c4a.entry.js.map → p-73fddf11.entry.js.map} +0 -0
  131. /package/dist/dnn/{p-5b15b44a.entry.js.map → p-9a06ad79.entry.js.map} +0 -0
  132. /package/dist/dnn/{p-535748e2.entry.js.map → p-a6982c8d.entry.js.map} +0 -0
  133. /package/dist/dnn/{p-9ecfe643.entry.js.map → p-af925605.entry.js.map} +0 -0
  134. /package/dist/dnn/{p-d7d6dffb.entry.js.map → p-bc1dd08b.entry.js.map} +0 -0
  135. /package/dist/dnn/{p-21c5ef07.entry.js.map → p-cfbd1373.entry.js.map} +0 -0
  136. /package/dist/dnn/{p-b553c159.entry.js.map → p-d67edea7.entry.js.map} +0 -0
  137. /package/dist/dnn/{p-e23840d6.entry.js.map → p-dcf4505a.entry.js.map} +0 -0
  138. /package/dist/dnn/{p-3b3475e0.entry.js.map → p-f107355e.entry.js.map} +0 -0
@@ -1 +1 @@
1
- {"version":3,"file":"dnn-checkbox.js","sourceRoot":"","sources":["../../../src/components/dnn-checkbox/dnn-checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, h, Prop, Event, EventEmitter, AttachInternals, Watch, State } from '@stencil/core';\nimport { CheckedState } from './types';\n\n/**\n * @slot - The label for the checkbox.\n * @slot checkedicon - Allows overriding the default checked icon.\n * @slot uncheckedicon - Allows overriding the unchecked icon.\n * @slot intermediateicon - If intermadiate state is used, allows overriding its icon.\n */\n@Component({\n tag: 'dnn-checkbox',\n styleUrl: 'dnn-checkbox.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class DnnCheckbox {\n @Element() el: HTMLDnnCheckboxElement;\n\n /** Defines if the checkbox is checked (true) or unchecked (false) or in an intermediate state (undefined) */\n @Prop({mutable: true}) checked: CheckedState = \"unchecked\";\n\n /** Defines if clicking the checkbox will go through the intermediate state between checked and unchecked (tri-state) */\n @Prop() useIntermediate: boolean = false;\n\n /** The value for this checkbox (not to be confused with its checked state). */\n @Prop() value: string = \"on\";\n\n /** The name to show in the formData (if using forms). */\n @Prop() name: string;\n\n /** Fires up when the checkbox checked property changes. */\n @Event() checkedchange: EventEmitter<\"checked\" | \"unchecked\" | \"intermediate\">;\n\n @State() focused = false;\n \n @AttachInternals() internals: ElementInternals;\n \n private originalChecked: CheckedState;\n private button: HTMLButtonElement;\n\n componentWillLoad() {\n this.originalChecked = this.checked;\n this.internals.setFormValue(this.checked);\n }\n\n @Watch(\"checked\")\n handleCheckedChange(newValue: CheckedState, oldValue: CheckedState) {\n if (newValue !== oldValue && this.checked == \"checked\") {\n var data = new FormData();\n data.append(this.name, this.value);\n this.internals.setFormValue(data);\n }\n }\n\n // eslint-disable-next-line @stencil-community/own-methods-must-be-private\n formResetCallback() {\n this.internals.setValidity({});\n this.checked = this.originalChecked;\n }\n\n private changeState(): void {\n if (!this.useIntermediate){\n switch (this.checked) {\n case \"checked\":\n this.checked = \"unchecked\";\n break;\n case \"unchecked\":\n case \"intermediate\":\n this.checked = \"checked\";\n break;\n default:\n break;\n }\n this.checkedchange.emit(this.checked);\n return;\n }\n switch (this.checked) {\n case \"checked\":\n this.checked = \"intermediate\";\n break;\n case \"intermediate\":\n this.checked = \"unchecked\";\n break;\n case \"unchecked\":\n this.checked = \"checked\";\n break;\n default:\n break;\n }\n this.checkedchange.emit(this.checked);\n }\n\n render() {\n return (\n <Host\n tabIndex={this.focused ? -1 : 0}\n onFocus={() => this.button.focus()}\n onBlur={() => this.button.blur()}\n >\n <button\n ref={el => this.button = el}\n onFocus={() => this.focused = true}\n onBlur={() => this.focused = false}\n class={`icon ${this.checked}`}\n onClick={() => this.changeState()}\n >\n <div class=\"unchecked\">\n <slot name=\"uncheckedicon\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\"/></svg>\n </slot>\n </div>\n <div class=\"checked\">\n <slot name=\"checkedicon\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\"/></svg>\n </slot>\n </div>\n <div class=\"intermediate\">\n <slot name=\"intermediateicon\">\n <svg class=\"undefined\" xmlns=\"http://www.w3.org/2000/svg\" enable-background=\"new 0 0 24 24\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><g><rect fill=\"none\" height=\"24\" width=\"24\"/></g><g><g><g><path d=\"M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M17,13H7v-2h10V13z\"/></g></g></g></svg>\n </slot>\n </div>\n </button>\n <label htmlFor={this.el.id} onClick={() => this.changeState()}><slot></slot></label>\n </Host>\n );\n }\n}\n"]}
1
+ {"version":3,"file":"dnn-checkbox.js","sourceRoot":"","sources":["../../../src/components/dnn-checkbox/dnn-checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, h, Prop, Event, EventEmitter, AttachInternals, Watch, State, Listen } from '@stencil/core';\nimport { CheckedState } from './types';\n\n/**\n * @slot @deprecated - The label for the checkbox - Obsolete, implement your own label.\n * @slot checkedicon - Allows overriding the default checked icon.\n * @slot uncheckedicon - Allows overriding the unchecked icon.\n * @slot intermediateicon - If intermadiate state is used, allows overriding its icon.\n */\n@Component({\n tag: 'dnn-checkbox',\n styleUrl: 'dnn-checkbox.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class DnnCheckbox {\n @Element() el: HTMLDnnCheckboxElement;\n\n /** Defines if the checkbox is checked (true) or unchecked (false) or in an intermediate state (undefined) */\n @Prop({mutable: true}) checked: CheckedState = \"unchecked\";\n\n /** Defines if clicking the checkbox will go through the intermediate state between checked and unchecked (tri-state) */\n @Prop() useIntermediate: boolean = false;\n\n /** The value for this checkbox (not to be confused with its checked state). */\n @Prop() value: string = \"on\";\n\n /** The name to show in the formData (if using forms). */\n @Prop() name: string;\n\n /** Fires up when the checkbox checked property changes. */\n @Event() checkedchange: EventEmitter<\"checked\" | \"unchecked\" | \"intermediate\">;\n\n @Listen(\"click\", { capture: true })\n handleClick() {\n this.changeState();\n }\n\n @State() focused = false;\n \n @AttachInternals() internals: ElementInternals;\n \n private originalChecked: CheckedState;\n private button: HTMLButtonElement;\n\n componentWillLoad() {\n this.originalChecked = this.checked;\n this.internals.setFormValue(this.checked);\n }\n\n @Watch(\"checked\")\n handleCheckedChange(newValue: CheckedState, oldValue: CheckedState) {\n if (newValue !== oldValue && this.checked == \"checked\") {\n var data = new FormData();\n data.append(this.name, this.value);\n this.internals.setFormValue(data);\n }\n }\n\n // eslint-disable-next-line @stencil-community/own-methods-must-be-private\n formResetCallback() {\n this.internals.setValidity({});\n this.checked = this.originalChecked;\n }\n\n private changeState(): void {\n if (!this.useIntermediate){\n switch (this.checked) {\n case \"checked\":\n this.checked = \"unchecked\";\n break;\n case \"unchecked\":\n case \"intermediate\":\n this.checked = \"checked\";\n break;\n default:\n break;\n }\n this.checkedchange.emit(this.checked);\n return;\n }\n switch (this.checked) {\n case \"checked\":\n this.checked = \"intermediate\";\n break;\n case \"intermediate\":\n this.checked = \"unchecked\";\n break;\n case \"unchecked\":\n this.checked = \"checked\";\n break;\n default:\n break;\n }\n this.checkedchange.emit(this.checked);\n }\n\n render() {\n return (\n <Host\n tabIndex={this.focused ? -1 : 0}\n onFocus={() => this.button.focus()}\n onBlur={() => this.button.blur()}\n >\n <button\n ref={el => this.button = el}\n onFocus={() => this.focused = true}\n onBlur={() => this.focused = false}\n class={`icon ${this.checked}`}\n >\n <div class=\"unchecked\">\n <slot name=\"uncheckedicon\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\"/></svg>\n </slot>\n </div>\n <div class=\"checked\">\n <slot name=\"checkedicon\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\"/></svg>\n </slot>\n </div>\n <div class=\"intermediate\">\n <slot name=\"intermediateicon\">\n <svg class=\"undefined\" xmlns=\"http://www.w3.org/2000/svg\" enable-background=\"new 0 0 24 24\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><g><rect fill=\"none\" height=\"24\" width=\"24\"/></g><g><g><g><path d=\"M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M17,13H7v-2h10V13z\"/></g></g></g></svg>\n </slot>\n </div>\n </button>\n </Host>\n );\n }\n}\n"]}
@@ -10,7 +10,7 @@ export class DnnChevron {
10
10
  this.changed.emit(newValue);
11
11
  }
12
12
  render() {
13
- return (h(Host, { key: '6c38c47a7df1c0851c0451ecd6d415b129d63b54', tabIndex: this.focused ? -1 : 0, onFocus: () => this.button.focus(), onBlur: () => this.button.blur() }, h("button", { key: 'bae33a5e5b469d1c9100af967543050b83e7a172', ref: el => this.button = el, "aria-label": this.expanded ? this.collapseText : this.expandText, onClick: () => this.expanded = !this.expanded, onFocus: () => this.focused = true, onBlur: () => this.focused = false }, h("svg", { key: '205404546336be1b66b3c8a5f9ddb5a44e2e0964', xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, h("path", { key: '91de31c736de687ae6c77dc28264c043b80563f1', d: "M0 0h24v24H0z", fill: "none" }), h("path", { key: 'c30e3a044c91d50140393ddfe24869d32b6a776f', d: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" })))));
13
+ return (h(Host, { key: 'ee94a5e40e8df1d4c9b6816c0419aadd696167c0', tabIndex: this.focused ? -1 : 0, onFocus: () => this.button.focus(), onBlur: () => this.button.blur() }, h("button", { key: '229b59723b03b0f83cbaaa5952059fa2ad0aa265', ref: el => this.button = el, "aria-label": this.expanded ? this.collapseText : this.expandText, onClick: () => this.expanded = !this.expanded, onFocus: () => this.focused = true, onBlur: () => this.focused = false }, h("svg", { key: '286451ec61c1704a7ed4fcf7ca942327835feebc', xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, h("path", { key: 'aa1016e8bae25bceba593d7ffa3d37384b74dce6', d: "M0 0h24v24H0z", fill: "none" }), h("path", { key: '38829c57c40f2818ecaa1f464fc53c7104a244b5', d: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" })))));
14
14
  }
15
15
  static get is() { return "dnn-chevron"; }
16
16
  static get encapsulation() { return "shadow"; }
@@ -44,7 +44,7 @@ export class DnnCollapsible {
44
44
  this.container.style.transition = `max-height ${this.transitionDuration}ms ease-in-out`;
45
45
  }
46
46
  render() {
47
- return (h(Host, { key: 'cfc99de9b30d157279893315946fa8b789f7dfb4' }, h("div", { key: '879c465670e98b5e3ce8dbc911c31e07f45a3087', id: "container", class: this.expanded && "expanded", ref: el => this.container = el, style: { transition: `max-height ${this.transitionDuration}ms ease-in-out` } }, h("slot", { key: '9cf1aa532dc647037f0b1f8014c5567db11863b0' }))));
47
+ return (h(Host, { key: '76ba7514e40374f07a9908ea63555688b10a09f1' }, h("div", { key: 'cac471cb9f670f6eab23aa85caaf94530d9d689c', id: "container", class: this.expanded && "expanded", ref: el => this.container = el, style: { transition: `max-height ${this.transitionDuration}ms ease-in-out` } }, h("slot", { key: 'b1fb33ad2ce23cd1d5fceec433b759f523b83fd4' }))));
48
48
  }
49
49
  static get is() { return "dnn-collapsible"; }
50
50
  static get encapsulation() { return "shadow"; }
@@ -86,20 +86,20 @@ export class DnnColorInput {
86
86
  }
87
87
  render() {
88
88
  var _a, _b, _c, _d, _e;
89
- return (h(Host, { key: '9a97a5d68109c26554b2efcd67bade4fa32fe24e', tabIndex: this.focused ? -1 : 0, onFocus: () => this.button.focus(), onBlur: () => this.button.blur() }, h("dnn-fieldset", { key: '2bfffd2ba931d81214cf4191bd4eb052a5bea6d7', label: this.label, id: this.labelId, focused: this.focused, helpText: this.helpText }, h("div", { key: '7b83aba0c750586e6636a699dc94c8b0089109ee', class: "inner-container" }, h("slot", { key: 'b47bc99ba9539202968561df78efc59892f4232e', name: "prefix" }), h("div", { key: '4dd903d2a5b61ee9c6f549ee7196aba67f86cbd1', class: "color-preview" }, this.useLightColor &&
90
- h("div", { key: 'e9c59300061a717b0bdf7733a3743a7318076561', style: { backgroundColor: `#${this.lightColor}` } }), h("div", { key: '25a25296ccb39572104f5c57992b9c294fb38695', style: { backgroundColor: `#${this.color}` } }), this.useDarkColor &&
91
- h("div", { key: 'c01b5112a56b90f3b0bb224c55101dd9498885e0', style: { backgroundColor: `#${this.darkColor}` } }), this.useContrastColor &&
92
- h("div", { key: '1f7582e191072d567eff20e1d1ca90d35ccbeba3', class: "contrast", style: { color: `#${this.contrastColor}` } }, h("hr", { key: '7c0e78128248b5690fe80c4bb975b46de5df2b82', style: { color: `#${this.contrastColor}` } }), h("span", { key: '3ebaa4745fcb98f4d30a53a9f545ce2fea32bc57' }, this.localization.contrast), h("hr", { key: '0eeb316c51a1f819cc9b5a2767ab4a3af8eac9e1', style: { color: `#${this.contrastColor}` } }))), !this.readonly &&
93
- h("button", { key: '1db19206553db83d3eff0f99be487c1aa4ccac3a', ref: el => this.button = el, "aria-labelledby": this.labelId, onClick: () => this.showPicker(), onFocus: () => this.focused = true, onBlur: () => this.focused = false }, h("svg", { key: '996dc4607e561c61c67b82e32bf06b3dc8426f14', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960" }, h("path", { key: '8d71e92388ccafc630f23463f6240706186e107b', d: "M200-200h56l345-345-56-56-345 345v56Zm572-403L602-771l56-56q23-23 56.5-23t56.5 23l56 56q23 23 24 55.5T829-660l-57 57Zm-58 59L290-120H120v-170l424-424 170 170Zm-141-29-28-28 56 56-28-28Z" }))), h("slot", { key: '721647f34276821d1090966d6850a7ad400dbc33', name: "suffix" }))), h("dnn-modal", { key: 'fd6228959e5efea91458e585c69055a0f2ccced0', ref: el => this.colorModal = el, backdropDismiss: false }, this.currentColor &&
94
- h("div", { key: '10e4ec859de7c8491292ca29bfa701645a4a1139', class: "modal-content" }, this.hasMultipleColors() &&
95
- h("dnn-tabs", { key: '8e00c0a37c92d8ebd5fd7df3a63c0a051e55c2d2' }, h("dnn-tab", { key: 'f9e3bef6810a599b38c9cbab412df93d93e8bcde', tabTitle: this.localization.normal }, h("dnn-color-picker", { key: 'fa6ad89b32fe804236bdfba17d1c1d2feea0a77d', color: (_a = this.currentColor) === null || _a === void 0 ? void 0 : _a.color, onColorChanged: e => this.currentColor = Object.assign(Object.assign({}, this.currentColor), { color: e.detail.hex }) })), this.useLightColor &&
96
- h("dnn-tab", { key: '9ad576ab4f1de9417bff9b3b2817786008464910', tabTitle: this.localization.light }, h("dnn-color-picker", { key: 'e802a6bc0b1ab48e4abbf5a5c5d7045231651d26', color: (_b = this.currentColor) === null || _b === void 0 ? void 0 : _b.lightColor, onColorChanged: e => this.currentColor = Object.assign(Object.assign({}, this.currentColor), { lightColor: e.detail.hex }) })), this.useDarkColor &&
97
- h("dnn-tab", { key: 'e3bbc34fd6538aac9d17498868959dc151bc2459', tabTitle: this.localization.dark }, h("dnn-color-picker", { key: '4436b9030b554f98f66c46dfe5d93b1cf957d318', color: (_c = this.currentColor) === null || _c === void 0 ? void 0 : _c.darkColor, onColorChanged: e => this.currentColor = Object.assign(Object.assign({}, this.currentColor), { darkColor: e.detail.hex }) })), this.useContrastColor &&
98
- h("dnn-tab", { key: '7138313c1e95a188770e5b92451641ef900bcce8', tabTitle: this.localization.contrast }, h("dnn-color-picker", { key: 'fc9a76ded5f4ed2184ecbf0660eaf2af997660e3', color: (_d = this.currentColor) === null || _d === void 0 ? void 0 : _d.contrastColor, onColorChanged: e => this.currentColor = Object.assign(Object.assign({}, this.currentColor), { contrastColor: e.detail.hex }) }))), !this.hasMultipleColors() &&
99
- h("dnn-color-picker", { key: 'bf72f9c20e42ada6cfc28a61ee2cf3f7f4e1f23f', color: (_e = this.currentColor) === null || _e === void 0 ? void 0 : _e.color, onColorChanged: e => this.currentColor = Object.assign(Object.assign({}, this.currentColor), { color: e.detail.hex }) }), h("h3", { key: 'ea200d1d4e1bf5cf2772117bff79cc3b7d92f92c' }, "Preview"), h("div", { key: '41ead7cdcc89979032b3ca759a0a9e5bf94b1a44', class: "color-preview" }, this.useLightColor &&
100
- h("div", { key: 'faa59653d033a099b1d10e713dd44b42174eac48', style: { backgroundColor: `#${this.currentColor.lightColor}` } }), h("div", { key: '3a25fb6d9cef45d2289fa6cab388da47f0db6d19', style: { backgroundColor: `#${this.currentColor.color}` } }), this.useDarkColor &&
101
- h("div", { key: 'df5d38aff202713ec2b1bdc1d6691df6eb3af828', style: { backgroundColor: `#${this.currentColor.darkColor}` } }), this.useContrastColor &&
102
- h("div", { key: 'bfb02f2bd68efe11df6ec18cabcf9202db1636fe', class: "contrast", style: { color: `#${this.currentColor.contrastColor}` } }, h("hr", { key: '869042b853ed4c6194580dfe2cd21e086daade1a', style: { color: `#${this.currentColor.contrastColor}` } }), h("span", { key: '197a171695accac2c6b60058264f7b36c4d3fed8' }, this.localization.contrast), h("hr", { key: '7152004e55209051de837ca90fe63d6edff508fa', style: { color: `#${this.currentColor.contrastColor}` } }))), h("div", { key: '30a9353717122d1853a304a1712fb0c378f15cb6', class: "controls" }, h("dnn-button", { key: '66813d8968cc03f76bcc808df8654e67419469cb', reversed: true, onClick: () => this.colorModal.hide() }, this.localization.cancel), h("dnn-button", { key: 'c2e9ea8d44c9c9152d7b55bc1719190342e0a024', onClick: () => this.saveColor() }, this.localization.confirm))))));
89
+ return (h(Host, { key: '722affca46b0605ab63409bd938f5032ea45db18', tabIndex: this.focused ? -1 : 0, onFocus: () => this.button.focus(), onBlur: () => this.button.blur() }, h("dnn-fieldset", { key: 'c5d939a1bca9286398ff7d0fa652406bd4e6df3d', label: this.label, id: this.labelId, focused: this.focused, helpText: this.helpText }, h("div", { key: '7fca976fe59f26e560cb2a4412d01356391308c2', class: "inner-container" }, h("slot", { key: '3ec1651ac8ee6a4cdf40dc2d1bf9408aa611e559', name: "prefix" }), h("div", { key: '50b34dd1d2e8ff2d9999f87b9bd72ddfb577e5ee', class: "color-preview" }, this.useLightColor &&
90
+ h("div", { key: '5eb78240709025161e7011e040fddbe0fb8845da', style: { backgroundColor: `#${this.lightColor}` } }), h("div", { key: '18ae5db63545be3b824d445ee3045611de5fac47', style: { backgroundColor: `#${this.color}` } }), this.useDarkColor &&
91
+ h("div", { key: '88ea0a66d09361aece5753aa2f116c824ce78edb', style: { backgroundColor: `#${this.darkColor}` } }), this.useContrastColor &&
92
+ h("div", { key: 'fe2f71930826ffcff305e25a7c47986dff2b9c16', class: "contrast", style: { color: `#${this.contrastColor}` } }, h("hr", { key: 'eef74b6b8d5176128c0a487d82827b2c4ac6aa07', style: { color: `#${this.contrastColor}` } }), h("span", { key: '6615c23bb06c50fc9ba36fd74066f8344a125303' }, this.localization.contrast), h("hr", { key: '06421c535aa56fc8d8cefefd3087ce1d679679eb', style: { color: `#${this.contrastColor}` } }))), !this.readonly &&
93
+ h("button", { key: '01766ed62e5e3af7831585370be5e4f563fddd83', ref: el => this.button = el, "aria-labelledby": this.labelId, onClick: () => this.showPicker(), onFocus: () => this.focused = true, onBlur: () => this.focused = false }, h("svg", { key: '4b84477b59644d1c6d87c53d0143f7b4886e3a88', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960" }, h("path", { key: '05251a0087769115fc7e9fd62e08ade0d3997752', d: "M200-200h56l345-345-56-56-345 345v56Zm572-403L602-771l56-56q23-23 56.5-23t56.5 23l56 56q23 23 24 55.5T829-660l-57 57Zm-58 59L290-120H120v-170l424-424 170 170Zm-141-29-28-28 56 56-28-28Z" }))), h("slot", { key: '73fda889edbe3d375e4f5def837a06cd631494af', name: "suffix" }))), h("dnn-modal", { key: '48f0b7ecc4e187bf4d495725556f712c022094b2', ref: el => this.colorModal = el, backdropDismiss: false }, this.currentColor &&
94
+ h("div", { key: '21e84f6b00f197952622c1726813dc3164844b35', class: "modal-content" }, this.hasMultipleColors() &&
95
+ h("dnn-tabs", { key: 'a2d81adf564e9908c6586fb7fa551979f2e52e11' }, h("dnn-tab", { key: '9df0030996b43c88a28265fabc6d68e2d4f4e947', tabTitle: this.localization.normal }, h("dnn-color-picker", { key: 'b89397aaf0a6ef2e852585f63863f7424fd5801d', color: (_a = this.currentColor) === null || _a === void 0 ? void 0 : _a.color, onColorChanged: e => this.currentColor = Object.assign(Object.assign({}, this.currentColor), { color: e.detail.hex }) })), this.useLightColor &&
96
+ h("dnn-tab", { key: '03cba449faada93d9fc113c0106ab24345279f94', tabTitle: this.localization.light }, h("dnn-color-picker", { key: 'f2364df9c8e56af1539c032b45ebb4be6cb67cc7', color: (_b = this.currentColor) === null || _b === void 0 ? void 0 : _b.lightColor, onColorChanged: e => this.currentColor = Object.assign(Object.assign({}, this.currentColor), { lightColor: e.detail.hex }) })), this.useDarkColor &&
97
+ h("dnn-tab", { key: '7ce2accefcb3a7c4d9159311883309bf6f6d8255', tabTitle: this.localization.dark }, h("dnn-color-picker", { key: '5d54a2ff099956daccb2b23dded73d6b6258d36a', color: (_c = this.currentColor) === null || _c === void 0 ? void 0 : _c.darkColor, onColorChanged: e => this.currentColor = Object.assign(Object.assign({}, this.currentColor), { darkColor: e.detail.hex }) })), this.useContrastColor &&
98
+ h("dnn-tab", { key: 'c00615ce72d44510a10d1664b95ea685300c48d0', tabTitle: this.localization.contrast }, h("dnn-color-picker", { key: 'fe4ff29caf538dd459db0478ad56d3b35cb16602', color: (_d = this.currentColor) === null || _d === void 0 ? void 0 : _d.contrastColor, onColorChanged: e => this.currentColor = Object.assign(Object.assign({}, this.currentColor), { contrastColor: e.detail.hex }) }))), !this.hasMultipleColors() &&
99
+ h("dnn-color-picker", { key: '0b016c6d2e48f00f018dd52f941a32498d2686f8', color: (_e = this.currentColor) === null || _e === void 0 ? void 0 : _e.color, onColorChanged: e => this.currentColor = Object.assign(Object.assign({}, this.currentColor), { color: e.detail.hex }) }), h("h3", { key: '3f7d790877eab2603b404742dddc91caa4558078' }, "Preview"), h("div", { key: 'e406cb06b6bb09e1f42343e8c7a152dcaa583761', class: "color-preview" }, this.useLightColor &&
100
+ h("div", { key: 'c6b3ad4d35ae6bb9bd2009b322c83c2a9b36e67e', style: { backgroundColor: `#${this.currentColor.lightColor}` } }), h("div", { key: 'ce5a6482f603b72e25505048addae3718da56292', style: { backgroundColor: `#${this.currentColor.color}` } }), this.useDarkColor &&
101
+ h("div", { key: 'ab08de041e1403eae14aeee40637cacd2b65a236', style: { backgroundColor: `#${this.currentColor.darkColor}` } }), this.useContrastColor &&
102
+ h("div", { key: 'e4a34aa10934332c83bb0446c881c307e263bcce', class: "contrast", style: { color: `#${this.currentColor.contrastColor}` } }, h("hr", { key: '8735a2c4427f9fdc8e112c0c395139d91fc4d336', style: { color: `#${this.currentColor.contrastColor}` } }), h("span", { key: '98e119f43c4a7c736e48940e59563a58a6c67df0' }, this.localization.contrast), h("hr", { key: 'fe6891f255cfbb9dd1662937e635a89f18ad853a', style: { color: `#${this.currentColor.contrastColor}` } }))), h("div", { key: '39dcff0c2dc1bf96d77c713f0163d11d21960e6d', class: "controls" }, h("dnn-button", { key: 'f86f95402a4495e0333710b14a14324ac751e630', reversed: true, onClick: () => this.colorModal.hide() }, this.localization.cancel), h("dnn-button", { key: '1b6558d0878a0e0e160c884677ba89484ca50ba2', onClick: () => this.saveColor() }, this.localization.confirm))))));
103
103
  }
104
104
  static get is() { return "dnn-color-input"; }
105
105
  static get encapsulation() { return "shadow"; }
@@ -285,13 +285,13 @@ export class DnnColorPicker {
285
285
  const red = this.currentColor.red;
286
286
  const green = this.currentColor.green;
287
287
  const blue = this.currentColor.blue;
288
- return (h(Host, { key: '4a8550809e62a746aaabbb06490b996e8e96f8d6', tabIndex: this.focused ? -1 : 0, onFocus: () => this.saturationBrightnessButton.focus(), onBlur: () => this.saturationBrightnessButton.blur() }, h("div", { key: 'ecda9654e41e807708177cdcf6ac3047806f9af2', class: "dnn-color-picker" }, h("div", { key: '00a3925f897e3c28ecb947f694468e9b2f65207c', class: "dnn-color-sliders" }, h("div", { key: '4f8c3dc5aba9604e099fcac445e30abc424980a1', class: "dnn-color-s-b", ref: (element) => this.saturationLightnessBox = element, style: { backgroundColor: `hsl(${hue},100%,50%)` }, onMouseDown: this.handleSaturationLightnessMouseDown.bind(this) }, h("button", { key: '9840ad20d0f06cb460ce9716f89846c04e542930', ref: el => this.saturationBrightnessButton = el, class: "dnn-s-b-picker", "aria-label": "Press up or down to adjust lightness, left or right to adjust saturation, hold shift to move by 10%", role: "slider", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuetext": `Saturation: ${Math.round(this.currentColor.saturation * 100)}%, Lightness: ${Math.round(this.currentColor.lightness * 100)}%`, style: {
288
+ return (h(Host, { key: '3270ad5db8fe3d6e4b0b77b8eaaab7ca49f845a1', tabIndex: this.focused ? -1 : 0, onFocus: () => this.saturationBrightnessButton.focus(), onBlur: () => this.saturationBrightnessButton.blur() }, h("div", { key: 'b92a03280c86835af30df24364f9923627f77ea9', class: "dnn-color-picker" }, h("div", { key: '5e23ef4f0678d73e3908d7d81aa57f1e9f8a75dc', class: "dnn-color-sliders" }, h("div", { key: '416fcb88cd209236acb5299719b2148c741beba8', class: "dnn-color-s-b", ref: (element) => this.saturationLightnessBox = element, style: { backgroundColor: `hsl(${hue},100%,50%)` }, onMouseDown: this.handleSaturationLightnessMouseDown.bind(this) }, h("button", { key: '1a4ae20c8308ec5132da58ccaeb6420b737588c7', ref: el => this.saturationBrightnessButton = el, class: "dnn-s-b-picker", "aria-label": "Press up or down to adjust lightness, left or right to adjust saturation, hold shift to move by 10%", role: "slider", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuetext": `Saturation: ${Math.round(this.currentColor.saturation * 100)}%, Lightness: ${Math.round(this.currentColor.lightness * 100)}%`, style: {
289
289
  left: Math.round(saturation * 100) + "%",
290
290
  bottom: Math.round(lightness * 100) + "%"
291
- }, onKeyDown: (e) => this.handleSaturationLightnessKeyDown(e), onFocus: () => this.focused = true, onBlur: () => this.focused = false })), h("div", { key: '22d2b5063dd641af85f89148703da4c06a8a206d', class: "dnn-color-bar" }, h("div", { key: '595f25c31abfdb96abbe88ff9427e2030affacc0', class: "dnn-color-result", style: {
291
+ }, onKeyDown: (e) => this.handleSaturationLightnessKeyDown(e), onFocus: () => this.focused = true, onBlur: () => this.focused = false })), h("div", { key: '1ac761c0b53f096f585bba62eb63048aa00ec244', class: "dnn-color-bar" }, h("div", { key: '67e90b41602a2667c4820cf77e855d12309b71f1', class: "dnn-color-result", style: {
292
292
  backgroundColor: '#' + this.getHex(),
293
293
  boxShadow: "0 0 2px 1px " + "#" + this.getContrast()
294
- } }), h("div", { key: 'a09e921da35557cffb44e7a9355cf0008c5a2190', class: "dnn-color-hue", ref: (element) => this.hueRange = element, onMouseDown: this.handleHueMouseDown.bind(this) }, h("button", { key: '3e047784cb4cbba615bc11e21b2a75585cff080b', class: "dnn-hue-picker", "aria-label": "Press left or right to adjust hue, hold shift to move by 10 degrees", role: "slider", "aria-valuemin": "0", "aria-valuemax": "359", "aria-valuenow": Math.round(hue), style: { left: (hue / 359 * 100).toString() + "%" }, onKeyDown: (e) => this.handleHueKeyDown(e) })))), h("div", { key: '7b51561878b4382cf8bebc8383f4b021277b6484', class: "dnn-color-fields" }, h("div", { key: '83774c93598078c9575924b05656ee747d77b1c3', class: "dnn-rgb-color-fields", style: { display: this.rgbDisplay } }, h("div", { key: '02a317e6c0ec62e367d6d5002eefec1067ffbfd4', class: "dnn-rgb-color-field" }, h("label", { key: '898ef5cf648ed2e2c78df30d033382203f4ed2cf' }, "R"), h("input", { key: 'e4a761675ebf4bdd4d2f9b6f49cc9d496648fe38', type: "number", min: "0", max: "255", step: "1", class: "red", value: red, "aria-label": "red value", onChange: (e) => this.handleComponentValueChange(e, 'red') })), h("div", { key: '3f41f9f9e62013c33060e7b6f613070f5d58257c', class: "dnn-rgb-color-field" }, h("label", { key: 'ee45595f44fb7122905b438abbe5167a1b593e82' }, "G"), h("input", { key: '3fcc6047fcb8248c99c22911da96cab59b7b5af6', type: "number", min: "0", max: "255", class: "green", value: green, "aria-label": "green value", onChange: (e) => this.handleComponentValueChange(e, 'green') })), h("div", { key: '8d806b41090345515922e2ec371be5441d2e04e9', class: "dnn-rgb-color-field" }, h("label", { key: '1d0dd3af95e1016852ea5f9e400adacef7225a43' }, "B"), h("input", { key: 'e86c057240a1d8f3d17b64e66b13e390df1f6864', type: "number", min: "0", max: "255", class: "blue", value: blue, "aria-label": "blue value", onChange: (e) => this.handleComponentValueChange(e, 'blue') })), h("div", { key: '192b4ff049c05cccb86fe713fbd6980d687822a1', class: "dnn-color-mode-switch" }, h("button", { key: '30b009720f3fd6805249b7e23aa4c536877974b0', id: "rgb-switch", onClick: this.switchColorMode.bind(this), "aria-label": "switch to hexadecimal value entry" }, h("svg", { key: '60384168518b2acae849ad0182cc73c395996e55', xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, h("path", { key: '8716e942521a53b65f243a007a69b25a90d96f7e', d: "M0 0h24v24H0z", fill: "none" }), h("path", { key: '43286c1abbd8e50b6fd57d26ecd7ffa4f7c169c2', d: "M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z" }))))), h("div", { key: '8f6cbfb39b67c5587642a77e09567a8ec06338cf', class: "dnn-hsl-color-fields", style: { display: this.hslDisplay } }, h("div", { key: '0ec67be5d6ba3af54a59319cf47a433076b22f1a', class: "dnn-hsl-color-field" }, h("label", { key: '49455314fd8fdb5287f9033382ad6daa32fac2eb' }, "H"), h("input", { key: '4c16035b6b331b2b73333243b5c031641a40f8b9', type: "number", min: "0", max: "359", step: 1, value: Math.round(hue), "aria-label": "Hue", onChange: (e) => this.handleHSLChange(e, 'hue') })), h("div", { key: '2b5328e51869dc461f6c223150ba89fb1fb0c9d1', class: "dnn-hsl-color-field" }, h("label", { key: '6fd47e30c3b520b44d4b146e72a6d1f3e80b7bff' }, "S"), h("input", { key: '0d9684fed8094a295d2926f04b890ae315e82b36', type: "number", min: "0", max: "100", step: 1, value: Math.round(saturation * 100), "aria-label": "Saturation", onChange: (e) => this.handleHSLChange(e, 'saturation') })), h("div", { key: '61dea83d7e66a3e42d81c91ddafa6cc38edf848f', class: "dnn-hsl-color-field" }, h("label", { key: '2b725ac0706de98d7b9c5a403b2af8d1dfc99bfe' }, "L"), h("input", { key: 'c36fcf1347961bea27b7832c827b8d77fa113071', type: "number", min: "0", max: "100", step: 1, value: Math.round(lightness * 100), "aria-label": "Lightness", onChange: (e) => this.handleHSLChange(e, 'lightness') })), h("div", { key: '1b5fab2ebdd349bfde3d892a7ce20e5be8becfa5', class: "dnn-color-mode-switch" }, h("button", { key: '9af86f6c10b8edcdbbee95a581c45c52bf8d5761', id: "hsl-switch", onClick: this.switchColorMode.bind(this), "aria-label": "Switch to red, green, blue entry mode" }, h("svg", { key: '91852e938e0ccb8318dd7a9b5548c2d2f2a4fa86', xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, h("path", { key: '1ca5aa1d19bf8c84979ddd072744b19400288a36', d: "M0 0h24v24H0z", fill: "none" }), h("path", { key: '6581be641c862805590dce8003523086b0f17f07', d: "M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z" }))))), h("div", { key: 'a69134e39b2c824f85932db783a87bba27ad0df4', class: "dnn-hex-color-fields", style: { display: this.hexDisplay } }, h("div", { key: '427fd43b15a906590c08566d91d06ff2f0be5194', class: "dnn-hex-color-field" }, h("label", { key: '7308bd6ab3e22d2d9f2cac7b234212384fe86419' }, "HEX"), h("div", { key: '092f370eda67a17b7216b3cf23624c826e952360', class: "hex-input" }, h("input", { key: '51fc344cb6adebc7ce808ea691cc6bdc511bd4fc', type: "text", "aria-label": "Hexadecimal value", value: this.getHex(), onChange: e => this.handleHexChange(e.target.value) }), h("button", { key: '7e870d2ee5736175be9834afe1de5e3199f6982f', class: "copy", "aria-label": "copy value" }, h("svg", { key: 'c56b2a42035991f93c46371d85c40d3e11f17734', xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, h("path", { key: 'd1302c6c2fba44441b1df4aa792414a7fa9ec698', d: "M0 0h24v24H0z", fill: "none" }), h("path", { key: '9457bc2deb1d2acd5c6d5bca5e68f41aeac93cb1', d: "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" }))))), h("div", { key: '7c0218eba7f3d516734cf644e0191abc99b56608', class: "dnn-color-mode-switch" }, h("button", { key: 'e0ecb70e7e7360231bc17da87c63dbcc71ae8e7d', id: "hex-switch", onClick: this.switchColorMode.bind(this), "aria-label": "Switch to hue saturation lightness values" }, h("svg", { key: '783ab05c6aa74ca4687eaadfcd1550438cc70981', xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, h("path", { key: 'd90dfa65c0df191d30d9bf74ad68ccbb79449fa2', d: "M0 0h24v24H0z", fill: "none" }), h("path", { key: '1bcae0d28af993b589e34306bde187ef386d7e29', d: "M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z" })))))))));
294
+ } }), h("div", { key: '4b6593671043f63f14641f3335ccf39b04b0fe5d', class: "dnn-color-hue", ref: (element) => this.hueRange = element, onMouseDown: this.handleHueMouseDown.bind(this) }, h("button", { key: '01c59ab72393b1d7dfef31196adfc6d10e68ceb0', class: "dnn-hue-picker", "aria-label": "Press left or right to adjust hue, hold shift to move by 10 degrees", role: "slider", "aria-valuemin": "0", "aria-valuemax": "359", "aria-valuenow": Math.round(hue), style: { left: (hue / 359 * 100).toString() + "%" }, onKeyDown: (e) => this.handleHueKeyDown(e) })))), h("div", { key: 'f2cd5649fb1788700a1e40bc28d0293e6522df02', class: "dnn-color-fields" }, h("div", { key: '261f1f240094a62d976cbddcb5d1d53772776ddc', class: "dnn-rgb-color-fields", style: { display: this.rgbDisplay } }, h("div", { key: '61416a06bff45ac743e03a117f932f217f02c1c0', class: "dnn-rgb-color-field" }, h("label", { key: '27b5b1742d903aeb5b5f3f2edcf69b29c32eab39' }, "R"), h("input", { key: '86b35afd62520a4c1b712ced31ed079e3e5394f7', type: "number", min: "0", max: "255", step: "1", class: "red", value: red, "aria-label": "red value", onChange: (e) => this.handleComponentValueChange(e, 'red') })), h("div", { key: '69115f117b7d0f619765b2a01503ad17448263c5', class: "dnn-rgb-color-field" }, h("label", { key: '6f1870bd898b2f7d061075dedac54a6f81bd4ee0' }, "G"), h("input", { key: 'e48f0a48c8a4cf69a4893cb8d8c74084bfc3044c', type: "number", min: "0", max: "255", class: "green", value: green, "aria-label": "green value", onChange: (e) => this.handleComponentValueChange(e, 'green') })), h("div", { key: 'c6ef7f77a1c34a9960c72a618d54391c53f74f4d', class: "dnn-rgb-color-field" }, h("label", { key: 'bb4e309c363171764bde998fe58430b4eb6ebf4f' }, "B"), h("input", { key: 'e9dfe614313e271b45ca0c60ba26655d59f39447', type: "number", min: "0", max: "255", class: "blue", value: blue, "aria-label": "blue value", onChange: (e) => this.handleComponentValueChange(e, 'blue') })), h("div", { key: '29ef67398fc1522c0564f62033039f77b49edc2b', class: "dnn-color-mode-switch" }, h("button", { key: 'd0367da5c40215fbd1f3eadf10dd6bca08a963a6', id: "rgb-switch", onClick: this.switchColorMode.bind(this), "aria-label": "switch to hexadecimal value entry" }, h("svg", { key: '53cb5cdae4143c70e8240990d842ea4457d7ae14', xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, h("path", { key: '0271d81c2bd99e134803b4edab2a7272a6020d87', d: "M0 0h24v24H0z", fill: "none" }), h("path", { key: 'd25d380ab10e7109238476344c6b5c638a4f96ca', d: "M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z" }))))), h("div", { key: '6698763d1fbb8d2c1da28e0d42f6be753b14c4c8', class: "dnn-hsl-color-fields", style: { display: this.hslDisplay } }, h("div", { key: '28173e72c4e7fee625fca382b80f824b9488cfb7', class: "dnn-hsl-color-field" }, h("label", { key: 'dfdb1809df786e1ff923e8c3e3161f53654ba685' }, "H"), h("input", { key: 'd9e7c99eb2a50c938e6021bf49131309507e96b1', type: "number", min: "0", max: "359", step: 1, value: Math.round(hue), "aria-label": "Hue", onChange: (e) => this.handleHSLChange(e, 'hue') })), h("div", { key: 'a4fdbdd1f043a550d1d0b8ab8a0b7f04994cf8d5', class: "dnn-hsl-color-field" }, h("label", { key: 'c96a8928f7f36e403e24938c5cec79aa74b00a25' }, "S"), h("input", { key: '7c1bb89131a0cf7f3062f2e8cf73c14fd2932db8', type: "number", min: "0", max: "100", step: 1, value: Math.round(saturation * 100), "aria-label": "Saturation", onChange: (e) => this.handleHSLChange(e, 'saturation') })), h("div", { key: '067f8b87d94bb6e7d7a95ff043282b2e049898a0', class: "dnn-hsl-color-field" }, h("label", { key: 'f77c69f8e0fbef9b25692acca6ed5c3007a1b53c' }, "L"), h("input", { key: 'b65b95e1fd5926a44f83f219f2bb96c89c489a28', type: "number", min: "0", max: "100", step: 1, value: Math.round(lightness * 100), "aria-label": "Lightness", onChange: (e) => this.handleHSLChange(e, 'lightness') })), h("div", { key: 'c0cfb39dcf480e86355a0c87e416fa054aa9f4e5', class: "dnn-color-mode-switch" }, h("button", { key: '8c19afde9cfb3b8333a1313e55395b92f34dec2c', id: "hsl-switch", onClick: this.switchColorMode.bind(this), "aria-label": "Switch to red, green, blue entry mode" }, h("svg", { key: '54ccf0a690d6e2a102c33a0dbc1d08cf99c11ed0', xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, h("path", { key: '87f25bab11448e091e4427a82e40e44956aa83a1', d: "M0 0h24v24H0z", fill: "none" }), h("path", { key: '3a83e2cf45ee881ae05fb73e2077289d73a140af', d: "M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z" }))))), h("div", { key: '0b7a592d2230136808b34ed36e5c84ee56328e53', class: "dnn-hex-color-fields", style: { display: this.hexDisplay } }, h("div", { key: 'aa832989de6451ea2abdb0cf5282a99b2ba0a6eb', class: "dnn-hex-color-field" }, h("label", { key: 'f5319d53261202307f5984172143e440995427e9' }, "HEX"), h("div", { key: 'e68434340c0b59d6fb24f0c509c861b948842b68', class: "hex-input" }, h("input", { key: 'fb40e1d785cfcc29b43a788d6ef9fd447ca01401', type: "text", "aria-label": "Hexadecimal value", value: this.getHex(), onChange: e => this.handleHexChange(e.target.value) }), h("button", { key: 'e6a21c14dc0d7005d92538014031e6675becea5e', class: "copy", "aria-label": "copy value" }, h("svg", { key: 'beb4d7d7f5a97f27db768b29e478949ba84a23d7', xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, h("path", { key: '3376034e2172767665169ad4476f025b97746665', d: "M0 0h24v24H0z", fill: "none" }), h("path", { key: 'd0bbb664e9d5c77a9a5a9c155e90e4666b6168bf', d: "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" }))))), h("div", { key: '20aee791254a22327a58a8bc570c25cf0ea436a7', class: "dnn-color-mode-switch" }, h("button", { key: '2b978bff44ce5a51461ed03d4f1df40c0e77c5af', id: "hex-switch", onClick: this.switchColorMode.bind(this), "aria-label": "Switch to hue saturation lightness values" }, h("svg", { key: '34eef4f8d254a78519a8ce254d97fbc2f5d3c728', xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, h("path", { key: 'dd50ec024953f5f09fd593f2fe181bcf220fd7a5', d: "M0 0h24v24H0z", fill: "none" }), h("path", { key: '5817f1b8f93fec23a215124272a084a4d7cef286', d: "M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z" })))))))));
295
295
  }
296
296
  static get is() { return "dnn-color-picker"; }
297
297
  static get encapsulation() { return "shadow"; }
@@ -182,25 +182,25 @@ export class DnnDropzone {
182
182
  }
183
183
  render() {
184
184
  var _a, _b, _c, _d, _e, _f;
185
- return (h(Host, { key: '6608b85ebba7b7314db57d0c49a7171637bdfaed', ref: e => this.dropzone = e, class: "dropzone", onDragOver: e => this.handleDragOver(e), onDrop: e => this.handleDrop(e), onDragLeave: () => this.dropzone.classList.remove("dropping"), tabIndex: this.focused ? -1 : 0, onFocus: () => this.uploadLabel.focus(), onBlur: () => this.uploadLabel.blur() }, !this.takingPicture &&
185
+ return (h(Host, { key: 'e8cb239b37d1be0f7c41240465cd6a158ab0097b', ref: e => this.dropzone = e, class: "dropzone", onDragOver: e => this.handleDragOver(e), onDrop: e => this.handleDrop(e), onDragLeave: () => this.dropzone.classList.remove("dropping"), tabIndex: this.focused ? -1 : 0, onFocus: () => this.uploadLabel.focus(), onBlur: () => this.uploadLabel.blur() }, !this.takingPicture &&
186
186
  [
187
- h("p", { key: '35ab671d7aeeb20544224614971f4ef1a2a0b8cc' }, (_a = this.localResx) === null || _a === void 0 ? void 0 : _a.dragAndDropFile),
188
- h("p", { key: 'c06aea19c7321e0e7dd86d877965c366fb87a0b4' }, "- ", (_b = this.localResx) === null || _b === void 0 ? void 0 :
187
+ h("p", { key: '0a6f9cdb3eef3449dc2092cd6ed5d32e431f3c2d' }, (_a = this.localResx) === null || _a === void 0 ? void 0 : _a.dragAndDropFile),
188
+ h("p", { key: '1179185c6fa4615e9f3ad362e7f7b663c80ee8f9' }, "- ", (_b = this.localResx) === null || _b === void 0 ? void 0 :
189
189
  _b.or, " -"),
190
- h("label", { key: '6a0d18aa5dc5d398dc66ab897e338798cc908abf', class: "upload-file", tabIndex: 0, onKeyDown: e => this.handleUploadKeyDown(e), ref: el => this.uploadLabel = el, onFocus: () => this.focused = true, onBlur: () => this.focused = false }, h("input", { key: '4338b34785c38872f6d6e8138f32910f3aa969e5', type: "file", ref: el => this.fileInput = el, onChange: e => this.handleUploadButton(e.target) }), h("span", { key: 'e19b2bc369417aea4549b7c4f8cbf5cd82eb5038' }, h("svg", { key: '460447b54c87e4e764c730d63d04109649b0e5bd', xmlns: "http://www.w3.org/2000/svg", "enable-background": "new 0 0 24 24", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, h("g", { key: '3e987857304dcb3b00658c5b59c9d71b537827bd' }, h("rect", { key: '2ef89e26cf62fec520c2c0e28e1dd84ce127e78f', fill: "none", height: "24", width: "24" })), h("g", { key: 'c128c63a6474b183071c88146b8f3709c3638ceb' }, h("path", { key: '491efacd9c0877133074a0899b1d92702c514f34', d: "M5,20h14v-2H5V20z M5,10h4v6h6v-6h4l-7-7L5,10z" })))), "\u00A0", (_c = this.localResx) === null || _c === void 0 ? void 0 :
190
+ h("label", { key: '15a2262c638dd5b4b2f5c0d51fb4d361ccdc98cc', class: "upload-file", tabIndex: 0, onKeyDown: e => this.handleUploadKeyDown(e), ref: el => this.uploadLabel = el, onFocus: () => this.focused = true, onBlur: () => this.focused = false }, h("input", { key: '8890c891d3805213887403528b9e8d8661f81100', type: "file", ref: el => this.fileInput = el, onChange: e => this.handleUploadButton(e.target) }), h("span", { key: 'e4b5083f873c27f7550f29ee5d6f433a4e79ab58' }, h("svg", { key: '3f3d9e3e491ab3159767da319d08b3a07c08a65d', xmlns: "http://www.w3.org/2000/svg", "enable-background": "new 0 0 24 24", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, h("g", { key: 'd88531469503abfc3b33940f7f690545a6bd7c47' }, h("rect", { key: '67cfd319af430b66b2c3c4db9cf043b5ca8b44d2', fill: "none", height: "24", width: "24" })), h("g", { key: '929ff336aa3a765c6b0ae3804af479152f15580e' }, h("path", { key: '423d42dd1312a6e92e58112c9abb17c9747c5edc', d: "M5,20h14v-2H5V20z M5,10h4v6h6v-6h4l-7-7L5,10z" })))), "\u00A0", (_c = this.localResx) === null || _c === void 0 ? void 0 :
191
191
  _c.uploadFile),
192
192
  this.canTakeSnapshots &&
193
193
  [
194
- h("p", { key: '6105868196fddc2c7276b1768316619236aeb810' }, "- ", (_d = this.localResx) === null || _d === void 0 ? void 0 :
194
+ h("p", { key: '79d4eba604972b765af99a259444017effc430d0' }, "- ", (_d = this.localResx) === null || _d === void 0 ? void 0 :
195
195
  _d.or, " -"),
196
- h("button", { key: 'fedf250dfb20152576240cdf0f77a61e30809e19', onClick: () => this.takeSnapshot() }, h("svg", { key: 'a8f6f1cb019dd3bb51b97b47e9449a05dac4084a', xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, h("path", { key: '730307ea0b4bcf4ea57e53fa6b47982ca9d8e277', d: "M0 0h24v24H0z", fill: "none" }), h("circle", { key: 'b86742f1f09c98cdb755b3f6c07a8c59f92c9132', cx: "12", cy: "12", r: "3.2" }), h("path", { key: '46743718f4d58f109e0ce1a554800e0e77ed3fe8', d: "M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z" })), (_e = this.localResx) === null || _e === void 0 ? void 0 :
196
+ h("button", { key: '181c7f2c3e0fe10a0e442f671b585d7fd52240e4', onClick: () => this.takeSnapshot() }, h("svg", { key: 'a7895b7adac1558f45ccccc87f449bb2ffec557c', xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, h("path", { key: '23128d601f71f2e8cd8af075fe74de8e7f67e92c', d: "M0 0h24v24H0z", fill: "none" }), h("circle", { key: 'a082e32a026bfa4586fe203783cbd585e244f774', cx: "12", cy: "12", r: "3.2" }), h("path", { key: '8f1b6b43558cb3ad0e375b01f71da751d88afea8', d: "M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z" })), (_e = this.localResx) === null || _e === void 0 ? void 0 :
197
197
  _e.takePicture)
198
198
  ]
199
199
  ], this.takingPicture &&
200
- h("div", { key: '98089e0d3d6c77c68d22d4f490dfe00d8cf0647a', class: "video-preview" }, h("video", { key: 'badfea495c6b99702403b6ae40f7172efd2657e8', ref: e => this.videoPreview = e }), h("button", { key: '78401461e485ac9de845fe618d327f18ed82f6fe', onClick: () => this.applySnapshot() }, h("svg", { key: 'c6a26b54bf3f16c7430e5fec893b9d0f5d41a5e1', xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, h("path", { key: 'c89c76d9f2771f4ed31fc7a7322dc88109257cf2', d: "M0 0h24v24H0z", fill: "none" }), h("circle", { key: 'e3136fe39c3d78d3f5a5e176000f277b74fca3b5', cx: "12", cy: "12", r: "3.2" }), h("path", { key: '65e635efbb337b80974e550e64441e7d7c97fa22', d: "M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z" })), "\u00A0", (_f = this.localResx) === null || _f === void 0 ? void 0 :
200
+ h("div", { key: '48ccb4be518d323659462b075f0ee2bf6d7ae052', class: "video-preview" }, h("video", { key: '26659446b8ac3c291aa89352c19515978e0596f8', ref: e => this.videoPreview = e }), h("button", { key: '9b7699d716d94611d4b3ae7590a5e76efe4f8b83', onClick: () => this.applySnapshot() }, h("svg", { key: '5576687f6e6592825ff4d89e12cc8da2cacf7b49', xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, h("path", { key: 'fb833f77e4803eb29d6eb68a92e1a9de775c756b', d: "M0 0h24v24H0z", fill: "none" }), h("circle", { key: '0abc995fbda0ce7af15004867d8cced2e153577d', cx: "12", cy: "12", r: "3.2" }), h("path", { key: 'd3045fa3aecc259628598a2ed67c38a7721f1148', d: "M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z" })), "\u00A0", (_f = this.localResx) === null || _f === void 0 ? void 0 :
201
201
  _f.capture)), this.fileTooLarge &&
202
- h("div", { key: 'cbb7a4576bf76aed41393768d52fec1ac55de96d', class: 'error' }, h("p", { key: 'e4e287d4a6ffcf8efff38f8de3c2091e24549733' }, this.localResx.uploadSizeTooLarge, h("br", { key: '9b7e2d741f1e5a99f4f8ff30081832ae03b0720e' }), this.localResx.fileSizeLimit.replace("{0}", getReadableFileSizeString(this.maxFileSize)))), this.invalidExtension &&
203
- h("div", { key: '5c1d76222475b94ce5fcd2519db9d5ffa56b983e', class: 'error' }, h("p", { key: '31b4dbc1e612db9634061acc4abd4390be401f28' }, this.localResx.invalidExtension, h("br", { key: '87a3bea37f1252b347747fbd00ffeda7822a0db6' }), this.getInvalidExtensionsMessage()))));
202
+ h("div", { key: 'b66d8d9f21a9948595df5217f9745e8ecc08f779', class: 'error' }, h("p", { key: '080b2779e7656c953d77a4b9719cc4984890ec87' }, this.localResx.uploadSizeTooLarge, h("br", { key: '683ecdcf26529260f25e16988be94a71d570c61f' }), this.localResx.fileSizeLimit.replace("{0}", getReadableFileSizeString(this.maxFileSize)))), this.invalidExtension &&
203
+ h("div", { key: '3b48bf8ba1e235d2f4fb3e2192cf18735dfa35df', class: 'error' }, h("p", { key: 'c0b42d27ae92e7d38d48fe9ac86c70d9d657b8c7' }, this.localResx.invalidExtension, h("br", { key: '1e0995b7bb02db676e56840e5692b36e2ca5191a' }), this.getInvalidExtensionsMessage()))));
204
204
  }
205
205
  static get is() { return "dnn-dropzone"; }
206
206
  static get encapsulation() { return "shadow"; }
@@ -60,10 +60,10 @@ export class DnnFieldset {
60
60
  return classes.join(" ");
61
61
  }
62
62
  render() {
63
- return (h(Host, { key: '7ee42e394faac7673753be66dc1c4796f4d3cbf7' }, h("div", { key: 'cbc711c65ac10f3848014658228f6b28e8c2f855', class: this.getContainerClasses() }, this.label &&
64
- h("label", { key: '4175e907013de07a8bfff4a1b760f707c47c9780' }, h("slot", { key: 'c665a4a1e89667b6796fdebf7a399cf73f3a2d5a', name: "label-prefix" }), this.label, h("slot", { key: 'f38bc75b747a9690578235e67c614fe7bac802fc', name: "label-suffix" })), h("div", { key: 'e94e37a5c5fe4284e60011d15453a0745eed4ef4', class: "resizer", style: { resize: this.resizable, overflow: this.resizable == "none" ? "visible" : "auto" } }, h("div", { key: 'eca3a5f55cbdeb75912a091a31a495b0d7abd6d8', class: "inner-container" }, h("slot", { key: '6dcfd24831f36fcf33b78a172b2f1a04773957bd' })))), this.invalid && this.customValidityMessage &&
65
- h("div", { key: '6d939440282fa9bf11ef431edaea1199e9183e4b', class: "error-message" }, this.customValidityMessage), !this.invalid &&
66
- h("div", { key: '14d4661d357fb3a97e2fbba748cb2126389d1c53', class: "help-text" }, this.helpText)));
63
+ return (h(Host, { key: 'f97ae39c92d41cd55c68e49726d2d03cd95d5a4e' }, h("div", { key: '428c954731215899b0b8d85132c93d2452dabf1d', class: this.getContainerClasses() }, this.label &&
64
+ h("label", { key: '1430170d4d130c7174f4bb369520ecff89e42b23' }, h("slot", { key: '381665dc530db579968d89fe826f081b4d7c0957', name: "label-prefix" }), this.label, h("slot", { key: '513395e461546b1b3cf214c59f4afe5ba580ffd9', name: "label-suffix" })), h("div", { key: '621ddedaf8da8d3e79346778a70e9de7039483fe', class: "resizer", style: { resize: this.resizable, overflow: this.resizable == "none" ? "visible" : "auto" } }, h("div", { key: '42b3cd52e1a8182abfc3eba043ab79b80f15d310', class: "inner-container" }, h("slot", { key: 'a4225c9af1d7e2fd613e0b3b1975c53ef98e8448' })))), this.invalid && this.customValidityMessage &&
65
+ h("div", { key: '917c3db73b9eef42934152494cf0cb03e94082df', class: "error-message" }, this.customValidityMessage), !this.invalid &&
66
+ h("div", { key: '5300002ff371d1b32292831e7849db4d985059c1', class: "help-text" }, this.helpText)));
67
67
  }
68
68
  static get is() { return "dnn-fieldset"; }
69
69
  static get encapsulation() { return "shadow"; }
@@ -409,7 +409,7 @@ export class DnnImageCropper {
409
409
  }
410
410
  render() {
411
411
  var _a, _b;
412
- return (h(Host, { key: '0cf57fcffcf8f7b3fd7e04ea3f85ae439e571107', tabIndex: this.focused ? -1 : 0, onFocus: () => this.inputField.focus(), onBlur: () => this.inputField.blur() }, h("canvas", { key: '46c29b18dbc1bc5583ba45aec7ab4555e5272f74', ref: el => this.canvas = el }), h("div", { key: '6219ab6bf13079342ed400a91e4d11a9d0e7796d', class: "view", ref: el => this.hasPictureView = el }, h("div", { key: 'c92ab81fc2b5bef22e759bd5be585bc3de29ed9e', class: "cropper" }, h("img", { key: '0633788e3d2718288e8edfb68d9a7890bcd4e011', ref: el => this.image = el }), h("div", { key: '87e72dbbd2f7c9aa2164fa5231215ba445cba41a', class: "backdrop" }), h("div", { key: 'a7de918251132e4a8c8d563a291103958987d3ae', class: "crop", ref: e => this.crop = e, onMouseDown: this.handleCropMouseDown, onTouchStart: this.handleCropMouseDown }, h("div", { key: '47dacbe094703b8d731ab37fa160afaed81b2a9e', class: "nw" }), h("div", { key: 'e22617dace42771c6148bbcaa1f406ca66b55aa7', class: "ne" }), h("div", { key: 'b99d0fc12419e4a1189e7b14d482764494407350', class: "se" }), h("div", { key: 'd6a18896f2db1b25b9dccfcd46495a27d39b8392', class: "sw" })))), h("div", { key: '5cde8fce68a4ad42d4c1cae5e193e6ef090caa89', class: "view", ref: el => this.noPictureView = el }, h("dnn-dropzone", { key: '811fef8f71ec0017d5b9fb5911a38440afdd83bd', allowCameraMode: true, onFilesSelected: e => this.handleNewFile(e.detail[0]), allowedExtensions: ['jpg', 'jpeg', 'gif', 'png', 'svg', 'webp', 'bmp'], resx: {
412
+ return (h(Host, { key: '381246ee476b95d7869bbdaef99e4032aabefb3a', tabIndex: this.focused ? -1 : 0, onFocus: () => this.inputField.focus(), onBlur: () => this.inputField.blur() }, h("canvas", { key: '86c84108ff8438cc20e840d6f6ea14597b547c7f', ref: el => this.canvas = el }), h("div", { key: '709fcd6dbd4385a3b46b7621367a3448aa3aee30', class: "view", ref: el => this.hasPictureView = el }, h("div", { key: 'd5ebd8b8ba823e62d6702254fcd4bd5d57439fe3', class: "cropper" }, h("img", { key: '85c591654d1c794be00067d105b04e09d7219d7c', ref: el => this.image = el }), h("div", { key: 'e21d5065734dddac7093b51c409fcd452ed079c6', class: "backdrop" }), h("div", { key: '72ae44e6cbdcc1ac76751fb82a7be59eed5bb5d1', class: "crop", ref: e => this.crop = e, onMouseDown: this.handleCropMouseDown, onTouchStart: this.handleCropMouseDown }, h("div", { key: '1da722312999868d8c47af1608f918cbf4478713', class: "nw" }), h("div", { key: '4e5fb43ff7e69bf8b498391317df0fc5716d2999', class: "ne" }), h("div", { key: '4b2eba3a46f7514b3d9e446d6dc27d6102554fd4', class: "se" }), h("div", { key: 'eb92e846bdbd2409ead0d4339f30c6d78b0e1225', class: "sw" })))), h("div", { key: '2cf6c91c1b5cb2517f84e5c39548be4213fc27c2', class: "view", ref: el => this.noPictureView = el }, h("dnn-dropzone", { key: 'c9c2e904842f8462b87952836fa864a9e09079f2', allowCameraMode: true, onFilesSelected: e => this.handleNewFile(e.detail[0]), allowedExtensions: ['jpg', 'jpeg', 'gif', 'png', 'svg', 'webp', 'bmp'], resx: {
413
413
  capture: this.localResx.capture,
414
414
  dragAndDropFile: this.localResx.dragAndDropFile,
415
415
  or: this.localResx.or,
@@ -417,7 +417,7 @@ export class DnnImageCropper {
417
417
  uploadFile: this.localResx.uploadFile,
418
418
  uploadSizeTooLarge: "The file you tried to upload is too large.",
419
419
  fileSizeLimit: "The maximum size is",
420
- }, ref: el => this.inputField = el, onFocus: () => this.focused = true, onBlur: () => this.focused = false })), h("dnn-modal", { key: 'a0af03e617ea2a6ad0d642fda94cfd5350443bed', ref: el => this.imageTooSmallModal = el, "close-text": this.localResx.modalCloseText }, h("p", { key: 'bb63e3854ecccdb448db5494067a50acc899b6a6' }, this.localResx.imageTooSmall.replace("{width}", (_a = this.width) === null || _a === void 0 ? void 0 : _a.toString()).replace("{height}", (_b = this.height) === null || _b === void 0 ? void 0 : _b.toString())))));
420
+ }, ref: el => this.inputField = el, onFocus: () => this.focused = true, onBlur: () => this.focused = false })), h("dnn-modal", { key: 'd70385ac62db570303947cd133a6dace89851fe3', ref: el => this.imageTooSmallModal = el, "close-text": this.localResx.modalCloseText }, h("p", { key: 'c96b96c98b7a7918b0f954323cb30146ead874a3' }, this.localResx.imageTooSmall.replace("{width}", (_a = this.width) === null || _a === void 0 ? void 0 : _a.toString()).replace("{height}", (_b = this.height) === null || _b === void 0 ? void 0 : _b.toString())))));
421
421
  }
422
422
  static get is() { return "dnn-image-cropper"; }
423
423
  static get encapsulation() { return "shadow"; }
@@ -111,13 +111,13 @@ export class DnnInput {
111
111
  }
112
112
  render() {
113
113
  var _a;
114
- return (h(Host, { key: '5eb92abaa8138bf2b83e093d7bf4bdc358ec0419', tabIndex: this.focused ? -1 : 0, onFocus: () => this.inputField.focus(), onBlur: () => this.inputField.blur() }, h("dnn-fieldset", { key: '79ee21f5a6b49f6566a03af66d9cffab2f13f8c2', ref: el => this.fieldset = el, invalid: !this.valid, focused: this.focused, label: `${(_a = this.label) !== null && _a !== void 0 ? _a : ""}${this.required ? " *" : ""}`, helpText: this.helpText, id: this.labelId, disabled: this.disabled, floatLabel: this.shouldLabelFloat(), onClick: () => !this.focused && this.inputField.focus(), onFocus: () => this.focused = true, onBlur: () => this.focused = false }, h("div", { key: 'ca4753fe9120baf30d913a2bae0f829fe9f7e0f4', class: "inner-container" }, !this.shouldLabelFloat() &&
115
- h("slot", { key: '230525f8eb5b51e0a2aa5f2d042e6330e4aa996a', name: "prefix" }), h("input", { key: '1279ff2fadac8148fe20afb642a8a58805e8d1c7', ref: el => this.inputField = el, name: this.name, type: this.type, disabled: this.disabled, required: this.required, autoComplete: this.autocomplete, min: this.min, max: this.max, minlength: this.minlength, maxlength: this.maxlength, multiple: this.multiple, pattern: this.pattern, readonly: this.readonly, step: this.step, value: this.value, onBlur: () => this.handleBlur(), onFocus: () => this.focused = true, onInput: e => this.handleInput(e.target.value), onInvalid: () => this.handleInvalid(), onChange: () => this.handleChange(), "aria-labelledby": this.labelId }), !this.shouldLabelFloat() &&
116
- h("slot", { key: '88b5f27fe9492e939307847b081f8bdedad34b93', name: "suffix" }), !this.valid &&
117
- h("svg", { key: '7876b653695274d60b821ba68b64616e088aedb3', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", class: "error" }, h("path", { key: '8ef4ad579bdd56f1abde5c83541e0a895f9455d9', d: "M479.982-280q14.018 0 23.518-9.482 9.5-9.483 9.5-23.5 0-14.018-9.482-23.518-9.483-9.5-23.5-9.5-14.018 0-23.518 9.482-9.5 9.483-9.5 23.5 0 14.018 9.482 23.518 9.483 9.5 23.5 9.5ZM453-433h60v-253h-60v253Zm27.266 353q-82.734 0-155.5-31.5t-127.266-86q-54.5-54.5-86-127.341Q80-397.681 80-480.5q0-82.819 31.5-155.659Q143-709 197.5-763t127.341-85.5Q397.681-880 480.5-880q82.819 0 155.659 31.5Q709-817 763-763t85.5 127Q880-563 880-480.266q0 82.734-31.5 155.5T763-197.684q-54 54.316-127 86Q563-80 480.266-80Zm.234-60Q622-140 721-239.5t99-241Q820-622 721.188-721 622.375-820 480-820q-141 0-240.5 98.812Q140-622.375 140-480q0 141 99.5 240.5t241 99.5Zm-.5-340Z" })), this.allowShowPassword &&
118
- h("button", { key: 'b20e540212360839c17441550588175cbdc14412', class: "show-password", onClick: () => this.switchPasswordVisibility() }, this.type === "text" &&
119
- h("svg", { key: '09e29c1ed6d3db8ad0321e140f67f536d535d073', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960" }, h("path", { key: '94f712fb1c42a5f480cf203d9abd55abd0d780c9', d: "M480.118-330Q551-330 600.5-379.618q49.5-49.617 49.5-120.5Q650-571 600.382-620.5q-49.617-49.5-120.5-49.5Q409-670 359.5-620.382q-49.5 49.617-49.5 120.5Q310-429 359.618-379.5q49.617 49.5 120.5 49.5Zm-.353-58Q433-388 400.5-420.735q-32.5-32.736-32.5-79.5Q368-547 400.735-579.5q32.736-32.5 79.5-32.5Q527-612 559.5-579.265q32.5 32.736 32.5 79.5Q592-453 559.265-420.5q-32.736 32.5-79.5 32.5ZM480-200q-146 0-264-83T40-500q58-134 176-217t264-83q146 0 264 83t176 217q-58 134-176 217t-264 83Zm0-300Zm-.169 240Q601-260 702.5-325.5 804-391 857-500q-53-109-154.331-174.5-101.332-65.5-222.5-65.5Q359-740 257.5-674.5 156-609 102-500q54 109 155.331 174.5 101.332 65.5 222.5 65.5Z" })), this.type == "password" &&
120
- h("svg", { key: 'b5cd9fce7ff0d483ee5a1995ca60644d3040e0fd', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960" }, h("path", { key: '5e9e01fbd60e6c1e38c23bc2139b147abec2ebd1', d: "m629-419-44-44q26-71-27-118t-115-24l-44-44q17-11 38-16t43-5q71 0 120.5 49.5T650-500q0 22-5.5 43.5T629-419Zm129 129-40-40q49-36 85.5-80.5T857-500q-50-111-150-175.5T490-740q-42 0-86 8t-69 19l-46-47q35-16 89.5-28T485-800q143 0 261.5 81.5T920-500q-26 64-67 117t-95 93Zm58 226L648-229q-35 14-79 21.5t-89 7.5q-146 0-265-81.5T40-500q20-52 55.5-101.5T182-696L56-822l42-43 757 757-39 44ZM223-654q-37 27-71.5 71T102-500q51 111 153.5 175.5T488-260q33 0 65-4t48-12l-64-64q-11 5-27 7.5t-30 2.5q-70 0-120-49t-50-121q0-15 2.5-30t7.5-27l-97-97Zm305 142Zm-116 58Z" })))))));
114
+ return (h(Host, { key: '75a60d744c7321a21e8be2eb5e1e96ed61e81c0e', tabIndex: this.focused ? -1 : 0, onFocus: () => this.inputField.focus(), onBlur: () => this.inputField.blur() }, h("dnn-fieldset", { key: '1dd7ccc6c05d28be7c850117f7f93e7356e44e0b', ref: el => this.fieldset = el, invalid: !this.valid, focused: this.focused, label: `${(_a = this.label) !== null && _a !== void 0 ? _a : ""}${this.required ? " *" : ""}`, helpText: this.helpText, id: this.labelId, disabled: this.disabled, floatLabel: this.shouldLabelFloat(), onClick: () => !this.focused && this.inputField.focus(), onFocus: () => this.focused = true, onBlur: () => this.focused = false }, h("div", { key: '0e320d003cfe21a25592d59ca0832c8d5de434c2', class: "inner-container" }, !this.shouldLabelFloat() &&
115
+ h("slot", { key: '9c7d840d04ad9e1e2e9044e535b231727cd7d56f', name: "prefix" }), h("input", { key: 'ed6c75cea2c9bad544c79312e47131854fdab612', ref: el => this.inputField = el, name: this.name, type: this.type, disabled: this.disabled, required: this.required, autoComplete: this.autocomplete, min: this.min, max: this.max, minlength: this.minlength, maxlength: this.maxlength, multiple: this.multiple, pattern: this.pattern, readonly: this.readonly, step: this.step, value: this.value, onBlur: () => this.handleBlur(), onFocus: () => this.focused = true, onInput: e => this.handleInput(e.target.value), onInvalid: () => this.handleInvalid(), onChange: () => this.handleChange(), "aria-labelledby": this.labelId }), !this.shouldLabelFloat() &&
116
+ h("slot", { key: '442d4adb37d95742d797c976175f4f1bc5f9fe86', name: "suffix" }), !this.valid &&
117
+ h("svg", { key: 'f95905a8e402cc4689afd686f52d2a151236a221', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", class: "error" }, h("path", { key: 'ca7cb76e9df70463206a747bbd9ac1be20e2515b', d: "M479.982-280q14.018 0 23.518-9.482 9.5-9.483 9.5-23.5 0-14.018-9.482-23.518-9.483-9.5-23.5-9.5-14.018 0-23.518 9.482-9.5 9.483-9.5 23.5 0 14.018 9.482 23.518 9.483 9.5 23.5 9.5ZM453-433h60v-253h-60v253Zm27.266 353q-82.734 0-155.5-31.5t-127.266-86q-54.5-54.5-86-127.341Q80-397.681 80-480.5q0-82.819 31.5-155.659Q143-709 197.5-763t127.341-85.5Q397.681-880 480.5-880q82.819 0 155.659 31.5Q709-817 763-763t85.5 127Q880-563 880-480.266q0 82.734-31.5 155.5T763-197.684q-54 54.316-127 86Q563-80 480.266-80Zm.234-60Q622-140 721-239.5t99-241Q820-622 721.188-721 622.375-820 480-820q-141 0-240.5 98.812Q140-622.375 140-480q0 141 99.5 240.5t241 99.5Zm-.5-340Z" })), this.allowShowPassword &&
118
+ h("button", { key: '531517334b451784cd98de67ba24dad5c902afc6', class: "show-password", onClick: () => this.switchPasswordVisibility() }, this.type === "text" &&
119
+ h("svg", { key: '8b0a02d79dc816d4969eab39a19c33b625f72b28', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960" }, h("path", { key: '3b4965787039c15525ed55b7aff8640a3bf48792', d: "M480.118-330Q551-330 600.5-379.618q49.5-49.617 49.5-120.5Q650-571 600.382-620.5q-49.617-49.5-120.5-49.5Q409-670 359.5-620.382q-49.5 49.617-49.5 120.5Q310-429 359.618-379.5q49.617 49.5 120.5 49.5Zm-.353-58Q433-388 400.5-420.735q-32.5-32.736-32.5-79.5Q368-547 400.735-579.5q32.736-32.5 79.5-32.5Q527-612 559.5-579.265q32.5 32.736 32.5 79.5Q592-453 559.265-420.5q-32.736 32.5-79.5 32.5ZM480-200q-146 0-264-83T40-500q58-134 176-217t264-83q146 0 264 83t176 217q-58 134-176 217t-264 83Zm0-300Zm-.169 240Q601-260 702.5-325.5 804-391 857-500q-53-109-154.331-174.5-101.332-65.5-222.5-65.5Q359-740 257.5-674.5 156-609 102-500q54 109 155.331 174.5 101.332 65.5 222.5 65.5Z" })), this.type == "password" &&
120
+ h("svg", { key: '87f2176b428c9ca9260b1ea7e2ce5ed6beae219c', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960" }, h("path", { key: '8acc664162e4b7039f3997949747e17c5def279c', d: "m629-419-44-44q26-71-27-118t-115-24l-44-44q17-11 38-16t43-5q71 0 120.5 49.5T650-500q0 22-5.5 43.5T629-419Zm129 129-40-40q49-36 85.5-80.5T857-500q-50-111-150-175.5T490-740q-42 0-86 8t-69 19l-46-47q35-16 89.5-28T485-800q143 0 261.5 81.5T920-500q-26 64-67 117t-95 93Zm58 226L648-229q-35 14-79 21.5t-89 7.5q-146 0-265-81.5T40-500q20-52 55.5-101.5T182-696L56-822l42-43 757 757-39 44ZM223-654q-37 27-71.5 71T102-500q51 111 153.5 175.5T488-260q33 0 65-4t48-12l-64-64q-11 5-27 7.5t-30 2.5q-70 0-120-49t-50-121q0-15 2.5-30t7.5-27l-97-97Zm305 142Zm-116 58Z" })))))));
121
121
  }
122
122
  static get is() { return "dnn-input"; }
123
123
  static get encapsulation() { return "shadow"; }
@@ -60,8 +60,8 @@ export class DnnModal {
60
60
  }
61
61
  }
62
62
  render() {
63
- return (h(Host, { key: '550cfbaf063c83353c10e1a14d9fc948b7885013' }, h("div", { key: 'b9c419240ce6bebef824e88d6e32d45e7f226c14', id: "backdrop", class: this.visible ? 'overlay visible' : 'overlay', onClick: e => this.handleBackdropClick(e) }, h("div", { key: '43487f3b35141fedb9b9b75adf2369fdc8a78a7d', class: "modal", ref: el => this.modal = el }, this.showCloseButton &&
64
- h("button", { key: 'dd05ea7ce7494b298e0a0b3cadecc9ba67479f55', class: "close", "aria-label": this.closeText, onClick: () => this.handleDismiss() }, h("svg", { key: '7c107f426b67cd271624851078d155b0c583a517', xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, h("path", { key: 'b93d2d949d4befb00f32c6018a49352cfd608063', d: "M0 0h24v24H0z", fill: "none" }), h("path", { key: '92b711add6852503391e1d95dadc4e3c2ae58bf4', d: "M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z" }))), h("div", { key: '7e0c87223f7e7fdf96720d1702bbc764806799a9', class: "content" }, h("slot", { key: '578d13ab4ab2abc181c16e664c1569a12ab8e2a1' })), this.resizable && h("div", { key: 'd8c69dfdbd3f1574915132170b1846fe63e544a1', class: 'se', ref: el => this.seDrag = el })))));
63
+ return (h(Host, { key: '5afa6fff1bbbebc41181dae23858a7c401c7b4e2' }, h("div", { key: '732e4d6acbf68cc346531dbbdc22f5d330b0f979', id: "backdrop", class: this.visible ? 'overlay visible' : 'overlay', onClick: e => this.handleBackdropClick(e) }, h("div", { key: 'df4541d67f115d953b4a57510f92fba522f42746', class: "modal", ref: el => this.modal = el }, this.showCloseButton &&
64
+ h("button", { key: 'bea18c2d23fac79da39194d2824af782bed037c2', class: "close", "aria-label": this.closeText, onClick: () => this.handleDismiss() }, h("svg", { key: 'e454aa75f4fca4c6681b4afb4eeae601e28bc202', xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, h("path", { key: '3af30051a6689a7c35773317933f80b36a3ec624', d: "M0 0h24v24H0z", fill: "none" }), h("path", { key: 'f5c35fc743dd27682425f7428d25f91213aa82c7', d: "M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z" }))), h("div", { key: '620ce468ff4148b80cd365e5ec70b908015117d3', class: "content" }, h("slot", { key: '3a6482708a275ba3d3e9942f72fdaf60ad45fd95' })), this.resizable && h("div", { key: 'ae052d5d1771c79d33ed780b338b2aea1fc169e2', class: 'se', ref: el => this.seDrag = el })))));
65
65
  }
66
66
  static get is() { return "dnn-modal"; }
67
67
  static get encapsulation() { return "shadow"; }
@@ -56,7 +56,7 @@ export class DnnMonacoEditor {
56
56
  }
57
57
  }
58
58
  render() {
59
- return (h(Host, { key: 'e4b4bd310a36427d48fcf283c3585a7f4e1d767e', tabIndex: this.focused ? -1 : 0, onFocus: () => this.focusElement(), onBlur: () => this.textArea.blur() }, h("div", { key: '8a0b1ce375c1ab998aafb3ad843ca2a32a089bff', class: "editor-container", ref: el => this.editorContainer = el })));
59
+ return (h(Host, { key: '16cdb4922f43e0b38175afb8cd888052d67339ac', tabIndex: this.focused ? -1 : 0, onFocus: () => this.focusElement(), onBlur: () => this.textArea.blur() }, h("div", { key: 'd1e272cf64061ae57ff01898b0036de5347d49d7', class: "editor-container", ref: el => this.editorContainer = el })));
60
60
  }
61
61
  static get is() { return "dnn-monaco-editor"; }
62
62
  static get encapsulation() { return "scoped"; }
@@ -71,7 +71,7 @@ table tbody tr th {
71
71
  table tbody tr td {
72
72
  text-align: center;
73
73
  }
74
- table tbody tr td dnn-checkbox span {
74
+ table tbody tr td label .hidden {
75
75
  display: none;
76
76
  }
77
77
  table tbody tr td button {
@@ -105,12 +105,12 @@ export class DnnPermissionsGrid {
105
105
  return (h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, h("g", { fill: "none" }, h("path", { d: "M0 0h24v24H0V0z" }), h("path", { d: "M0 0h24v24H0V0z", opacity: ".87" })), h("path", { d: "M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM9 6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9V6zm9 14H6V10h12v10zm-6-3c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z" })));
106
106
  }
107
107
  const checked = item == undefined ? "intermediate" : item.allowAccess ? "checked" : "unchecked";
108
- return (h("dnn-checkbox", { "use-intermediate": true, checked: checked, onCheckedchange: e => this.handleRoleChanged(e.detail, rolePermission, permissionDefinition) }, h("div", { slot: "intermediateicon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), h("path", { d: "M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" }))), h("div", { slot: "uncheckedicon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), h("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM4 12c0-4.42 3.58-8 8-8 1.85 0 3.55.63 4.9 1.69L5.69 16.9C4.63 15.55 4 13.85 4 12zm8 8c-1.85 0-3.55-.63-4.9-1.69L18.31 7.1C19.37 8.45 20 10.15 20 12c0 4.42-3.58 8-8 8z" }))), h("span", null, permissionDefinition.permissionName)));
108
+ return (h("label", null, h("span", { class: "hidden" }, permissionDefinition.permissionName), h("dnn-checkbox", { "use-intermediate": true, checked: checked, onCheckedchange: e => this.handleRoleChanged(e.detail, rolePermission, permissionDefinition) }, h("div", { slot: "intermediateicon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), h("path", { d: "M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" }))), h("div", { slot: "uncheckedicon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), h("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM4 12c0-4.42 3.58-8 8-8 1.85 0 3.55.63 4.9 1.69L5.69 16.9C4.63 15.55 4 13.85 4 12zm8 8c-1.85 0-3.55-.63-4.9-1.69L18.31 7.1C19.37 8.45 20 10.15 20 12c0 4.42-3.58 8-8 8z" }))))));
109
109
  }
110
110
  renderUserCheckBox(userPermission, permissionDefinition) {
111
111
  const item = userPermission.permissions.filter(permission => permission.permissionId == permissionDefinition.permissionId)[0];
112
112
  const checked = item == undefined ? "intermediate" : item.allowAccess ? "checked" : "unchecked";
113
- return (h("dnn-checkbox", { "use-intermediate": true, checked: checked, onCheckedchange: e => this.handleUserChanged(e.detail, userPermission, permissionDefinition) }, h("div", { slot: "intermediateicon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), h("path", { d: "M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" }))), h("div", { slot: "uncheckedicon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), h("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM4 12c0-4.42 3.58-8 8-8 1.85 0 3.55.63 4.9 1.69L5.69 16.9C4.63 15.55 4 13.85 4 12zm8 8c-1.85 0-3.55-.63-4.9-1.69L18.31 7.1C19.37 8.45 20 10.15 20 12c0 4.42-3.58 8-8 8z" }))), h("span", null, permissionDefinition.permissionName)));
113
+ return (h("label", null, h("span", { class: "hidden" }, permissionDefinition.permissionName), h("dnn-checkbox", { "use-intermediate": true, checked: checked, onCheckedchange: e => this.handleUserChanged(e.detail, userPermission, permissionDefinition) }, h("div", { slot: "intermediateicon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), h("path", { d: "M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" }))), h("div", { slot: "uncheckedicon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), h("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM4 12c0-4.42 3.58-8 8-8 1.85 0 3.55.63 4.9 1.69L5.69 16.9C4.63 15.55 4 13.85 4 12zm8 8c-1.85 0-3.55-.63-4.9-1.69L18.31 7.1C19.37 8.45 20 10.15 20 12c0 4.42-3.58 8-8 8z" }))))));
114
114
  }
115
115
  handleRoleChanged(checked, rolePermission, permissionDefinition) {
116
116
  switch (checked) {
@@ -304,13 +304,13 @@ export class DnnPermissionsGrid {
304
304
  }
305
305
  render() {
306
306
  const filteredRoles = this.getRoles();
307
- return (h(Host, { key: 'e5907b6b3f74ee44d8fa46525f5719d4237722ef', tabIndex: this.focused ? -1 : 0, onFocus: () => this.rolesDropdown.focus(), onBlur: () => this.rolesDropdown.blur() }, h("div", { key: '081639d8c421617eaf2076b88d8d318922dadb38', class: "add-role-row" }, h("div", { key: '40a998250e575b7b23d20a876ff0888279a6a2db', class: "dropdown" }, h("label", { key: 'cc5676f19c420a51635ed21bdcdb78055751e019' }, this.localResx.FilterByGroup, " :"), h("select", { key: '21feaed59de7361a85e0d024064d4cdc331268f8', ref: el => this.rolesDropdown = el, onChange: e => this.handleRoleGroupChanged(e.target), onFocus: () => this.focused = true, onBlur: () => this.focused = false }, h("option", { key: '5d8c5a3eeff8e6bf2d40ebb8a398830a9877f3d9', value: -2, selected: this.selectedRoleGroupId == -2 }, this.localResx.AllRoles), h("option", { key: '8114e84ae74de4652295f352930626dd3549d684', value: -1, selected: this.selectedRoleGroupId == -1 }, this.localResx.GlobalRoles), this.roleGroups.map(roleGroup => h("option", { value: roleGroup.id, selected: this.selectedRoleGroupId == roleGroup.id }, roleGroup.name)))), filteredRoles && filteredRoles.length > 0 && [
308
- h("div", { key: '49602732241ed79d924d8e97e8f94f0c19949fb6', class: "dropdown" }, h("label", { key: '313891e6018a5496b2e21b44e79ef46bf2260363' }, this.localResx.SelectRole, " :"), h("select", { key: '4e8c7cb660ec0ebfc6a395f06ef0285133bf99e6', ref: el => this.roleDropDown = el }, this.getRoles().map(role => h("option", { value: role.RoleId }, role.RoleName)))),
309
- h("dnn-button", { key: '047ad1df653bd87cf01ae89bfdc26593d6af4b3a', type: "primary", onClick: () => this.addRole() }, this.localResx.Add)
310
- ]), h("table", { key: '58426da19d5df149dc3f336c886ba95b1467fb70', class: "roles-table" }, h("caption", { key: 'a14f7ce9ec18cfda4f2d4a289c622aae52ecc816' }, this.localResx.RolePermissions), h("thead", { key: '23a3df2896e33b2326260a015923d31ea3ea0077' }, h("tr", { key: '4b22414376e99748d3fb4701aa11f580979bb34e' }, h("th", { key: 'c5ebcee2bd6800ff0773b2b64f6c4f82ef4b64dc' }, this.localResx.Role), this.permissions.permissionDefinitions.map(permissionDefinition => h("th", null, permissionDefinition.permissionName)), h("th", { key: '41c1e2ff05488ec01ea65cce43b1edb638f27f0d' }, "\u00A0"))), h("tbody", { key: 'd1f7101961c9c6d27d963d90633455cec41dd33e' }, this.permissions.rolePermissions.map(rolePermission => h("tr", null, h("th", null, rolePermission.roleName), this.permissions.permissionDefinitions.map(permissionDefinition => h("td", null, this.renderRoleCheckBox(rolePermission, permissionDefinition))), h("td", null, !rolePermission.default &&
311
- h("button", { onClick: () => this.removeRole(rolePermission) }, h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), h("path", { d: "M14.59 8L12 10.59 9.41 8 8 9.41 10.59 12 8 14.59 9.41 16 12 13.41 14.59 16 16 14.59 13.41 12 16 9.41 14.59 8zM12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" })))))))), h("div", { key: 'ab01ee5fe61631a1c0657d070d6bfb553a918708', class: "search-user" }, h("div", { key: 'a2dce192a50497f700c54552e3daffdc943e00de', class: "search-control" }, h("dnn-searchbox", { key: 'ba6a143b692551bc5d6746621b794b3c3ee44fa6', placeholder: this.localResx.User, debounced: true, onQueryChanged: e => this.handleQueryChanged(e.detail), onKeyDown: e => this.handleSearchUserFieldKeyDown(e), query: this.userQuery }), h("dnn-collapsible", { key: '4f83d017a269e8e0e60cdf346a2e51e78f5fba50', ref: el => this.userCollapsible = el }, h("div", { key: 'fd7a4a9ac3d50670706658b8a2843cb43768604c', class: "dropdown" }, this.getFilteredUsers().map(searchedUser => h("button", { onKeyDown: e => this.handleSearchedUserKeyDown(e), onClick: () => this.handleUserPicked(searchedUser) }, searchedUser.displayName))))), this.pickedUser &&
312
- h("dnn-button", { key: 'ee533a07ff736e551f6fe43b95d404344730f153', onClick: () => this.addUser() }, this.localResx.Add)), this.permissions.userPermissions && this.permissions.userPermissions.length > 0 &&
313
- h("table", { key: '1e98d655ab1b8e7e65ba3fddbf22ce31b2792e67', class: "users-table" }, h("caption", { key: '9e3ad415e660b6b820f7d9b984b29791cbb6e71a' }, this.localResx.UserPermissions), h("thead", { key: 'dcc9cb1d2f358e82c103ee590f15dfd02708b270' }, h("tr", { key: 'f9d81861d592191b3c8921456a3979883abe03b8' }, h("th", { key: 'de9e1bfcfba5fc4b8707edcece401f9bd23ef146' }, this.localResx.User), this.permissions.permissionDefinitions.map(permissionDefinition => h("th", null, permissionDefinition.permissionName)), h("th", { key: '6b047767a641547bc26b81dc87da7bfeb39b035d' }, "\u00A0"))), h("tbody", { key: '7d96474562bb6792dc51ee900941f62e7b842288' }, this.permissions.userPermissions.map(userPermission => h("tr", null, h("th", null, userPermission.displayName), this.permissions.permissionDefinitions.map(permissionDefinition => h("td", null, this.renderUserCheckBox(userPermission, permissionDefinition))), h("td", null, h("button", { onClick: () => this.removeUser(userPermission) }, h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), h("path", { d: "M14.59 8L12 10.59 9.41 8 8 9.41 10.59 12 8 14.59 9.41 16 12 13.41 14.59 16 16 14.59 13.41 12 16 9.41 14.59 8zM12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" }))))))))));
307
+ return (h(Host, { key: 'cf72a4f914f45cc67dc2c3eda77f9edde7f60270', tabIndex: this.focused ? -1 : 0, onFocus: () => this.rolesDropdown.focus(), onBlur: () => this.rolesDropdown.blur() }, h("div", { key: '8c4ebce85c93f4f08c4ad24f0b6223de8dc6449c', class: "add-role-row" }, h("div", { key: '585768e943955c909194a25dba06a8b84ae4e7be', class: "dropdown" }, h("label", { key: 'e9823e0e553a3ae23384e79354696de2c649bea2' }, this.localResx.FilterByGroup, " :"), h("select", { key: '5a8cc2742a103bd024243708b18c069b43e70674', ref: el => this.rolesDropdown = el, onChange: e => this.handleRoleGroupChanged(e.target), onFocus: () => this.focused = true, onBlur: () => this.focused = false }, h("option", { key: 'daa1a622f34c7b08145b8486201ffaacbb129b78', value: -2, selected: this.selectedRoleGroupId == -2 }, this.localResx.AllRoles), h("option", { key: '039fb0a46c56712dccc0d76b3a8872ff8b2d06db', value: -1, selected: this.selectedRoleGroupId == -1 }, this.localResx.GlobalRoles), this.roleGroups.map(roleGroup => h("option", { value: roleGroup.id, selected: this.selectedRoleGroupId == roleGroup.id }, roleGroup.name)))), filteredRoles && filteredRoles.length > 0 && [
308
+ h("div", { key: '1db52ea02ecf75268ec9996fbd68ea7726733679', class: "dropdown" }, h("label", { key: '7fa52a0247951ca88ad80cbf810e7810688dc918' }, this.localResx.SelectRole, " :"), h("select", { key: 'cf7baac0e6c22c33ddcac117f05046b942ad6d4e', ref: el => this.roleDropDown = el }, this.getRoles().map(role => h("option", { value: role.RoleId }, role.RoleName)))),
309
+ h("dnn-button", { key: 'b95196cf538d86c255440a5a88a7f85f019b6632', type: "primary", onClick: () => this.addRole() }, this.localResx.Add)
310
+ ]), h("table", { key: '51110cb5293a2b753f808572418210094bdc1f7d', class: "roles-table" }, h("caption", { key: '2c1abc3f0fe54307b48be57e7f9b61939b4822b3' }, this.localResx.RolePermissions), h("thead", { key: 'b7e89b31ba60e0b0c866f2c4f83f5df98d6f83b3' }, h("tr", { key: '4f2c16c8425483d7dc1aba76cedd20083dcf9dc3' }, h("th", { key: '4c0910460873ecab0b9f55352be83c56c575f6a6' }, this.localResx.Role), this.permissions.permissionDefinitions.map(permissionDefinition => h("th", null, permissionDefinition.permissionName)), h("th", { key: 'a41f294b08733b13d2f75032d9b99891727a6b21' }, "\u00A0"))), h("tbody", { key: '66367d43acd71c2660ee7e38a383c2cc4cdeff2b' }, this.permissions.rolePermissions.map(rolePermission => h("tr", null, h("th", null, rolePermission.roleName), this.permissions.permissionDefinitions.map(permissionDefinition => h("td", null, this.renderRoleCheckBox(rolePermission, permissionDefinition))), h("td", null, !rolePermission.default &&
311
+ h("button", { onClick: () => this.removeRole(rolePermission) }, h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), h("path", { d: "M14.59 8L12 10.59 9.41 8 8 9.41 10.59 12 8 14.59 9.41 16 12 13.41 14.59 16 16 14.59 13.41 12 16 9.41 14.59 8zM12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" })))))))), h("div", { key: '96d18900b0c2e1915b49dbae8dfca84ce22f9224', class: "search-user" }, h("div", { key: 'cd5f5916d43a53a827654226fb2ca5cf2842d2fd', class: "search-control" }, h("dnn-searchbox", { key: '47a8f6b69fba9e87806a02c2101d8eac0d65cfb7', placeholder: this.localResx.User, debounced: true, onQueryChanged: e => this.handleQueryChanged(e.detail), onKeyDown: e => this.handleSearchUserFieldKeyDown(e), query: this.userQuery }), h("dnn-collapsible", { key: '21e8ecd420d7a4174a1e8633a00ff609c88391d3', ref: el => this.userCollapsible = el }, h("div", { key: 'e8996049d1743358d16515c6e7a62fbf1c3449f4', class: "dropdown" }, this.getFilteredUsers().map(searchedUser => h("button", { onKeyDown: e => this.handleSearchedUserKeyDown(e), onClick: () => this.handleUserPicked(searchedUser) }, searchedUser.displayName))))), this.pickedUser &&
312
+ h("dnn-button", { key: '5a3159e4b75a1eaf7e04d76a5e7c207efbcb4bbd', onClick: () => this.addUser() }, this.localResx.Add)), this.permissions.userPermissions && this.permissions.userPermissions.length > 0 &&
313
+ h("table", { key: '1c67fd050abc84cc1d46c2f22ac54b72536c059c', class: "users-table" }, h("caption", { key: '5a94b92f18104a0307e2282945f36855d055c09a' }, this.localResx.UserPermissions), h("thead", { key: '85447eb661dae9d68aa076275b4bc6a3d710d86c' }, h("tr", { key: '896a922a18c02b682a48ee613088bf3140291d02' }, h("th", { key: 'd6606accc9147704a1e71a401550b161f76a132c' }, this.localResx.User), this.permissions.permissionDefinitions.map(permissionDefinition => h("th", null, permissionDefinition.permissionName)), h("th", { key: '87d8b97ab435a913177f828afa637740ba4a2d7b' }, "\u00A0"))), h("tbody", { key: '8649339d5206c4d2c096d97705fa84c56735a8d1' }, this.permissions.userPermissions.map(userPermission => h("tr", null, h("th", null, userPermission.displayName), this.permissions.permissionDefinitions.map(permissionDefinition => h("td", null, this.renderUserCheckBox(userPermission, permissionDefinition))), h("td", null, h("button", { onClick: () => this.removeUser(userPermission) }, h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), h("path", { d: "M14.59 8L12 10.59 9.41 8 8 9.41 10.59 12 8 14.59 9.41 16 12 13.41 14.59 16 16 14.59 13.41 12 16 9.41 14.59 8zM12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" }))))))))));
314
314
  }
315
315
  static get is() { return "dnn-permissions-grid"; }
316
316
  static get encapsulation() { return "shadow"; }