npm - @dnncommunity/dnn-elements - Versions diffs - 0.24.0-beta.8 → 0.24.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (155) hide show

package/dist/cjs/dnn-vertical-splitview.cjs.entry.js CHANGED Viewed

@@ -114,14 +114,14 @@ const DnnVerticalSplitview = class {
         this.rightWidth = fullWidth - this.leftWidth;
     }
     render() {
-        return (index.h(index.Host, { key: 'beaf3010798c186c586ad124a672a2e3c2610bd7' }, index.h("div", { key: '353c7d995b03434a7eb1095ec28c19706e008ce7', class: "left pane", style: {
+        return (index.h(index.Host, { key: 'e140fa989f74e328619a4d5a53d4b7cfb6ca5970' }, index.h("div", { key: '22a05426ed02cb10f3a2ceeb7f7682f8677e4c31', class: "left pane", style: {
                 width: `${this.leftWidth}px`,
-            } }, index.h("slot", { key: 'e9c87dfcc0f8014ec9cd89ff91f21de679c414cf', name: "left" })), index.h("button", { key: '9df146da30e8adac9cadd75d14619fa574f0c97e', onMouseDown: e => this.handleMouseDown(e), onTouchStart: e => this.handleMouseDown(e), onKeyDown: e => this.handleKeyDown(e), ref: el => this.splitter = el, style: {
+            } }, index.h("slot", { key: 'c997933e9bda3464c6f49e818ac3c39aae7ede99', name: "left" })), index.h("button", { key: 'f2a04a9418f614df26d3a7fab7a71eda82b5a244', onMouseDown: e => this.handleMouseDown(e), onTouchStart: e => this.handleMouseDown(e), onKeyDown: e => this.handleKeyDown(e), ref: el => this.splitter = el, style: {
                 minWidth: `${this.splitterWidth.toString()}px`,
                 left: `${this.leftWidth - 2}px`,
-            } }, index.h("slot", { key: 'f46238df8b64f8627a1058644fbecc2c4989bbc8' })), index.h("div", { key: '5b42b788656ffd7cad9a80d81dd74925a3deacc8', class: "right pane", style: {
+            } }, index.h("slot", { key: '2f81c5e1858a6824f5ce4d4162f05acfd1733798' })), index.h("div", { key: '568a5a6f4aac1a438332085c1288dd9ed84e6143', class: "right pane", style: {
                 width: `${this.rightWidth}px`,
-            } }, index.h("slot", { key: 'd5e9154ff247e915db7774eab731f1050e348b77', name: "right" }))));
+            } }, index.h("slot", { key: 'd509c38b1c51ff0dcdef8f9c419ebc1a9ed63a81', name: "right" }))));
     }
     get element() { return index.getElement(this); }
 };

package/dist/cjs/dnn.cjs.js CHANGED Viewed

@@ -19,7 +19,7 @@ var patchBrowser = () => {
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["dnn-color-input.cjs",[[65,"dnn-color-input",{"color":[1025],"contrastColor":[1025,"contrast-color"],"lightColor":[1025,"light-color"],"darkColor":[1025,"dark-color"],"label":[1],"readonly":[4],"localization":[16],"name":[1],"helpText":[1,"help-text"],"useContrastColor":[4,"use-contrast-color"],"useLightColor":[4,"use-light-color"],"useDarkColor":[4,"use-dark-color"],"currentColor":[32],"focused":[32]},null,{"currentColor":["currentColorChanged"]}]]],["dnn-image-cropper.cjs",[[65,"dnn-image-cropper",{"width":[2],"height":[2],"resx":[16],"quality":[2],"preventUndersized":[4,"prevent-undersized"],"name":[1],"view":[32],"localResx":[32],"fileName":[32],"focused":[32],"clear":[64]},null,{"resx":["resxChanged"]}]]],["dnn-autocomplete.cjs",[[65,"dnn-autocomplete",{"label":[1],"name":[1],"helpText":[1,"help-text"],"value":[1537],"required":[4],"disabled":[4],"suggestions":[16],"renderSuggestion":[16],"totalSuggestions":[2,"total-suggestions"],"preloadThresholdPixels":[2,"preload-threshold-pixels"],"focused":[32],"valid":[32],"customValidityMessage":[32],"selectedIndex":[32],"positionInitialized":[32],"lastScrollTop":[32],"checkValidity":[64],"setCustomValidity":[64]},[[4,"click","handleOutsideClick"]]]]],["dnn-input.cjs",[[65,"dnn-input",{"type":[1025],"label":[1],"name":[1],"value":[1544],"helpText":[1,"help-text"],"required":[4],"disabled":[4],"autocomplete":[1],"min":[8],"max":[8],"minlength":[2],"maxlength":[2],"multiple":[4],"pattern":[1],"readonly":[4],"step":[8],"disableValidityReporting":[4,"disable-validity-reporting"],"allowShowPassword":[4,"allow-show-password"],"focused":[32],"valid":[32],"checkValidity":[64],"setCustomValidity":[64]}]]],["dnn-select.cjs",[[65,"dnn-select",{"label":[1],"name":[1],"required":[4],"helpText":[1,"help-text"],"disabled":[4],"disableValidityReporting":[4,"disable-validity-reporting"],"value":[1537],"focused":[32],"valid":[32],"customValidityMessage":[32],"checkValidity":[64]}]]],["dnn-textarea.cjs",[[65,"dnn-textarea",{"resizable":[1],"value":[1025],"label":[1],"name":[1],"helpText":[1,"help-text"],"required":[4],"disabled":[4],"autocomplete":[1],"minlength":[2],"maxlength":[2],"readonly":[4],"rows":[2],"focused":[32],"valid":[32],"customValidityMessage":[32],"checkValidity":[64],"setCustomValidity":[64]}]]],["dnn-treeview-item.cjs",[[1,"dnn-treeview-item",{"expanded":[1540],"hasChildren":[32],"focused":[32]},null,{"expanded":["watchExpanded"]}]]],["dnn-chevron.cjs",[[1,"dnn-chevron",{"expandText":[1,"expand-text"],"collapseText":[1,"collapse-text"],"expanded":[1540],"focused":[32]},null,{"expanded":["handleExpandedChanged"]}]]],["dnn-monaco-editor.cjs",[[66,"dnn-monaco-editor",{"language":[1],"value":[1025],"name":[1],"focused":[32]},null,{"language":["languageChanged"],"value":["valueChanged"]}]]],["dnn-progress-bar.cjs",[[1,"dnn-progress-bar",{"value":[2],"max":[2],"useGradient":[4,"use-gradient"]}]]],["dnn-richtext.cjs",[[65,"dnn-richtext",{"options":[16],"value":[1],"name":[1],"focused":[32]},null,{"value":["watchValueChanged"]}]]],["dnn-sort-icon.cjs",[[1,"dnn-sort-icon",{"sortDirection":[1025,"sort-direction"],"focused":[32]}]]],["dnn-toggle.cjs",[[65,"dnn-toggle",{"checked":[1028],"disabled":[4],"name":[1],"value":[1],"focused":[32]},null,{"checked":["checkedChanged"]}]]],["dnn-vertical-overflow-menu.cjs",[[1,"dnn-vertical-overflow-menu",{"showDropdownButton":[32],"showDropdownMenu":[32]}]]],["dnn-vertical-splitview.cjs",[[1,"dnn-vertical-splitview",{"splitterWidth":[2,"splitter-width"],"splitWidthPercentage":[1026,"split-width-percentage"],"leftWidth":[32],"rightWidth":[32],"setSplitWidthPercentage":[64],"getSplitWidthPercentage":[64]}]]],["dnn-checkbox.cjs",[[65,"dnn-checkbox",{"checked":[1025],"useIntermediate":[4,"use-intermediate"],"value":[1],"name":[1],"focused":[32]},null,{"checked":["handleCheckedChange"]}]]],["dnn-color-picker.cjs",[[1,"dnn-color-picker",{"color":[1],"colorBoxHeight":[1,"color-box-height"],"currentColor":[32],"rgbDisplay":[32],"hslDisplay":[32],"hexDisplay":[32],"focused":[32]},null,{"currentColor":["handeCurrentColorChanged"]}]]],["dnn-dropzone.cjs",[[65,"dnn-dropzone",{"resx":[16],"allowedExtensions":[16],"allowCameraMode":[4,"allow-camera-mode"],"captureQuality":[2,"capture-quality"],"maxFileSize":[2,"max-file-size"],"name":[1],"canTakeSnapshots":[32],"takingPicture":[32],"fileTooLarge":[32],"invalidExtension":[32],"localResx":[32],"focused":[32]},null,{"resx":["resxChanged"]}]]],["dnn-searchbox.cjs",[[1,"dnn-searchbox",{"placeholder":[1],"debounced":[4],"debounceTime":[2,"debounce-time"],"query":[1025],"focused":[32]},null,{"query":["handleQueryChanged"]}]]],["dnn-tab_2.cjs",[[1,"dnn-tab",{"tabTitle":[1,"tab-title"],"visible":[32],"show":[64],"hide":[64]}],[1,"dnn-tabs",{"tabTitles":[32],"selectedTabTitle":[32]}]]],["dnn-collapsible.cjs",[[1,"dnn-collapsible",{"expanded":[516],"transitionDuration":[2,"transition-duration"],"updateSize":[64]},[[0,"dnnCollapsibleHeightChanged","handleHeightChanged"]],{"expanded":["handledExpandedChanged"]}]]],["dnn-modal.cjs",[[1,"dnn-modal",{"backdropDismiss":[4,"backdrop-dismiss"],"closeText":[1,"close-text"],"resizable":[4],"showCloseButton":[4,"show-close-button"],"visible":[1540],"show":[64],"hide":[64]}]]],["dnn-button.cjs",[[65,"dnn-button",{"type":[1],"appearance":[1],"formButtonType":[1,"form-button-type"],"reversed":[4],"size":[1],"confirm":[4],"confirmYesText":[1,"confirm-yes-text"],"confirmNoText":[1,"confirm-no-text"],"confirmMessage":[1,"confirm-message"],"disabled":[4],"focused":[32],"modalVisible":[32]}]]],["dnn-permissions-grid.cjs",[[1,"dnn-permissions-grid",{"permissions":[1040],"roleGroups":[16],"roles":[16],"resx":[16],"foundUsers":[16],"selectedRoleGroupId":[32],"userQuery":[32],"pickedUser":[32],"localResx":[32],"focused":[32]},null,{"foundUsers":["handleFoundUsersChanged"],"resx":["resxChanged"]}]]],["dnn-fieldset.cjs",[[1,"dnn-fieldset",{"focused":[1540],"disabled":[1540],"invalid":[1540],"label":[1],"floatLabel":[1540,"float-label"],"helpText":[1,"help-text"],"resizable":[1],"customValidityMessage":[32],"setFocused":[64],"setBlurred":[64],"disable":[64],"enable":[64],"pinLabel":[64],"unpinLabel":[64],"setValidity":[64]}]]]], options);
+  return index.bootstrapLazy([["dnn-color-input.cjs",[[65,"dnn-color-input",{"color":[1025],"contrastColor":[1025,"contrast-color"],"lightColor":[1025,"light-color"],"darkColor":[1025,"dark-color"],"label":[1],"readonly":[4],"localization":[16],"name":[1],"helpText":[1,"help-text"],"useContrastColor":[4,"use-contrast-color"],"useLightColor":[4,"use-light-color"],"useDarkColor":[4,"use-dark-color"],"currentColor":[32],"focused":[32]},null,{"currentColor":["currentColorChanged"]}]]],["dnn-image-cropper.cjs",[[65,"dnn-image-cropper",{"width":[2],"height":[2],"resx":[16],"quality":[2],"preventUndersized":[4,"prevent-undersized"],"name":[1],"view":[32],"localResx":[32],"fileName":[32],"focused":[32],"clear":[64]},null,{"resx":["resxChanged"]}]]],["dnn-autocomplete.cjs",[[65,"dnn-autocomplete",{"label":[1],"name":[1],"helpText":[1,"help-text"],"value":[1537],"required":[4],"disabled":[4],"suggestions":[16],"renderSuggestion":[16],"totalSuggestions":[2,"total-suggestions"],"preloadThresholdPixels":[2,"preload-threshold-pixels"],"focused":[32],"valid":[32],"customValidityMessage":[32],"selectedIndex":[32],"positionInitialized":[32],"lastScrollTop":[32],"displayValue":[32],"checkValidity":[64],"setCustomValidity":[64]},[[4,"click","handleClick"]]]]],["dnn-input.cjs",[[65,"dnn-input",{"type":[1025],"label":[1],"name":[1],"value":[1544],"helpText":[1,"help-text"],"required":[4],"disabled":[4],"autocomplete":[1],"min":[8],"max":[8],"minlength":[2],"maxlength":[2],"multiple":[4],"pattern":[1],"readonly":[4],"step":[8],"disableValidityReporting":[4,"disable-validity-reporting"],"allowShowPassword":[4,"allow-show-password"],"focused":[32],"valid":[32],"checkValidity":[64],"setCustomValidity":[64]}]]],["dnn-select.cjs",[[65,"dnn-select",{"label":[1],"name":[1],"required":[4],"helpText":[1,"help-text"],"disabled":[4],"disableValidityReporting":[4,"disable-validity-reporting"],"value":[1537],"focused":[32],"valid":[32],"customValidityMessage":[32],"checkValidity":[64]}]]],["dnn-textarea.cjs",[[65,"dnn-textarea",{"resizable":[1],"value":[1025],"label":[1],"name":[1],"helpText":[1,"help-text"],"required":[4],"disabled":[4],"autocomplete":[1],"minlength":[2],"maxlength":[2],"readonly":[4],"rows":[2],"focused":[32],"valid":[32],"customValidityMessage":[32],"checkValidity":[64],"setCustomValidity":[64]}]]],["dnn-treeview-item.cjs",[[1,"dnn-treeview-item",{"expanded":[1540],"hasChildren":[32],"focused":[32]},null,{"expanded":["watchExpanded"]}]]],["dnn-chevron.cjs",[[1,"dnn-chevron",{"expandText":[1,"expand-text"],"collapseText":[1,"collapse-text"],"expanded":[1540],"focused":[32]},null,{"expanded":["handleExpandedChanged"]}]]],["dnn-monaco-editor.cjs",[[66,"dnn-monaco-editor",{"language":[1],"value":[1025],"name":[1],"focused":[32]},null,{"language":["languageChanged"],"value":["valueChanged"]}]]],["dnn-progress-bar.cjs",[[1,"dnn-progress-bar",{"value":[2],"max":[2],"useGradient":[4,"use-gradient"]}]]],["dnn-richtext.cjs",[[65,"dnn-richtext",{"options":[16],"value":[1],"name":[1],"focused":[32]},null,{"value":["watchValueChanged"]}]]],["dnn-sort-icon.cjs",[[1,"dnn-sort-icon",{"sortDirection":[1025,"sort-direction"],"focused":[32]}]]],["dnn-toggle.cjs",[[65,"dnn-toggle",{"checked":[1028],"disabled":[4],"name":[1],"value":[1],"focused":[32]},[[2,"click","handleClick"]],{"checked":["checkedChanged"]}]]],["dnn-vertical-overflow-menu.cjs",[[1,"dnn-vertical-overflow-menu",{"showDropdownButton":[32],"showDropdownMenu":[32]}]]],["dnn-vertical-splitview.cjs",[[1,"dnn-vertical-splitview",{"splitterWidth":[2,"splitter-width"],"splitWidthPercentage":[1026,"split-width-percentage"],"leftWidth":[32],"rightWidth":[32],"setSplitWidthPercentage":[64],"getSplitWidthPercentage":[64]}]]],["dnn-checkbox.cjs",[[65,"dnn-checkbox",{"checked":[1025],"useIntermediate":[4,"use-intermediate"],"value":[1],"name":[1],"focused":[32]},[[2,"click","handleClick"]],{"checked":["handleCheckedChange"]}]]],["dnn-color-picker.cjs",[[1,"dnn-color-picker",{"color":[1],"colorBoxHeight":[1,"color-box-height"],"currentColor":[32],"rgbDisplay":[32],"hslDisplay":[32],"hexDisplay":[32],"focused":[32]},null,{"currentColor":["handeCurrentColorChanged"]}]]],["dnn-dropzone.cjs",[[65,"dnn-dropzone",{"resx":[16],"allowedExtensions":[16],"allowCameraMode":[4,"allow-camera-mode"],"captureQuality":[2,"capture-quality"],"maxFileSize":[2,"max-file-size"],"name":[1],"canTakeSnapshots":[32],"takingPicture":[32],"fileTooLarge":[32],"invalidExtension":[32],"localResx":[32],"focused":[32]},null,{"resx":["resxChanged"]}]]],["dnn-searchbox.cjs",[[1,"dnn-searchbox",{"placeholder":[1],"debounced":[4],"debounceTime":[2,"debounce-time"],"query":[1025],"focused":[32]},null,{"query":["handleQueryChanged"]}]]],["dnn-tab_2.cjs",[[1,"dnn-tab",{"tabTitle":[1,"tab-title"],"visible":[32],"show":[64],"hide":[64]}],[1,"dnn-tabs",{"tabTitles":[32],"selectedTabTitle":[32]}]]],["dnn-collapsible.cjs",[[1,"dnn-collapsible",{"expanded":[516],"transitionDuration":[2,"transition-duration"],"updateSize":[64]},[[0,"dnnCollapsibleHeightChanged","handleHeightChanged"]],{"expanded":["handledExpandedChanged"]}]]],["dnn-modal.cjs",[[1,"dnn-modal",{"backdropDismiss":[4,"backdrop-dismiss"],"closeText":[1,"close-text"],"resizable":[4],"showCloseButton":[4,"show-close-button"],"visible":[1540],"show":[64],"hide":[64]}]]],["dnn-button.cjs",[[65,"dnn-button",{"type":[1],"appearance":[1],"formButtonType":[1,"form-button-type"],"reversed":[4],"size":[1],"confirm":[4],"confirmYesText":[1,"confirm-yes-text"],"confirmNoText":[1,"confirm-no-text"],"confirmMessage":[1,"confirm-message"],"disabled":[4],"focused":[32],"modalVisible":[32]}]]],["dnn-permissions-grid.cjs",[[1,"dnn-permissions-grid",{"permissions":[1040],"roleGroups":[16],"roles":[16],"resx":[16],"foundUsers":[16],"selectedRoleGroupId":[32],"userQuery":[32],"pickedUser":[32],"localResx":[32],"focused":[32]},null,{"foundUsers":["handleFoundUsersChanged"],"resx":["resxChanged"]}]]],["dnn-fieldset.cjs",[[1,"dnn-fieldset",{"focused":[1540],"disabled":[1540],"invalid":[1540],"label":[1],"floatLabel":[1540,"float-label"],"helpText":[1,"help-text"],"resizable":[1],"customValidityMessage":[32],"setFocused":[64],"setBlurred":[64],"disable":[64],"enable":[64],"pinLabel":[64],"unpinLabel":[64],"setValidity":[64]}]]]], options);
 });
 exports.setNonce = index.setNonce;

package/dist/cjs/loader.cjs.js CHANGED Viewed

@@ -8,7 +8,7 @@ const appGlobals = require('./app-globals-3a1e7e63.js');
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["dnn-color-input.cjs",[[65,"dnn-color-input",{"color":[1025],"contrastColor":[1025,"contrast-color"],"lightColor":[1025,"light-color"],"darkColor":[1025,"dark-color"],"label":[1],"readonly":[4],"localization":[16],"name":[1],"helpText":[1,"help-text"],"useContrastColor":[4,"use-contrast-color"],"useLightColor":[4,"use-light-color"],"useDarkColor":[4,"use-dark-color"],"currentColor":[32],"focused":[32]},null,{"currentColor":["currentColorChanged"]}]]],["dnn-image-cropper.cjs",[[65,"dnn-image-cropper",{"width":[2],"height":[2],"resx":[16],"quality":[2],"preventUndersized":[4,"prevent-undersized"],"name":[1],"view":[32],"localResx":[32],"fileName":[32],"focused":[32],"clear":[64]},null,{"resx":["resxChanged"]}]]],["dnn-autocomplete.cjs",[[65,"dnn-autocomplete",{"label":[1],"name":[1],"helpText":[1,"help-text"],"value":[1537],"required":[4],"disabled":[4],"suggestions":[16],"renderSuggestion":[16],"totalSuggestions":[2,"total-suggestions"],"preloadThresholdPixels":[2,"preload-threshold-pixels"],"focused":[32],"valid":[32],"customValidityMessage":[32],"selectedIndex":[32],"positionInitialized":[32],"lastScrollTop":[32],"checkValidity":[64],"setCustomValidity":[64]},[[4,"click","handleOutsideClick"]]]]],["dnn-input.cjs",[[65,"dnn-input",{"type":[1025],"label":[1],"name":[1],"value":[1544],"helpText":[1,"help-text"],"required":[4],"disabled":[4],"autocomplete":[1],"min":[8],"max":[8],"minlength":[2],"maxlength":[2],"multiple":[4],"pattern":[1],"readonly":[4],"step":[8],"disableValidityReporting":[4,"disable-validity-reporting"],"allowShowPassword":[4,"allow-show-password"],"focused":[32],"valid":[32],"checkValidity":[64],"setCustomValidity":[64]}]]],["dnn-select.cjs",[[65,"dnn-select",{"label":[1],"name":[1],"required":[4],"helpText":[1,"help-text"],"disabled":[4],"disableValidityReporting":[4,"disable-validity-reporting"],"value":[1537],"focused":[32],"valid":[32],"customValidityMessage":[32],"checkValidity":[64]}]]],["dnn-textarea.cjs",[[65,"dnn-textarea",{"resizable":[1],"value":[1025],"label":[1],"name":[1],"helpText":[1,"help-text"],"required":[4],"disabled":[4],"autocomplete":[1],"minlength":[2],"maxlength":[2],"readonly":[4],"rows":[2],"focused":[32],"valid":[32],"customValidityMessage":[32],"checkValidity":[64],"setCustomValidity":[64]}]]],["dnn-treeview-item.cjs",[[1,"dnn-treeview-item",{"expanded":[1540],"hasChildren":[32],"focused":[32]},null,{"expanded":["watchExpanded"]}]]],["dnn-chevron.cjs",[[1,"dnn-chevron",{"expandText":[1,"expand-text"],"collapseText":[1,"collapse-text"],"expanded":[1540],"focused":[32]},null,{"expanded":["handleExpandedChanged"]}]]],["dnn-monaco-editor.cjs",[[66,"dnn-monaco-editor",{"language":[1],"value":[1025],"name":[1],"focused":[32]},null,{"language":["languageChanged"],"value":["valueChanged"]}]]],["dnn-progress-bar.cjs",[[1,"dnn-progress-bar",{"value":[2],"max":[2],"useGradient":[4,"use-gradient"]}]]],["dnn-richtext.cjs",[[65,"dnn-richtext",{"options":[16],"value":[1],"name":[1],"focused":[32]},null,{"value":["watchValueChanged"]}]]],["dnn-sort-icon.cjs",[[1,"dnn-sort-icon",{"sortDirection":[1025,"sort-direction"],"focused":[32]}]]],["dnn-toggle.cjs",[[65,"dnn-toggle",{"checked":[1028],"disabled":[4],"name":[1],"value":[1],"focused":[32]},null,{"checked":["checkedChanged"]}]]],["dnn-vertical-overflow-menu.cjs",[[1,"dnn-vertical-overflow-menu",{"showDropdownButton":[32],"showDropdownMenu":[32]}]]],["dnn-vertical-splitview.cjs",[[1,"dnn-vertical-splitview",{"splitterWidth":[2,"splitter-width"],"splitWidthPercentage":[1026,"split-width-percentage"],"leftWidth":[32],"rightWidth":[32],"setSplitWidthPercentage":[64],"getSplitWidthPercentage":[64]}]]],["dnn-checkbox.cjs",[[65,"dnn-checkbox",{"checked":[1025],"useIntermediate":[4,"use-intermediate"],"value":[1],"name":[1],"focused":[32]},null,{"checked":["handleCheckedChange"]}]]],["dnn-color-picker.cjs",[[1,"dnn-color-picker",{"color":[1],"colorBoxHeight":[1,"color-box-height"],"currentColor":[32],"rgbDisplay":[32],"hslDisplay":[32],"hexDisplay":[32],"focused":[32]},null,{"currentColor":["handeCurrentColorChanged"]}]]],["dnn-dropzone.cjs",[[65,"dnn-dropzone",{"resx":[16],"allowedExtensions":[16],"allowCameraMode":[4,"allow-camera-mode"],"captureQuality":[2,"capture-quality"],"maxFileSize":[2,"max-file-size"],"name":[1],"canTakeSnapshots":[32],"takingPicture":[32],"fileTooLarge":[32],"invalidExtension":[32],"localResx":[32],"focused":[32]},null,{"resx":["resxChanged"]}]]],["dnn-searchbox.cjs",[[1,"dnn-searchbox",{"placeholder":[1],"debounced":[4],"debounceTime":[2,"debounce-time"],"query":[1025],"focused":[32]},null,{"query":["handleQueryChanged"]}]]],["dnn-tab_2.cjs",[[1,"dnn-tab",{"tabTitle":[1,"tab-title"],"visible":[32],"show":[64],"hide":[64]}],[1,"dnn-tabs",{"tabTitles":[32],"selectedTabTitle":[32]}]]],["dnn-collapsible.cjs",[[1,"dnn-collapsible",{"expanded":[516],"transitionDuration":[2,"transition-duration"],"updateSize":[64]},[[0,"dnnCollapsibleHeightChanged","handleHeightChanged"]],{"expanded":["handledExpandedChanged"]}]]],["dnn-modal.cjs",[[1,"dnn-modal",{"backdropDismiss":[4,"backdrop-dismiss"],"closeText":[1,"close-text"],"resizable":[4],"showCloseButton":[4,"show-close-button"],"visible":[1540],"show":[64],"hide":[64]}]]],["dnn-button.cjs",[[65,"dnn-button",{"type":[1],"appearance":[1],"formButtonType":[1,"form-button-type"],"reversed":[4],"size":[1],"confirm":[4],"confirmYesText":[1,"confirm-yes-text"],"confirmNoText":[1,"confirm-no-text"],"confirmMessage":[1,"confirm-message"],"disabled":[4],"focused":[32],"modalVisible":[32]}]]],["dnn-permissions-grid.cjs",[[1,"dnn-permissions-grid",{"permissions":[1040],"roleGroups":[16],"roles":[16],"resx":[16],"foundUsers":[16],"selectedRoleGroupId":[32],"userQuery":[32],"pickedUser":[32],"localResx":[32],"focused":[32]},null,{"foundUsers":["handleFoundUsersChanged"],"resx":["resxChanged"]}]]],["dnn-fieldset.cjs",[[1,"dnn-fieldset",{"focused":[1540],"disabled":[1540],"invalid":[1540],"label":[1],"floatLabel":[1540,"float-label"],"helpText":[1,"help-text"],"resizable":[1],"customValidityMessage":[32],"setFocused":[64],"setBlurred":[64],"disable":[64],"enable":[64],"pinLabel":[64],"unpinLabel":[64],"setValidity":[64]}]]]], options);
+  return index.bootstrapLazy([["dnn-color-input.cjs",[[65,"dnn-color-input",{"color":[1025],"contrastColor":[1025,"contrast-color"],"lightColor":[1025,"light-color"],"darkColor":[1025,"dark-color"],"label":[1],"readonly":[4],"localization":[16],"name":[1],"helpText":[1,"help-text"],"useContrastColor":[4,"use-contrast-color"],"useLightColor":[4,"use-light-color"],"useDarkColor":[4,"use-dark-color"],"currentColor":[32],"focused":[32]},null,{"currentColor":["currentColorChanged"]}]]],["dnn-image-cropper.cjs",[[65,"dnn-image-cropper",{"width":[2],"height":[2],"resx":[16],"quality":[2],"preventUndersized":[4,"prevent-undersized"],"name":[1],"view":[32],"localResx":[32],"fileName":[32],"focused":[32],"clear":[64]},null,{"resx":["resxChanged"]}]]],["dnn-autocomplete.cjs",[[65,"dnn-autocomplete",{"label":[1],"name":[1],"helpText":[1,"help-text"],"value":[1537],"required":[4],"disabled":[4],"suggestions":[16],"renderSuggestion":[16],"totalSuggestions":[2,"total-suggestions"],"preloadThresholdPixels":[2,"preload-threshold-pixels"],"focused":[32],"valid":[32],"customValidityMessage":[32],"selectedIndex":[32],"positionInitialized":[32],"lastScrollTop":[32],"displayValue":[32],"checkValidity":[64],"setCustomValidity":[64]},[[4,"click","handleClick"]]]]],["dnn-input.cjs",[[65,"dnn-input",{"type":[1025],"label":[1],"name":[1],"value":[1544],"helpText":[1,"help-text"],"required":[4],"disabled":[4],"autocomplete":[1],"min":[8],"max":[8],"minlength":[2],"maxlength":[2],"multiple":[4],"pattern":[1],"readonly":[4],"step":[8],"disableValidityReporting":[4,"disable-validity-reporting"],"allowShowPassword":[4,"allow-show-password"],"focused":[32],"valid":[32],"checkValidity":[64],"setCustomValidity":[64]}]]],["dnn-select.cjs",[[65,"dnn-select",{"label":[1],"name":[1],"required":[4],"helpText":[1,"help-text"],"disabled":[4],"disableValidityReporting":[4,"disable-validity-reporting"],"value":[1537],"focused":[32],"valid":[32],"customValidityMessage":[32],"checkValidity":[64]}]]],["dnn-textarea.cjs",[[65,"dnn-textarea",{"resizable":[1],"value":[1025],"label":[1],"name":[1],"helpText":[1,"help-text"],"required":[4],"disabled":[4],"autocomplete":[1],"minlength":[2],"maxlength":[2],"readonly":[4],"rows":[2],"focused":[32],"valid":[32],"customValidityMessage":[32],"checkValidity":[64],"setCustomValidity":[64]}]]],["dnn-treeview-item.cjs",[[1,"dnn-treeview-item",{"expanded":[1540],"hasChildren":[32],"focused":[32]},null,{"expanded":["watchExpanded"]}]]],["dnn-chevron.cjs",[[1,"dnn-chevron",{"expandText":[1,"expand-text"],"collapseText":[1,"collapse-text"],"expanded":[1540],"focused":[32]},null,{"expanded":["handleExpandedChanged"]}]]],["dnn-monaco-editor.cjs",[[66,"dnn-monaco-editor",{"language":[1],"value":[1025],"name":[1],"focused":[32]},null,{"language":["languageChanged"],"value":["valueChanged"]}]]],["dnn-progress-bar.cjs",[[1,"dnn-progress-bar",{"value":[2],"max":[2],"useGradient":[4,"use-gradient"]}]]],["dnn-richtext.cjs",[[65,"dnn-richtext",{"options":[16],"value":[1],"name":[1],"focused":[32]},null,{"value":["watchValueChanged"]}]]],["dnn-sort-icon.cjs",[[1,"dnn-sort-icon",{"sortDirection":[1025,"sort-direction"],"focused":[32]}]]],["dnn-toggle.cjs",[[65,"dnn-toggle",{"checked":[1028],"disabled":[4],"name":[1],"value":[1],"focused":[32]},[[2,"click","handleClick"]],{"checked":["checkedChanged"]}]]],["dnn-vertical-overflow-menu.cjs",[[1,"dnn-vertical-overflow-menu",{"showDropdownButton":[32],"showDropdownMenu":[32]}]]],["dnn-vertical-splitview.cjs",[[1,"dnn-vertical-splitview",{"splitterWidth":[2,"splitter-width"],"splitWidthPercentage":[1026,"split-width-percentage"],"leftWidth":[32],"rightWidth":[32],"setSplitWidthPercentage":[64],"getSplitWidthPercentage":[64]}]]],["dnn-checkbox.cjs",[[65,"dnn-checkbox",{"checked":[1025],"useIntermediate":[4,"use-intermediate"],"value":[1],"name":[1],"focused":[32]},[[2,"click","handleClick"]],{"checked":["handleCheckedChange"]}]]],["dnn-color-picker.cjs",[[1,"dnn-color-picker",{"color":[1],"colorBoxHeight":[1,"color-box-height"],"currentColor":[32],"rgbDisplay":[32],"hslDisplay":[32],"hexDisplay":[32],"focused":[32]},null,{"currentColor":["handeCurrentColorChanged"]}]]],["dnn-dropzone.cjs",[[65,"dnn-dropzone",{"resx":[16],"allowedExtensions":[16],"allowCameraMode":[4,"allow-camera-mode"],"captureQuality":[2,"capture-quality"],"maxFileSize":[2,"max-file-size"],"name":[1],"canTakeSnapshots":[32],"takingPicture":[32],"fileTooLarge":[32],"invalidExtension":[32],"localResx":[32],"focused":[32]},null,{"resx":["resxChanged"]}]]],["dnn-searchbox.cjs",[[1,"dnn-searchbox",{"placeholder":[1],"debounced":[4],"debounceTime":[2,"debounce-time"],"query":[1025],"focused":[32]},null,{"query":["handleQueryChanged"]}]]],["dnn-tab_2.cjs",[[1,"dnn-tab",{"tabTitle":[1,"tab-title"],"visible":[32],"show":[64],"hide":[64]}],[1,"dnn-tabs",{"tabTitles":[32],"selectedTabTitle":[32]}]]],["dnn-collapsible.cjs",[[1,"dnn-collapsible",{"expanded":[516],"transitionDuration":[2,"transition-duration"],"updateSize":[64]},[[0,"dnnCollapsibleHeightChanged","handleHeightChanged"]],{"expanded":["handledExpandedChanged"]}]]],["dnn-modal.cjs",[[1,"dnn-modal",{"backdropDismiss":[4,"backdrop-dismiss"],"closeText":[1,"close-text"],"resizable":[4],"showCloseButton":[4,"show-close-button"],"visible":[1540],"show":[64],"hide":[64]}]]],["dnn-button.cjs",[[65,"dnn-button",{"type":[1],"appearance":[1],"formButtonType":[1,"form-button-type"],"reversed":[4],"size":[1],"confirm":[4],"confirmYesText":[1,"confirm-yes-text"],"confirmNoText":[1,"confirm-no-text"],"confirmMessage":[1,"confirm-message"],"disabled":[4],"focused":[32],"modalVisible":[32]}]]],["dnn-permissions-grid.cjs",[[1,"dnn-permissions-grid",{"permissions":[1040],"roleGroups":[16],"roles":[16],"resx":[16],"foundUsers":[16],"selectedRoleGroupId":[32],"userQuery":[32],"pickedUser":[32],"localResx":[32],"focused":[32]},null,{"foundUsers":["handleFoundUsersChanged"],"resx":["resxChanged"]}]]],["dnn-fieldset.cjs",[[1,"dnn-fieldset",{"focused":[1540],"disabled":[1540],"invalid":[1540],"label":[1],"floatLabel":[1540,"float-label"],"helpText":[1,"help-text"],"resizable":[1],"customValidityMessage":[32],"setFocused":[64],"setBlurred":[64],"disable":[64],"enable":[64],"pinLabel":[64],"unpinLabel":[64],"setValidity":[64]}]]]], options);
 };
 exports.setNonce = index.setNonce;

package/dist/collection/components/dnn-autocomplete/dnn-autocomplete.js CHANGED Viewed

@@ -53,9 +53,15 @@ export class DnnAutocomplete {
         this.selectedIndex = undefined;
         this.positionInitialized = false;
         this.lastScrollTop = 0;
+        this.displayValue = "";
     }
     /** Reports the input validity details. See https://developer.mozilla.org/en-US/docs/Web/API/ValidityState */
     async checkValidity() {
+        var validity = this.inputField.checkValidity();
+        if (!validity) {
+            this.fieldset.setValidity(false, this.inputField.validationMessage);
+        }
+        this.fieldset.setValidity(true, "");
         return this.inputField.validity;
     }
     /** Can be used to set a custom validity message. */
@@ -71,7 +77,7 @@ export class DnnAutocomplete {
         this.fieldset.setValidity(false, message);
     }
     /** Listener for mouse down event */
-    handleOutsideClick(e) {
+    handleClick(e) {
         const path = e.composedPath();
         if (!path.includes(this.element)) {
             this.focused = false;
@@ -91,12 +97,13 @@ export class DnnAutocomplete {
         this.internals.setFormValue("");
     }
     handleInput(e) {
-        const value = e.target.value;
-        this.value = value;
+        const inputValue = e.target.value;
+        this.displayValue = inputValue;
+        this.value = inputValue;
         var valid = this.inputField.checkValidity();
         this.valid = valid;
-        this.valueInput.emit(value);
-        this.handleSearchQueryChanged(value);
+        this.valueInput.emit(inputValue);
+        this.handleSearchQueryChanged(inputValue);
     }
     handleSearchQueryChanged(value) {
         this.searchQueryChanged.emit(value);
@@ -170,6 +177,9 @@ export class DnnAutocomplete {
         e.stopPropagation();
         this.selectedIndex = index;
         this.value = this.suggestions[this.selectedIndex].value;
+        this.displayValue = this.suggestions[this.selectedIndex].label;
+        this.inputField.value = this.displayValue;
+        this.checkValidity();
         this.focused = false;
         this.itemSelected.emit(this.suggestions[this.selectedIndex].value);
     }
@@ -223,7 +233,6 @@ export class DnnAutocomplete {
         }
     }
     handleBlur() {
-        this.focused = false;
         var validity = this.inputField.checkValidity();
         this.valid = validity;
         this.fieldset.setValidity(validity, this.inputField.validationMessage);
@@ -231,9 +240,12 @@ export class DnnAutocomplete {
     }
     render() {
         var _a;
-        return (h(Host, { key: '9eab75ca413ef3f1e2fd03fd297e3234405cf591', tabIndex: this.focused ? -1 : 0, onFocus: () => this.inputField.focus(), onBlur: () => this.inputField.blur() }, h("dnn-fieldset", { key: '3a6435b32891b0d8da6ad6103b3794e145e9f3b6', 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() }, h("div", { key: 'ba9102f4739a8e0092bca6a9b13fe4afa5bf60ec', class: "inner-container" }, h("input", { key: 'beafefbaa7398b281e8d55a1c2f8e43bd5efb23a', ref: (el) => this.inputField = el, name: this.name, type: "search", role: "combobox", "aria-haspopup": "listbox", "aria-expanded": this.focused.toString(), "aria-activedescendant": this.selectedIndex !== undefined ? `option-${this.selectedIndex}` : undefined, disabled: this.disabled, required: this.required, autoComplete: "off", value: this.suggestions.length > 0 && this.selectedIndex != undefined ? this.suggestions[this.selectedIndex].label : this.value, onFocus: () => this.focused = true, onBlur: () => this.handleBlur(), onInput: e => this.handleInput(e), onInvalid: () => this.handleInvalid(), onChange: () => this.handleChange(), "aria-labelledby": this.labelId, onKeyDown: e => this.handleKeyDown(e) }), h("ul", { key: 'b299d725498438b2534d0173fba34eee66c78ee2', class: this.focused && this.suggestions.length > 0 ? "show" : "", role: "listbox", ref: el => this.suggestionsContainer = el, onScroll: () => this.handleSuggestionsScroll() }, this.suggestions.map((suggestion, index) => (h("li", { id: `option-${index}`, role: "option", "aria-selected": this.selectedIndex == index, class: this.selectedIndex == index ? "selected" : "", onClick: e => this.selectItem(e, index) }, this.renderSuggestion != undefined ? this.renderSuggestion(suggestion) : suggestion.label))), this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length &&
-            h("div", { key: '1be08bd2a97113d4ee68f3099fa025ccf7e051b7', class: "loading" }), this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length && this.positionInitialized &&
-            h("div", { key: 'efdadf5afa162de0148525f3394dd0c29c0da23a', style: { height: `${this.getVirtualScrollHeight()}px` } })), h("svg", { key: '1ce44347eec5d871c245658700e0862ddc480c4a', onClick: () => this.handleDropdownClick(), class: "chevron-down", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960" }, h("path", { key: '63dde5f0d50fd2085218431af1d6b15b9d3af8df', d: "M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z" }))))));
+        return (h(Host, { key: '240eab18aec780b662642ce85ee68903c246cd8b', tabIndex: this.focused ? -1 : 0, onFocus: () => this.inputField.focus(), onBlur: () => this.inputField.blur() }, h("dnn-fieldset", { key: '7749d3b19d0cb7e6dc71f8deb9ff50bcea2390e0', 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() }, h("div", { key: 'fa9b987426ae9c70d583aead57f161c6cd53ef9f', class: "inner-container" }, h("input", { key: 'b5c0f2bf1f6cda9de03c5f6ddbe42605076bcb9e', ref: (el) => this.inputField = el, name: this.name, type: "search", role: "combobox", "aria-haspopup": "listbox", "aria-expanded": this.focused.toString(), "aria-activedescendant": this.selectedIndex !== undefined ? `option-${this.selectedIndex}` : undefined, disabled: this.disabled, required: this.required, autoComplete: "off", value: this.displayValue, onFocus: () => {
+                this.searchQueryChanged.emit(this.value || "");
+                this.focused = true;
+            }, onBlur: () => this.handleBlur(), onInput: e => this.handleInput(e), onInvalid: () => this.handleInvalid(), onChange: () => this.handleChange(), "aria-labelledby": this.labelId, onKeyDown: e => this.handleKeyDown(e) }), h("ul", { key: 'f6f2688374ab8f18db055ccbeb43e08cae06c07b', class: this.focused && this.suggestions.length > 0 ? "show" : "", role: "listbox", ref: el => this.suggestionsContainer = el, onScroll: () => this.handleSuggestionsScroll() }, this.suggestions.map((suggestion, index) => (h("li", { id: `option-${index}`, role: "option", "aria-selected": this.selectedIndex == index, class: this.selectedIndex == index ? "selected" : "", onClick: e => this.selectItem(e, index) }, this.renderSuggestion != undefined ? this.renderSuggestion(suggestion) : suggestion.label))), this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length &&
+            h("div", { key: '681a43c03121d04e40295c2a84294dfa38304ec8', class: "loading" }), this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length && this.positionInitialized &&
+            h("div", { key: '35e49fff8bd725da4bb1022db932fd5554daad88', style: { height: `${this.getVirtualScrollHeight()}px` } })), h("svg", { key: '7d789d7b160a1a6d8b8a66cc40c714563f39a5e6', onClick: () => this.handleDropdownClick(), class: "chevron-down", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960" }, h("path", { key: 'b542a9084a33294671fbfdd3f8f5388df89a7abc', d: "M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z" }))))));
     }
     static get is() { return "dnn-autocomplete"; }
     static get encapsulation() { return "shadow"; }
@@ -443,7 +455,8 @@ export class DnnAutocomplete {
             "customValidityMessage": {},
             "selectedIndex": {},
             "positionInitialized": {},
-            "lastScrollTop": {}
+            "lastScrollTop": {},
+            "displayValue": {}
         };
     }
     static get events() {
@@ -580,7 +593,7 @@ export class DnnAutocomplete {
     static get listeners() {
         return [{
                 "name": "click",
-                "method": "handleOutsideClick",
+                "method": "handleClick",
                 "target": "document",
                 "capture": false,
                 "passive": false

package/dist/collection/components/dnn-autocomplete/dnn-autocomplete.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dnn-autocomplete.js","sourceRoot":"","sources":["../../../src/components/dnn-autocomplete/dnn-autocomplete.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, State, Event, Element, h, Host, EventEmitter, Method, AttachInternals, Listen } from '@stencil/core';\nimport { DnnAutocompleteSuggestion, NeedMoreItemsEventArgs } from './types';\nimport { Debounce } from '../../utilities/debounce';\n\n@Component({\n tag: 'dnn-autocomplete',\n styleUrl: 'dnn-autocomplete.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class DnnAutocomplete {\n\n /** The label for this autocomplete. /\n @Prop() label: string;\n\n /* The name for this autocomplete when used in forms. /\n @Prop() name: string;\n\n /* Defines the help label displayed under the field. /\n @Prop() helpText: string;\n\n /* Defines the value for this autocomplete /\n @Prop({mutable: true, reflect: true}) value: string;\n\n /* Defines whether the field requires having a value. /\n @Prop() required: boolean;\n\n /* Defines whether the field is disabled. /\n @Prop() disabled: boolean;\n\n /* Sets the list of suggestions. /\n @Prop() suggestions: DnnAutocompleteSuggestion[] = [];\n\n /* Callback to render suggestions, if not provided, only the label will be rendered. /\n @Prop() renderSuggestion: (suggestion: DnnAutocompleteSuggestion) => HTMLElement;\n\n /* The total amount of suggestions for the given search query.\n * This can be used to show virtual scroll and pagination progressive feeding.\n * The needMoreItems event should be used to request more items.\n /\n @Prop() totalSuggestions: number;\n\n /* How many suggestions to preload in pixels of their height.\n * This is used to calculate the virtual scroll height and request\n * more items before they get into view.\n /\n @Prop() preloadThresholdPixels: number = 1000;\n\n @Element() element: HTMLDnnAutocompleteElement;\n\n /* Fires when the value has changed and the user exits the input. /\n @Event() valueChange: EventEmitter<number \| string \| string[]>;\n\n /* Fires when the using is inputing data (on keystrokes). /\n @Event() valueInput: EventEmitter<number \| string \| string[]>;\n\n /* Fires when the component needs to display more items in the suggestions. /\n @Event() needMoreItems: EventEmitter<NeedMoreItemsEventArgs>;\n\n /* Fires when the search query has changed.\n * This is almost like valueInput, but it is debounced\n * and can be used to trigger a search query without overloading\n * API endpoints while typing.\n /\n @Event() searchQueryChanged: EventEmitter<string>;\n \n /* Fires when an item is selected. /\n @Event() itemSelected: EventEmitter<string>;\n\n /* Reports the input validity details. See https://developer.mozilla.org/en-US/docs/Web/API/ValidityState /\n @Method()\n async checkValidity(): Promise<ValidityState> {\n return this.inputField.validity;\n }\n \n /* Can be used to set a custom validity message. /\n @Method()\n async setCustomValidity(message: string): Promise<void> {\n if (message == undefined \|\| message == \"\") {\n this.inputField.setCustomValidity(\"\");\n this.valid = true;\n this.fieldset.setValidity(true);\n return;\n }\n\n this.inputField.setCustomValidity(message);\n this.valid = false;\n this.fieldset.setValidity(false, message);\n }\n\n @State() focused = false;\n @State() valid = true;\n @State() customValidityMessage: string;\n @State() selectedIndex: number;\n @State() positionInitialized = false;\n @State() lastScrollTop = 0;\n \n /* attacth the internals for form validation /\n @AttachInternals() internals: ElementInternals;\n \n /* Listener for mouse down event /\n @Listen(\"click\", { target: \"document\", capture: false })\n handleOutsideClick(e: MouseEvent) {\n const path = e.composedPath();\n if (!path.includes(this.element))\n {\n this.focused = false;\n }\n }\n \n componentDidRender(){\n if (this.focused && this.suggestions.length > 0 && !this.positionInitialized){\n this.adjustDropdownPosition();\n }\n }\n\n private inputField!: HTMLInputElement;\n private suggestionsContainer: HTMLUListElement;\n private labelId: string;\n private fieldset: HTMLDnnFieldsetElement;\n \n // eslint-disable-next-line @stencil-community/own-methods-must-be-private\n formResetCallback() {\n this.inputField.setCustomValidity(\"\");\n this.valid = true;\n this.value = \"\";\n this.internals.setValidity({});\n this.internals.setFormValue(\"\");\n }\n \n private handleInput(e: Event) {\n const value = (e.target as HTMLInputElement).value;\n this.value = value;\n var valid = this.inputField.checkValidity();\n this.valid = valid;\n this.valueInput.emit(value);\n this.handleSearchQueryChanged(value);\n }\n\n @Debounce(300)\n private handleSearchQueryChanged(value: string) {\n this.searchQueryChanged.emit(value);\n }\n\n private handleInvalid(): void {\n this.valid = false;\n if (this.customValidityMessage == undefined) {\n this.customValidityMessage = this.inputField.validationMessage;\n }\n }\n\n private handleChange() {\n this.valueChange.emit(this.value);\n if (this.name != undefined) {\n var data = new FormData();\n data.append(this.name, this.value.toString());\n this.internals.setFormValue(data);\n }\n }\n\n /* Check if the label should float /\n private shouldLabelFloat(): boolean {\n if (this.focused) {\n return false;\n }\n\n if (this.value != undefined && this.value != \"\") {\n return false;\n }\n\n return true;\n }\n\n private findAverageSuggestionHeight(): number {\n const suggestionItems = this.suggestionsContainer.querySelectorAll(\"li\");\n var totalHeight = 0;\n for (let i = 0; i < suggestionItems.length; i++) {\n totalHeight += suggestionItems[i].clientHeight;\n }\n return totalHeight / suggestionItems.length;\n }\n\n private readonly adjustDropdownPosition = () => {\n var itemHeight = this.findAverageSuggestionHeight();\n requestAnimationFrame(() => {\n this.positionInitialized = true;\n });\n\n // If we can fit 3 items below the input and there is still 3em left, we show the dropdown under.\n // Otherwise, we show it above.\n var spaceBelow = window.innerHeight - this.inputField.getBoundingClientRect().bottom;\n const rem = parseFloat(getComputedStyle(document.documentElement).fontSize);\n const fitsDown = spaceBelow > 3 itemHeight + 3 * rem;\n if (fitsDown) {\n this.suggestionsContainer.style.top = \"1.2rem\";\n }\n else {\n this.suggestionsContainer.style.bottom = \"1.2rem\";\n }\n\n // Set the max height to not overflow the screen.\n if (fitsDown){\n this.suggestionsContainer.style.maxHeight = `${spaceBelow - 3 * rem}px`;\n }\n else {\n this.suggestionsContainer.style.maxHeight = `${this.inputField.getBoundingClientRect().top - 3 * rem}px`;\n }\n\n this.checkIfMoreItemsNeeded();\n }\n\n private handleKeyDown(e: KeyboardEvent): void {\n if (e.key === \"ArrowDown\") {\n e.preventDefault();\n if (this.selectedIndex == undefined) {\n this.selectedIndex = 0;\n } else {\n this.selectedIndex = Math.min(this.selectedIndex + 1, this.suggestions.length - 1);\n }\n }\n if (e.key === \"ArrowUp\") {\n e.preventDefault();\n if (this.selectedIndex == undefined) {\n this.selectedIndex = this.suggestions.length - 1;\n } else {\n this.selectedIndex = Math.max(this.selectedIndex - 1, 0);\n }\n }\n this.value = this.suggestions[this.selectedIndex]?.value \|\| this.value;\n if (e.key === \"Enter\") {\n var selectedItem = this.suggestions[this.selectedIndex];\n this.value = selectedItem.value;\n this.inputField.value = selectedItem.label;\n this.itemSelected.emit(selectedItem.value);\n this.focused = false;\n }\n if (e.key === \"Tab\"){\n this.focused = false;\n }\n }\n\n private selectItem(e: Event, index: number): void {\n e.preventDefault();\n e.stopPropagation();\n this.selectedIndex = index;\n this.value = this.suggestions[this.selectedIndex].value;\n this.focused = false;\n this.itemSelected.emit(this.suggestions[this.selectedIndex].value)\n }\n\n private getVirtualScrollHeight(): number {\n const itemHeight = this.findAverageSuggestionHeight();\n const upcomingItems = this.totalSuggestions - this.suggestions.length;\n return itemHeight * upcomingItems;\n }\n\n private handleDropdownClick(): void {\n this.handleSearchQueryChanged(this.value);\n }\n\n @Debounce(100)\n private handleSuggestionsScroll(): void {\n const container = this.suggestionsContainer;\n const currentScrollTop = container.scrollTop;\n\n // Only act if we are scrolling down\n if (currentScrollTop > this.lastScrollTop) {\n const loadingDiv = container.querySelector('.loading') as HTMLDivElement;\n\n if (loadingDiv == undefined) {\n this.lastScrollTop = currentScrollTop;\n return;\n }\n\n const loadingDivPosition = loadingDiv.offsetTop;\n const loadingDivHeight = loadingDiv.offsetHeight;\n const loadingDivBottom = loadingDivPosition + loadingDivHeight;\n\n // Calculate the visible bottom of the scroll container\n const visibleBottom = currentScrollTop + container.clientHeight;\n\n // Prevent scrolling past the loading div by checking if the visible bottom surpasses the loading div's bottom\n if (visibleBottom > loadingDivBottom) {\n // Adjust scrollTop so it doesn't scroll past the loading div\n container.scrollTop = loadingDivBottom - container.clientHeight;\n }\n\n // Check if more items are needed based on the position of the loading div\n this.checkIfMoreItemsNeeded();\n }\n\n // Update the last scroll position\n this.lastScrollTop = currentScrollTop;\n }\n\n @Debounce()\n private checkIfMoreItemsNeeded() {\n const container = this.suggestionsContainer;\n \n const loadingDiv = container.querySelector('.loading') as HTMLDivElement;\n if (loadingDiv == undefined) return; // Exit if there's no loading div\n \n const scrollPosition = container.scrollTop + container.clientHeight;\n const loadingDivPosition = loadingDiv.offsetTop;\n \n // Check if the loading div is within the threshold of becoming visible\n if (loadingDivPosition - scrollPosition < this.preloadThresholdPixels) {\n const eventArgs: NeedMoreItemsEventArgs = {\n searchTerm: this.inputField.value,\n };\n this.needMoreItems.emit(eventArgs);\n }\n }\n\n handleBlur(): void {\n this.focused = false\n var validity = this.inputField.checkValidity();\n this.valid = validity;\n this.fieldset.setValidity(validity, this.inputField.validationMessage);\n this.internals.setValidity(this.inputField.validity, this.inputField.validationMessage);\n }\n\n render() {\n return (\n <Host\n tabIndex={this.focused ? -1 : 0}\n onFocus={() => this.inputField.focus()}\n onBlur={() => this.inputField.blur()}\n >\n <dnn-fieldset\n ref={el => this.fieldset = el}\n invalid={!this.valid}\n focused={this.focused}\n label={`${this.label ?? \"\"}${this.required ? \" *\" : \"\"}`}\n helpText={this.helpText}\n id={this.labelId}\n disabled={this.disabled}\n floatLabel={this.shouldLabelFloat()}\n >\n <div class=\"inner-container\">\n <input\n ref={(el) => this.inputField = el}\n name={this.name}\n type=\"search\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n aria-expanded={this.focused.toString()}\n aria-activedescendant={this.selectedIndex !== undefined ? `option-${this.selectedIndex}` : undefined}\n disabled={this.disabled}\n required={this.required}\n autoComplete=\"off\"\n value={this.suggestions.length > 0 && this.selectedIndex != undefined ? this.suggestions[this.selectedIndex].label : this.value}\n onFocus={() => this.focused = true}\n onBlur={() => this.handleBlur()}\n onInput={e => this.handleInput(e)}\n onInvalid={() => this.handleInvalid()}\n onChange={() => this.handleChange()}\n aria-labelledby={this.labelId}\n onKeyDown={e => this.handleKeyDown(e)}\n />\n <ul\n class={this.focused && this.suggestions.length > 0 ? \"show\" : \"\"}\n role=\"listbox\"\n ref={el => this.suggestionsContainer = el}\n onScroll={() => this.handleSuggestionsScroll()}\n >\n {this.suggestions.map((suggestion, index) => (\n <li\n id={`option-${index}`}\n role=\"option\"\n aria-selected={this.selectedIndex == index}\n class={this.selectedIndex == index ? \"selected\" : \"\"}\n onClick={e => this.selectItem(e, index)}\n >\n {this.renderSuggestion != undefined ? this.renderSuggestion(suggestion) : suggestion.label}\n </li>\n ))}\n {this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length &&\n <div class=\"loading\">\n </div>\n }\n {this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length && this.positionInitialized &&\n <div style={{height: `${this.getVirtualScrollHeight()}px`}}>\n </div>\n }\n </ul>\n <svg\n onClick={() => this.handleDropdownClick()}\n class=\"chevron-down\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 -960 960 960\">\n <path d=\"M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z\"/>\n </svg>\n </div>\n </dnn-fieldset>\n </Host>\n );\n }\n}"]}
1	+ {"version":3,"file":"dnn-autocomplete.js","sourceRoot":"","sources":["../../../src/components/dnn-autocomplete/dnn-autocomplete.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAgB,MAAM,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAE/H,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAQpD,MAAM,OAAO,eAAe;;QAmLT,2BAAsB,GAAG,GAAG,EAAE;YAC7C,IAAI,UAAU,GAAG,IAAI,CAAC,2BAA2B,EAAE,CAAC;YACpD,qBAAqB,CAAC,GAAG,EAAE;gBACzB,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC;YAClC,CAAC,CAAC,CAAC;YAEH,iGAAiG;YACjG,+BAA+B;YAC/B,IAAI,UAAU,GAAG,MAAM,CAAC,WAAW,GAAG,IAAI,CAAC,UAAU,CAAC,qBAAqB,EAAE,CAAC,MAAM,CAAC;YACrF,MAAM,GAAG,GAAG,UAAU,CAAC,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC,QAAQ,CAAC,CAAC;YAC5E,MAAM,QAAQ,GAAG,UAAU,GAAG,CAAC,GAAG,UAAU,GAAG,CAAC,GAAG,GAAG,CAAC;YACvD,IAAI,QAAQ,EAAE,CAAC;gBACb,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC,GAAG,GAAG,QAAQ,CAAC;YACjD,CAAC;iBACI,CAAC;gBACJ,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC,MAAM,GAAG,QAAQ,CAAC;YACpD,CAAC;YAED,iDAAiD;YACjD,IAAI,QAAQ,EAAC,CAAC;gBACZ,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,UAAU,GAAG,CAAC,GAAG,GAAG,IAAI,CAAC;YAC1E,CAAC;iBACI,CAAC;gBACJ,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,IAAI,CAAC,UAAU,CAAC,qBAAqB,EAAE,CAAC,GAAG,GAAG,CAAC,GAAG,GAAG,IAAI,CAAC;YAC3G,CAAC;YAED,IAAI,CAAC,sBAAsB,EAAE,CAAC;QAChC,CAAC,CAAA;;;;;;;2BAzLkD,EAAE;;;sCAeZ,IAAI;uBAiD1B,KAAK;qBACP,IAAI;;;mCAGU,KAAK;6BACX,CAAC;4BACM,EAAE;;IAhClC,6GAA6G;IAE7G,KAAK,CAAC,aAAa;QACjB,IAAI,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,CAAC;QAC/C,IAAI,CAAC,QAAQ,EAAE,CAAC;YACd,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC;QACtE,CAAC;QACD,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;QACpC,OAAO,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC;IAClC,CAAC;IAED,oDAAoD;IAEpD,KAAK,CAAC,iBAAiB,CAAC,OAAe;QACrC,IAAI,OAAO,IAAI,SAAS,IAAI,OAAO,IAAI,EAAE,EAAE,CAAC;YAC1C,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC,EAAE,CAAC,CAAC;YACtC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;YAClB,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;YAChC,OAAO;QACT,CAAC;QAED,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC;QAC3C,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;IAC5C,CAAC;IAaD,oCAAoC;IAEpC,WAAW,CAAC,CAAa;QACvB,MAAM,IAAI,GAAG,CAAC,CAAC,YAAY,EAAE,CAAC;QAC9B,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,EAChC,CAAC;YACC,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACvB,CAAC;IACH,CAAC;IAED,kBAAkB;QAChB,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,mBAAmB,EAAC,CAAC;YAC5E,IAAI,CAAC,sBAAsB,EAAE,CAAC;QAChC,CAAC;IACH,CAAC;IAOD,0EAA0E;IAC1E,iBAAiB;QACf,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC,EAAE,CAAC,CAAC;QACtC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QAClB,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;QAChB,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;QAC/B,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;IAClC,CAAC;IAEO,WAAW,CAAC,CAAQ;QAC1B,MAAM,UAAU,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC;QACxD,IAAI,CAAC,YAAY,GAAG,UAAU,CAAC;QAC/B,IAAI,CAAC,KAAK,GAAG,UAAU,CAAC;QACxB,IAAI,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,CAAC;QAC5C,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACjC,IAAI,CAAC,wBAAwB,CAAC,UAAU,CAAC,CAAC;IAC5C,CAAC;IAGO,wBAAwB,CAAC,KAAa;QAC5C,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACtC,CAAC;IAEO,aAAa;QACnB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,IAAI,CAAC,qBAAqB,IAAI,SAAS,EAAE,CAAC;YAC5C,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC;QACjE,CAAC;IACH,CAAC;IAEO,YAAY;QAClB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAClC,IAAI,IAAI,CAAC,IAAI,IAAI,SAAS,EAAE,CAAC;YAC3B,IAAI,IAAI,GAAG,IAAI,QAAQ,EAAE,CAAC;YAC1B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC;YAC9C,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;QACpC,CAAC;IACH,CAAC;IAED,sCAAsC;IAC9B,gBAAgB;QACtB,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,OAAO,KAAK,CAAC;QACf,CAAC;QAED,IAAI,IAAI,CAAC,KAAK,IAAI,SAAS,IAAI,IAAI,CAAC,KAAK,IAAI,EAAE,EAAE,CAAC;YAChD,OAAO,KAAK,CAAC;QACf,CAAC;QAED,OAAO,IAAI,CAAC;IACd,CAAC;IAEO,2BAA2B;QACjC,MAAM,eAAe,GAAG,IAAI,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;QACzE,IAAI,WAAW,GAAG,CAAC,CAAC;QACpB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,eAAe,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YAChD,WAAW,IAAI,eAAe,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC;QACjD,CAAC;QACD,OAAO,WAAW,GAAG,eAAe,CAAC,MAAM,CAAC;IAC9C,CAAC;IA+BO,aAAa,CAAC,CAAgB;;QACpC,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,EAAE,CAAC;YAC1B,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,IAAI,CAAC,aAAa,IAAI,SAAS,EAAE,CAAC;gBACpC,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC;YACzB,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,aAAa,GAAG,CAAC,EAAE,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;YACrF,CAAC;QACH,CAAC;QACD,IAAI,CAAC,CAAC,GAAG,KAAK,SAAS,EAAE,CAAC;YACxB,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,IAAI,CAAC,aAAa,IAAI,SAAS,EAAE,CAAC;gBACpC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC;YACnD,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,aAAa,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;YAC3D,CAAC;QACH,CAAC;QACD,IAAI,CAAC,KAAK,GAAG,CAAA,MAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,aAAa,CAAC,0CAAE,KAAK,KAAI,IAAI,CAAC,KAAK,CAAC;QACvE,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;YACtB,IAAI,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;YACxD,IAAI,CAAC,KAAK,GAAG,YAAY,CAAC,KAAK,CAAC;YAChC,IAAI,CAAC,UAAU,CAAC,KAAK,GAAG,YAAY,CAAC,KAAK,CAAC;YAC3C,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;YAC3C,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACvB,CAAC;QACD,IAAI,CAAC,CAAC,GAAG,KAAK,KAAK,EAAC,CAAC;YACnB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACvB,CAAC;IACH,CAAC;IAEO,UAAU,CAAC,CAAQ,EAAE,KAAa;QACxC,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;QAC3B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,KAAK,CAAC;QACxD,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,KAAK,CAAC;QAC/D,IAAI,CAAC,UAAU,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC;QAC1C,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,KAAK,CAAC,CAAA;IACpE,CAAC;IAEO,sBAAsB;QAC5B,MAAM,UAAU,GAAG,IAAI,CAAC,2BAA2B,EAAE,CAAC;QACtD,MAAM,aAAa,GAAG,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC;QACtE,OAAO,UAAU,GAAG,aAAa,CAAC;IACpC,CAAC;IAEO,mBAAmB;QACzB,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC5C,CAAC;IAGO,uBAAuB;QAC7B,MAAM,SAAS,GAAG,IAAI,CAAC,oBAAoB,CAAC;QAC5C,MAAM,gBAAgB,GAAG,SAAS,CAAC,SAAS,CAAC;QAE7C,oCAAoC;QACpC,IAAI,gBAAgB,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;YAC1C,MAAM,UAAU,GAAG,SAAS,CAAC,aAAa,CAAC,UAAU,CAAmB,CAAC;YAEzE,IAAI,UAAU,IAAI,SAAS,EAAE,CAAC;gBAC5B,IAAI,CAAC,aAAa,GAAG,gBAAgB,CAAC;gBACtC,OAAO;YACT,CAAC;YAED,MAAM,kBAAkB,GAAG,UAAU,CAAC,SAAS,CAAC;YAChD,MAAM,gBAAgB,GAAG,UAAU,CAAC,YAAY,CAAC;YACjD,MAAM,gBAAgB,GAAG,kBAAkB,GAAG,gBAAgB,CAAC;YAE/D,uDAAuD;YACvD,MAAM,aAAa,GAAG,gBAAgB,GAAG,SAAS,CAAC,YAAY,CAAC;YAEhE,8GAA8G;YAC9G,IAAI,aAAa,GAAG,gBAAgB,EAAE,CAAC;gBACrC,6DAA6D;gBAC7D,SAAS,CAAC,SAAS,GAAG,gBAAgB,GAAG,SAAS,CAAC,YAAY,CAAC;YAClE,CAAC;YAED,0EAA0E;YAC1E,IAAI,CAAC,sBAAsB,EAAE,CAAC;QAChC,CAAC;QAED,kCAAkC;QAClC,IAAI,CAAC,aAAa,GAAG,gBAAgB,CAAC;IACxC,CAAC;IAGO,sBAAsB;QAC5B,MAAM,SAAS,GAAG,IAAI,CAAC,oBAAoB,CAAC;QAE5C,MAAM,UAAU,GAAG,SAAS,CAAC,aAAa,CAAC,UAAU,CAAmB,CAAC;QACzE,IAAI,UAAU,IAAI,SAAS;YAAE,OAAO,CAAC,iCAAiC;QAEtE,MAAM,cAAc,GAAG,SAAS,CAAC,SAAS,GAAG,SAAS,CAAC,YAAY,CAAC;QACpE,MAAM,kBAAkB,GAAG,UAAU,CAAC,SAAS,CAAC;QAEhD,uEAAuE;QACvE,IAAI,kBAAkB,GAAG,cAAc,GAAG,IAAI,CAAC,sBAAsB,EAAE,CAAC;YACtE,MAAM,SAAS,GAA2B;gBACxC,UAAU,EAAE,IAAI,CAAC,UAAU,CAAC,KAAK;aAClC,CAAC;YACF,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACrC,CAAC;IACH,CAAC;IAED,UAAU;QACR,IAAI,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,CAAC;QAC/C,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC;QACtB,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,QAAQ,EAAE,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC;QACvE,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,EAAE,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC;IAC1F,CAAC;IAED,MAAM;;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAC/B,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,EACtC,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE;YAEpC,qEACE,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,GAAG,EAAE,EAC7B,OAAO,EAAE,CAAC,IAAI,CAAC,KAAK,EACpB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,GAAG,MAAA,IAAI,CAAC,KAAK,mCAAI,EAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,EACxD,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,UAAU,EAAE,IAAI,CAAC,gBAAgB,EAAE;gBAEnC,4DAAK,KAAK,EAAC,iBAAiB;oBAC1B,8DACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,GAAG,EAAE,EACjC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,UAAU,mBACD,SAAS,mBACR,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,2BACf,IAAI,CAAC,aAAa,KAAK,SAAS,CAAC,CAAC,CAAC,UAAU,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC,SAAS,EACpG,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,YAAY,EAAC,KAAK,EAClB,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,OAAO,EAAE,GAAG,EAAE;4BACZ,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC;4BAC/C,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;wBACtB,CAAC,EACD,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,EAC/B,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EACjC,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,EACrC,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE,qBAClB,IAAI,CAAC,OAAO,EAC7B,SAAS,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,GACrC;oBACF,2DACE,KAAK,EAAE,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAChE,IAAI,EAAC,SAAS,EACd,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,oBAAoB,GAAG,EAAE,EACzC,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,uBAAuB,EAAE;wBAE7C,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,CAAC,CAC3C,UACE,EAAE,EAAE,UAAU,KAAK,EAAE,EACrB,IAAI,EAAC,QAAQ,mBACE,IAAI,CAAC,aAAa,IAAI,KAAK,EAC1C,KAAK,EAAE,IAAI,CAAC,aAAa,IAAI,KAAK,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EACpD,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,EAAE,KAAK,CAAC,IAEtC,IAAI,CAAC,gBAAgB,IAAI,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,KAAK,CACvF,CACN,CAAC;wBACD,IAAI,CAAC,gBAAgB,IAAI,SAAS,IAAI,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,WAAW,CAAC,MAAM;4BACpF,4DAAK,KAAK,EAAC,SAAS,GACd;wBAEP,IAAI,CAAC,gBAAgB,IAAI,SAAS,IAAI,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,WAAW,CAAC,MAAM,IAAI,IAAI,CAAC,mBAAmB;4BAChH,4DAAK,KAAK,EAAE,EAAC,MAAM,EAAE,GAAG,IAAI,CAAC,sBAAsB,EAAE,IAAI,EAAC,GACpD,CAEL;oBACL,4DACE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,mBAAmB,EAAE,EACzC,KAAK,EAAC,cAAc,EACpB,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,gBAAgB;wBACxB,6DAAM,CAAC,EAAC,uDAAuD,GAAE,CAC7D,CACF,CACO,CACV,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF;AAvQS;IADP,QAAQ,CAAC,GAAG,CAAC;+DAGb;AA0HO;IADP,QAAQ,CAAC,GAAG,CAAC;8DAiCb;AAGO;IADP,QAAQ,EAAE;6DAiBV","sourcesContent":["import { Component, Prop, State, Event, Element, h, Host, EventEmitter, Method, AttachInternals, Listen } from '@stencil/core';\nimport { DnnAutocompleteSuggestion, NeedMoreItemsEventArgs } from './types';\nimport { Debounce } from '../../utilities/debounce';\n\n@Component({\n tag: 'dnn-autocomplete',\n styleUrl: 'dnn-autocomplete.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class DnnAutocomplete {\n\n /** The label for this autocomplete. /\n @Prop() label: string;\n\n /* The name for this autocomplete when used in forms. /\n @Prop() name: string;\n\n /* Defines the help label displayed under the field. /\n @Prop() helpText: string;\n\n /* Defines the value for this autocomplete /\n @Prop({mutable: true, reflect: true}) value: string;\n\n /* Defines whether the field requires having a value. /\n @Prop() required: boolean;\n\n /* Defines whether the field is disabled. /\n @Prop() disabled: boolean;\n\n /* Sets the list of suggestions. /\n @Prop() suggestions: DnnAutocompleteSuggestion[] = [];\n\n /* Callback to render suggestions, if not provided, only the label will be rendered. /\n @Prop() renderSuggestion: (suggestion: DnnAutocompleteSuggestion) => HTMLElement;\n\n /* The total amount of suggestions for the given search query.\n * This can be used to show virtual scroll and pagination progressive feeding.\n * The needMoreItems event should be used to request more items.\n /\n @Prop() totalSuggestions: number;\n\n /* How many suggestions to preload in pixels of their height.\n * This is used to calculate the virtual scroll height and request\n * more items before they get into view.\n /\n @Prop() preloadThresholdPixels: number = 1000;\n\n @Element() element: HTMLDnnAutocompleteElement;\n\n /* Fires when the value has changed and the user exits the input. /\n @Event() valueChange: EventEmitter<number \| string \| string[]>;\n\n /* Fires when the using is inputing data (on keystrokes). /\n @Event() valueInput: EventEmitter<number \| string \| string[]>;\n\n /* Fires when the component needs to display more items in the suggestions. /\n @Event() needMoreItems: EventEmitter<NeedMoreItemsEventArgs>;\n\n /* Fires when the search query has changed.\n * This is almost like valueInput, but it is debounced\n * and can be used to trigger a search query without overloading\n * API endpoints while typing.\n /\n @Event() searchQueryChanged: EventEmitter<string>;\n \n /* Fires when an item is selected. /\n @Event() itemSelected: EventEmitter<string>;\n\n /* Reports the input validity details. See https://developer.mozilla.org/en-US/docs/Web/API/ValidityState /\n @Method()\n async checkValidity(): Promise<ValidityState> {\n var validity = this.inputField.checkValidity();\n if (!validity) {\n this.fieldset.setValidity(false, this.inputField.validationMessage);\n }\n this.fieldset.setValidity(true, \"\");\n return this.inputField.validity;\n }\n \n /* Can be used to set a custom validity message. /\n @Method()\n async setCustomValidity(message: string): Promise<void> {\n if (message == undefined \|\| message == \"\") {\n this.inputField.setCustomValidity(\"\");\n this.valid = true;\n this.fieldset.setValidity(true);\n return;\n }\n\n this.inputField.setCustomValidity(message);\n this.valid = false;\n this.fieldset.setValidity(false, message);\n }\n\n @State() focused = false;\n @State() valid = true;\n @State() customValidityMessage: string;\n @State() selectedIndex: number;\n @State() positionInitialized = false;\n @State() lastScrollTop = 0;\n @State() displayValue: string = \"\";\n \n /* attacth the internals for form validation /\n @AttachInternals() internals: ElementInternals;\n \n /* Listener for mouse down event /\n @Listen(\"click\", { target: \"document\", capture: false })\n handleClick(e: MouseEvent) {\n const path = e.composedPath();\n if (!path.includes(this.element))\n {\n this.focused = false;\n }\n }\n \n componentDidRender(){\n if (this.focused && this.suggestions.length > 0 && !this.positionInitialized){\n this.adjustDropdownPosition();\n }\n }\n\n private inputField!: HTMLInputElement;\n private suggestionsContainer: HTMLUListElement;\n private labelId: string;\n private fieldset: HTMLDnnFieldsetElement;\n \n // eslint-disable-next-line @stencil-community/own-methods-must-be-private\n formResetCallback() {\n this.inputField.setCustomValidity(\"\");\n this.valid = true;\n this.value = \"\";\n this.internals.setValidity({});\n this.internals.setFormValue(\"\");\n }\n \n private handleInput(e: Event) {\n const inputValue = (e.target as HTMLInputElement).value;\n this.displayValue = inputValue;\n this.value = inputValue;\n var valid = this.inputField.checkValidity();\n this.valid = valid;\n this.valueInput.emit(inputValue);\n this.handleSearchQueryChanged(inputValue);\n }\n\n @Debounce(300)\n private handleSearchQueryChanged(value: string) {\n this.searchQueryChanged.emit(value);\n }\n\n private handleInvalid(): void {\n this.valid = false;\n if (this.customValidityMessage == undefined) {\n this.customValidityMessage = this.inputField.validationMessage;\n }\n }\n\n private handleChange() {\n this.valueChange.emit(this.value);\n if (this.name != undefined) {\n var data = new FormData();\n data.append(this.name, this.value.toString());\n this.internals.setFormValue(data);\n }\n }\n\n /* Check if the label should float /\n private shouldLabelFloat(): boolean {\n if (this.focused) {\n return false;\n }\n\n if (this.value != undefined && this.value != \"\") {\n return false;\n }\n\n return true;\n }\n\n private findAverageSuggestionHeight(): number {\n const suggestionItems = this.suggestionsContainer.querySelectorAll(\"li\");\n var totalHeight = 0;\n for (let i = 0; i < suggestionItems.length; i++) {\n totalHeight += suggestionItems[i].clientHeight;\n }\n return totalHeight / suggestionItems.length;\n }\n\n private readonly adjustDropdownPosition = () => {\n var itemHeight = this.findAverageSuggestionHeight();\n requestAnimationFrame(() => {\n this.positionInitialized = true;\n });\n\n // If we can fit 3 items below the input and there is still 3em left, we show the dropdown under.\n // Otherwise, we show it above.\n var spaceBelow = window.innerHeight - this.inputField.getBoundingClientRect().bottom;\n const rem = parseFloat(getComputedStyle(document.documentElement).fontSize);\n const fitsDown = spaceBelow > 3 itemHeight + 3 * rem;\n if (fitsDown) {\n this.suggestionsContainer.style.top = \"1.2rem\";\n }\n else {\n this.suggestionsContainer.style.bottom = \"1.2rem\";\n }\n\n // Set the max height to not overflow the screen.\n if (fitsDown){\n this.suggestionsContainer.style.maxHeight = `${spaceBelow - 3 * rem}px`;\n }\n else {\n this.suggestionsContainer.style.maxHeight = `${this.inputField.getBoundingClientRect().top - 3 * rem}px`;\n }\n\n this.checkIfMoreItemsNeeded();\n }\n\n private handleKeyDown(e: KeyboardEvent): void {\n if (e.key === \"ArrowDown\") {\n e.preventDefault();\n if (this.selectedIndex == undefined) {\n this.selectedIndex = 0;\n } else {\n this.selectedIndex = Math.min(this.selectedIndex + 1, this.suggestions.length - 1);\n }\n }\n if (e.key === \"ArrowUp\") {\n e.preventDefault();\n if (this.selectedIndex == undefined) {\n this.selectedIndex = this.suggestions.length - 1;\n } else {\n this.selectedIndex = Math.max(this.selectedIndex - 1, 0);\n }\n }\n this.value = this.suggestions[this.selectedIndex]?.value \|\| this.value;\n if (e.key === \"Enter\") {\n var selectedItem = this.suggestions[this.selectedIndex];\n this.value = selectedItem.value;\n this.inputField.value = selectedItem.label;\n this.itemSelected.emit(selectedItem.value);\n this.focused = false;\n }\n if (e.key === \"Tab\"){\n this.focused = false;\n }\n }\n\n private selectItem(e: Event, index: number): void {\n e.preventDefault();\n e.stopPropagation();\n this.selectedIndex = index;\n this.value = this.suggestions[this.selectedIndex].value;\n this.displayValue = this.suggestions[this.selectedIndex].label;\n this.inputField.value = this.displayValue;\n this.checkValidity();\n this.focused = false;\n this.itemSelected.emit(this.suggestions[this.selectedIndex].value)\n }\n\n private getVirtualScrollHeight(): number {\n const itemHeight = this.findAverageSuggestionHeight();\n const upcomingItems = this.totalSuggestions - this.suggestions.length;\n return itemHeight * upcomingItems;\n }\n\n private handleDropdownClick(): void {\n this.handleSearchQueryChanged(this.value);\n }\n\n @Debounce(100)\n private handleSuggestionsScroll(): void {\n const container = this.suggestionsContainer;\n const currentScrollTop = container.scrollTop;\n\n // Only act if we are scrolling down\n if (currentScrollTop > this.lastScrollTop) {\n const loadingDiv = container.querySelector('.loading') as HTMLDivElement;\n\n if (loadingDiv == undefined) {\n this.lastScrollTop = currentScrollTop;\n return;\n }\n\n const loadingDivPosition = loadingDiv.offsetTop;\n const loadingDivHeight = loadingDiv.offsetHeight;\n const loadingDivBottom = loadingDivPosition + loadingDivHeight;\n\n // Calculate the visible bottom of the scroll container\n const visibleBottom = currentScrollTop + container.clientHeight;\n\n // Prevent scrolling past the loading div by checking if the visible bottom surpasses the loading div's bottom\n if (visibleBottom > loadingDivBottom) {\n // Adjust scrollTop so it doesn't scroll past the loading div\n container.scrollTop = loadingDivBottom - container.clientHeight;\n }\n\n // Check if more items are needed based on the position of the loading div\n this.checkIfMoreItemsNeeded();\n }\n\n // Update the last scroll position\n this.lastScrollTop = currentScrollTop;\n }\n\n @Debounce()\n private checkIfMoreItemsNeeded() {\n const container = this.suggestionsContainer;\n \n const loadingDiv = container.querySelector('.loading') as HTMLDivElement;\n if (loadingDiv == undefined) return; // Exit if there's no loading div\n \n const scrollPosition = container.scrollTop + container.clientHeight;\n const loadingDivPosition = loadingDiv.offsetTop;\n \n // Check if the loading div is within the threshold of becoming visible\n if (loadingDivPosition - scrollPosition < this.preloadThresholdPixels) {\n const eventArgs: NeedMoreItemsEventArgs = {\n searchTerm: this.inputField.value,\n };\n this.needMoreItems.emit(eventArgs);\n }\n }\n\n handleBlur(): void {\n var validity = this.inputField.checkValidity();\n this.valid = validity;\n this.fieldset.setValidity(validity, this.inputField.validationMessage);\n this.internals.setValidity(this.inputField.validity, this.inputField.validationMessage);\n }\n\n render() {\n return (\n <Host\n tabIndex={this.focused ? -1 : 0}\n onFocus={() => this.inputField.focus()}\n onBlur={() => this.inputField.blur()}\n >\n <dnn-fieldset\n ref={el => this.fieldset = el}\n invalid={!this.valid}\n focused={this.focused}\n label={`${this.label ?? \"\"}${this.required ? \" *\" : \"\"}`}\n helpText={this.helpText}\n id={this.labelId}\n disabled={this.disabled}\n floatLabel={this.shouldLabelFloat()}\n >\n <div class=\"inner-container\">\n <input\n ref={(el) => this.inputField = el}\n name={this.name}\n type=\"search\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n aria-expanded={this.focused.toString()}\n aria-activedescendant={this.selectedIndex !== undefined ? `option-${this.selectedIndex}` : undefined}\n disabled={this.disabled}\n required={this.required}\n autoComplete=\"off\"\n value={this.displayValue}\n onFocus={() => {\n this.searchQueryChanged.emit(this.value \|\| \"\");\n this.focused = true;\n }}\n onBlur={() => this.handleBlur()}\n onInput={e => this.handleInput(e)}\n onInvalid={() => this.handleInvalid()}\n onChange={() => this.handleChange()}\n aria-labelledby={this.labelId}\n onKeyDown={e => this.handleKeyDown(e)}\n />\n <ul\n class={this.focused && this.suggestions.length > 0 ? \"show\" : \"\"}\n role=\"listbox\"\n ref={el => this.suggestionsContainer = el}\n onScroll={() => this.handleSuggestionsScroll()}\n >\n {this.suggestions.map((suggestion, index) => (\n <li\n id={`option-${index}`}\n role=\"option\"\n aria-selected={this.selectedIndex == index}\n class={this.selectedIndex == index ? \"selected\" : \"\"}\n onClick={e => this.selectItem(e, index)}\n >\n {this.renderSuggestion != undefined ? this.renderSuggestion(suggestion) : suggestion.label}\n </li>\n ))}\n {this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length &&\n <div class=\"loading\">\n </div>\n }\n {this.totalSuggestions != undefined && this.totalSuggestions > this.suggestions.length && this.positionInitialized &&\n <div style={{height: `${this.getVirtualScrollHeight()}px`}}>\n </div>\n }\n </ul>\n <svg\n onClick={() => this.handleDropdownClick()}\n class=\"chevron-down\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 -960 960 960\">\n <path d=\"M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z\"/>\n </svg>\n </div>\n </dnn-fieldset>\n </Host>\n );\n }\n}"]}

package/dist/collection/components/dnn-checkbox/dnn-checkbox.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { Host, h } from "@stencil/core";
 /**
- * @slot - The label for the checkbox.
+ * @slot @deprecated - The label for the checkbox - Obsolete, implement your own label.
  * @slot checkedicon - Allows overriding the default checked icon.
  * @slot uncheckedicon - Allows overriding the unchecked icon.
  * @slot intermediateicon - If intermadiate state is used, allows overriding its icon.
@@ -13,6 +13,9 @@ export class DnnCheckbox {
         this.name = undefined;
         this.focused = false;
     }
+    handleClick() {
+        this.changeState();
+    }
     componentWillLoad() {
         this.originalChecked = this.checked;
         this.internals.setFormValue(this.checked);
@@ -61,7 +64,7 @@ export class DnnCheckbox {
         this.checkedchange.emit(this.checked);
     }
     render() {
-        return (h(Host, { key: 'ac034f8c5cd0fe52bc1a87944e3275ad27284c25', tabIndex: this.focused ? -1 : 0, onFocus: () => this.button.focus(), onBlur: () => this.button.blur() }, h("button", { key: 'f4d54a33cee25750fc71a235e069ceddaab847d8', ref: el => this.button = el, onFocus: () => this.focused = true, onBlur: () => this.focused = false, class: `icon ${this.checked}`, onClick: () => this.changeState() }, h("div", { key: '351f38bc6b3b3ad4d0bd3eb256311e09e98eed20', class: "unchecked" }, h("slot", { key: 'a9be931a7a1aaf92fd9abea8ee07d52ec5f1d508', name: "uncheckedicon" }, h("svg", { key: 'b9dec5662853d56ce6e93945658f7efdbe1d26bb', xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, h("path", { key: 'fe214887a46555c54ea4fb11fb5ebddf1284ba13', d: "M0 0h24v24H0z", fill: "none" }), h("path", { key: '3326012fb363c5a4f5b6087121d644abc0ff949a', 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", { key: '4f934cc069ee45dc415cde5466d76e19576adc72', class: "checked" }, h("slot", { key: 'dbc74d8f135314b1fd290e1475f6f904a94939ef', name: "checkedicon" }, h("svg", { key: '4f1afd43e19a8a41f4911e0857b2ba63a5eceb06', xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, h("path", { key: '140bd5ed5acb3ea90ea5de75c715d309cf630d86', d: "M0 0h24v24H0z", fill: "none" }), h("path", { key: 'd10bb8adfc9de857b491a7695fb94ec1ec3dfb05', 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" })))), h("div", { key: 'f74af476960988befb6340ddae07f817154871aa', class: "intermediate" }, h("slot", { key: '2e0424ce5be3a2feaa9c776c15ec0e7124c6a010', name: "intermediateicon" }, h("svg", { key: '853adcd4c81a47ae3b72e501728513701c702e49', 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" }, h("g", { key: '81cf795ceea945b248edf1a8dc873a7ee14edf28' }, h("rect", { key: '1d5d922cee5a44d69a42de6b191f393d679f8cd1', fill: "none", height: "24", width: "24" })), h("g", { key: 'fc1800944bf3456bbe284a833caec298c883db12' }, h("g", { key: '8d5254588237a41d38dfd0ac7765908d263fdadb' }, h("g", { key: '9cd077df9025fb9af99e35fdf8bb570d060a0b69' }, h("path", { key: '0e7d61eb4bd08739aef220ffcf9e67d7b876e5fc', 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" })))))))), h("label", { key: '250900afeadd74a93e0f71ba043e78149af9c1b8', htmlFor: this.el.id, onClick: () => this.changeState() }, h("slot", { key: '3358f6ecb4e50480bec6098d8edeed3a8a7c10bd' }))));
+        return (h(Host, { key: '33f0a20c02ea3d1be40803102dca7298fc9f0a8d', tabIndex: this.focused ? -1 : 0, onFocus: () => this.button.focus(), onBlur: () => this.button.blur() }, h("button", { key: '7249f860fea2548cd7469daf88594ceaa36ad69c', ref: el => this.button = el, onFocus: () => this.focused = true, onBlur: () => this.focused = false, class: `icon ${this.checked}` }, h("div", { key: '8033ce35b1ad4733c5bc3151e183bcef5ad3608c', class: "unchecked" }, h("slot", { key: 'bd22365edda141a1d99f12197579ef08f145e298', name: "uncheckedicon" }, h("svg", { key: 'b8fdd87c069040ec31552c9c97fe9a73d6b1566b', xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, h("path", { key: '786778ac6170c2efe8e60399ce377cb3f4b81496', d: "M0 0h24v24H0z", fill: "none" }), h("path", { key: '2875985769c607626e17552bc86ee7eef8f1bd2b', 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", { key: '3b1022f97690827381751638a2326806f6bbc914', class: "checked" }, h("slot", { key: 'd47bf5c9b8227f72f5af9d8a9497ef90fe9ed54a', name: "checkedicon" }, h("svg", { key: '579f8cedf788976a23929f230afe489be49056a3', xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, h("path", { key: 'a22e16649d8fcbae5f382f585ec44d877592d072', d: "M0 0h24v24H0z", fill: "none" }), h("path", { key: 'f851cbcf9ff4ea371c3abeb9fdfbd73199d95633', 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" })))), h("div", { key: 'dac2ba83db7a5f2a791db48ef4366c846ece0ac1', class: "intermediate" }, h("slot", { key: '99794fb6b191a7c61efcf77683125d5e38075347', name: "intermediateicon" }, h("svg", { key: 'b3c5fa7961169fd5ea9437346cd5246a3c3f2dc3', 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" }, h("g", { key: '53bfc9815a54ee36bd9cde2b35ca35bdb052a559' }, h("rect", { key: '6938a2a44ea6a23b3896ea7186d1109d2e06b4f8', fill: "none", height: "24", width: "24" })), h("g", { key: 'beea185432ee31b13f4368cd288195fda4798569' }, h("g", { key: '8c9b0636ce4685fd714ae76d2cd8e63ffdc0e590' }, h("g", { key: 'b6a8198cb9067af8bd439948e2a23e58b6ff29dc' }, h("path", { key: '5e0f01cc5c7033845f7f41f3721e903cc8436f91', 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" }))))))))));
     }
     static get is() { return "dnn-checkbox"; }
     static get encapsulation() { return "shadow"; }
@@ -187,6 +190,15 @@ export class DnnCheckbox {
                 "methodName": "handleCheckedChange"
             }];
     }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleClick",
+                "target": undefined,
+                "capture": true,
+                "passive": false
+            }];
+    }
     static get attachInternalsMemberName() { return "internals"; }
 }
 //# sourceMappingURL=dnn-checkbox.js.map

package/dist/collection/components/dnn-checkbox/dnn-checkbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dnn-checkbox.js","sourceRoot":"","sources":["../../../src/components/dnn-checkbox/dnn-checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,eAAe,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;~~AAGtH~~;;;;;GAKG;AAOH,MAAM,OAAO,WAAW;;uBAIyB,WAAW;+BAGvB,KAAK;qBAGhB,IAAI;;~~uBAQT~~,KAAK;;~~IAOxB~~,iBAAiB;QACf,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC;QACpC,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAC5C,CAAC;IAGD,mBAAmB,CAAC,QAAsB,EAAE,QAAsB;QAChE,IAAI,QAAQ,KAAK,QAAQ,IAAI,IAAI,CAAC,OAAO,IAAI,SAAS,EAAE,CAAC;YACvD,IAAI,IAAI,GAAG,IAAI,QAAQ,EAAE,CAAC;YAC1B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;YACnC,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;QACpC,CAAC;IACH,CAAC;IAED,0EAA0E;IAC1E,iBAAiB;QACf,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;QAC/B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,eAAe,CAAC;IACtC,CAAC;IAEO,WAAW;QACjB,IAAI,CAAC,IAAI,CAAC,eAAe,EAAC,CAAC;YACzB,QAAQ,IAAI,CAAC,OAAO,EAAE,CAAC;gBACrB,KAAK,SAAS;oBACZ,IAAI,CAAC,OAAO,GAAG,WAAW,CAAC;oBAC3B,MAAM;gBACR,KAAK,WAAW,CAAC;gBACjB,KAAK,cAAc;oBACjB,IAAI,CAAC,OAAO,GAAG,SAAS,CAAC;oBACzB,MAAM;gBACR;oBACE,MAAM;YACV,CAAC;YACD,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YACtC,OAAO;QACT,CAAC;QACD,QAAQ,IAAI,CAAC,OAAO,EAAE,CAAC;YACrB,KAAK,SAAS;gBACZ,IAAI,CAAC,OAAO,GAAG,cAAc,CAAC;gBAC9B,MAAM;YACR,KAAK,cAAc;gBACjB,IAAI,CAAC,OAAO,GAAG,WAAW,CAAC;gBAC3B,MAAM;YACR,KAAK,WAAW;gBACd,IAAI,CAAC,OAAO,GAAG,SAAS,CAAC;gBACzB,MAAM;YACR;gBACE,MAAM;QACV,CAAC;QACD,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACxC,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAC/B,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,EAClC,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;YAEhC,+DACE,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,GAAG,EAAE,EAC3B,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,GAAG,IAAI,EAClC,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,GAAG,KAAK,EAClC,KAAK,EAAE,QAAQ,IAAI,CAAC,OAAO,EAAE~~,EAC7B,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE~~;~~gBAEjC~~,4DAAK,KAAK,EAAC,WAAW;oBACpB,6DAAM,IAAI,EAAC,eAAe;wBACxB,4DAAK,KAAK,EAAC,4BAA4B,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS;4BAAC,6DAAM,CAAC,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM,GAAE;4BAAA,6DAAM,CAAC,EAAC,4FAA4F,GAAE,CAAM,CAClP,CACH;gBACN,4DAAK,KAAK,EAAC,SAAS;oBAClB,6DAAM,IAAI,EAAC,aAAa;wBACtB,4DAAK,KAAK,EAAC,4BAA4B,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS;4BAAC,6DAAM,CAAC,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM,GAAE;4BAAA,6DAAM,CAAC,EAAC,qIAAqI,GAAE,CAAM,CAC3R,CACH;gBACN,4DAAK,KAAK,EAAC,cAAc;oBACvB,6DAAM,IAAI,EAAC,kBAAkB;wBAC3B,4DAAK,KAAK,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,uBAAmB,eAAe,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS;4BAAC;gCAAG,6DAAM,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,IAAI,EAAC,KAAK,EAAC,IAAI,GAAE,CAAI;4BAAA;gCAAG;oCAAG;wCAAG,6DAAM,CAAC,EAAC,wGAAwG,GAAE,CAAI,CAAI,CAAI,CAAM,CACnV,CACH,CACC~~;YACT~~,~~8DAAO~~,~~OAAO,EAAE,IAAI,CAAC,EAAE,CAAC,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE;gBAAE,8DAAa,CAAQ,CAC/E,~~CACR,CAAC;IACJ,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","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"]}

package/dist/collection/components/dnn-chevron/dnn-chevron.js CHANGED Viewed

@@ -10,7 +10,7 @@ export class DnnChevron {
         this.changed.emit(newValue);
     }
     render() {
-        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" })))));
+        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" })))));
     }
     static get is() { return "dnn-chevron"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dnn-collapsible/dnn-collapsible.js CHANGED Viewed

@@ -44,7 +44,7 @@ export class DnnCollapsible {
         this.container.style.transition = `max-height ${this.transitionDuration}ms ease-in-out`;
     }
     render() {
-        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' }))));
+        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' }))));
     }
     static get is() { return "dnn-collapsible"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dnn-color-input/dnn-color-input.js CHANGED Viewed

@@ -86,20 +86,20 @@ export class DnnColorInput {
     }
     render() {
         var _a, _b, _c, _d, _e;
-        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 &&
-            h("div", { key: 'e9c59300061a717b0bdf7733a3743a7318076561', style: { backgroundColor: `#${this.lightColor}` } }), h("div", { key: '25a25296ccb39572104f5c57992b9c294fb38695', style: { backgroundColor: `#${this.color}` } }), this.useDarkColor &&
-            h("div", { key: 'c01b5112a56b90f3b0bb224c55101dd9498885e0', style: { backgroundColor: `#${this.darkColor}` } }), this.useContrastColor &&
-            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 &&
-            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 &&
-            h("div", { key: '10e4ec859de7c8491292ca29bfa701645a4a1139', class: "modal-content" }, this.hasMultipleColors() &&
-                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 &&
-                    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 &&
-                    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 &&
-                    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() &&
-                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 &&
-                h("div", { key: 'faa59653d033a099b1d10e713dd44b42174eac48', style: { backgroundColor: `#${this.currentColor.lightColor}` } }), h("div", { key: '3a25fb6d9cef45d2289fa6cab388da47f0db6d19', style: { backgroundColor: `#${this.currentColor.color}` } }), this.useDarkColor &&
-                h("div", { key: 'df5d38aff202713ec2b1bdc1d6691df6eb3af828', style: { backgroundColor: `#${this.currentColor.darkColor}` } }), this.useContrastColor &&
-                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))))));
+        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 &&
+            h("div", { key: '5eb78240709025161e7011e040fddbe0fb8845da', style: { backgroundColor: `#${this.lightColor}` } }), h("div", { key: '18ae5db63545be3b824d445ee3045611de5fac47', style: { backgroundColor: `#${this.color}` } }), this.useDarkColor &&
+            h("div", { key: '88ea0a66d09361aece5753aa2f116c824ce78edb', style: { backgroundColor: `#${this.darkColor}` } }), this.useContrastColor &&
+            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 &&
+            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 &&
+            h("div", { key: '21e84f6b00f197952622c1726813dc3164844b35', class: "modal-content" }, this.hasMultipleColors() &&
+                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 &&
+                    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 &&
+                    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 &&
+                    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() &&
+                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 &&
+                h("div", { key: 'c6b3ad4d35ae6bb9bd2009b322c83c2a9b36e67e', style: { backgroundColor: `#${this.currentColor.lightColor}` } }), h("div", { key: 'ce5a6482f603b72e25505048addae3718da56292', style: { backgroundColor: `#${this.currentColor.color}` } }), this.useDarkColor &&
+                h("div", { key: 'ab08de041e1403eae14aeee40637cacd2b65a236', style: { backgroundColor: `#${this.currentColor.darkColor}` } }), this.useContrastColor &&
+                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))))));
     }
     static get is() { return "dnn-color-input"; }
     static get encapsulation() { return "shadow"; }