@dnncommunity/dnn-elements 0.25.1 → 0.26.0

package/dist/collection/components/dnn-autocomplete/dnn-autocomplete.css

@@ -45,6 +45,7 @@ dnn-fieldset {
   height: 1rem;
   width: auto;
   transform: scale(1.2);
+  fill: var(--foreground-color);
   cursor: pointer;
 }
 .inner-container ul {
@@ -86,4 +87,12 @@ dnn-fieldset {
   width: 75%;
   margin: 0 auto;
   opacity: 0.5;
+}
+
+dnn-fieldset {
+  --fieldset-foreground-color: var(--foreground-color);
+  --fieldset-background-color: var(--background-color);
+  --fieldset-focus-color: var(--focus-color);
+  --fieldset-danger-color: var(--danger-color);
+  --fieldset-control-radius: var(--control-radius);
 }

package/dist/collection/components/dnn-color-input/dnn-color-input.css

@@ -1,9 +1,9 @@
 :host {
   display: inline-block;
-  /** @prop --foreground: Defines the foreground color. */
-  --foreground: var(--dnn-color-foreground, #000);
-  /** @prop --background: Defines the background color. */
-  --background: var(--dnn-color-background, #fff);
+  /** @prop --foreground-color: Defines the foreground color. */
+  --foreground-color: var(--dnn-color-foreground, #000);
+  /** @prop --background-color: Defines the background color. */
+  --background-color: var(--dnn-color-background, #fff);
   /** @prop --focus-color: Defines the color when the component is focused. */
   --focus-color: var(--dnn-color-primary, #3792ED);
   /** @prop --control-radius: Defines the radius for the control corners. */
@@ -21,7 +21,7 @@ dnn-fieldset {
   justify-content: space-between;
   position: relative;
   width: 100%;
-  background-color: var(--background);
+  background-color: var(--background-color);
 }
 
 button {
@@ -75,4 +75,12 @@ h3 {
   display: flex;
   justify-content: space-between;
   margin-top: 1em;
+}
+
+dnn-fieldset {
+  --fieldset-foreground-color: var(--foreground-color);
+  --fieldset-background-color: var(--background-color);
+  --fieldset-focus-color: var(--focus-color);
+  --fieldset-danger-color: var(--danger-color);
+  --fieldset-control-radius: var(--control-radius);
 }

package/dist/collection/components/dnn-fieldset/dnn-fieldset.css

@@ -1,9 +1,9 @@
 :host {
   display: inline-block;
-  /** @prop --foreground: Defines the foreground color. */
-  --fieldset-foreground: var(--dnn-color-foreground, #000);
-  /** @prop --background: Defines the background color. */
-  --fieldset-background: var(--dnn-color-background, #fff);
+  /** @prop --fieldset-foreground-color: Defines the foreground color. */
+  --fieldset-foreground-color: var(--dnn-color-foreground, #000);
+  /** @prop --fieldset-background-color: Defines the background color. */
+  --fieldset-background-color: var(--dnn-color-background, #fff);
   /** @prop --focus-color: Defines the color when the component is focused. */
   --fieldset-focus-color: var(--dnn-color-primary, #3792ED);
   /** @prop --danger-color: Defines the danger color used for invalid data. */
@@ -13,14 +13,14 @@
 }
 
 .container {
-  border: 1px solid var(--fieldset-foreground, #000);
+  border: 1px solid var(--fieldset-foreground-color, #000);
   border-radius: var(--fieldset-control-radius, 3px);
   padding: 0.75em;
   display: flex;
   justify-content: space-between;
   gap: 0.1em;
   position: relative;
-  background-color: var(--fieldset-background);
+  background-color: var(--fieldset-background-color);
   margin-top: 1em;
   line-height: 1em;
 }
@@ -30,7 +30,7 @@
 .container .inner-container {
   position: relative;
   width: 100%;
-  background-color: var(--fieldset-background);
+  background-color: var(--fieldset-background-color);
   height: calc(100% - 1em);
 }
 .container label {
@@ -41,7 +41,7 @@
   left: 0.5em;
   top: -1.5em;
   padding: 0 0.5em;
-  background-color: var(--fieldset-background);
+  background-color: var(--fieldset-background-color);
   white-space: nowrap;
   max-width: 100%;
   border-radius: var(--fieldset-control-radius);
@@ -60,7 +60,7 @@
   box-shadow: 0 0 0 1px var(--fieldset-danger-color);
 }
 .container.focused input {
-  color: var(--fieldset-foreground, #000);
+  color: var(--fieldset-foreground-color, #000);
 }
 .container.float-label label {
   opacity: 0.6;

package/dist/collection/components/dnn-input/dnn-input.css

@@ -1,9 +1,9 @@
 :host {
   display: inline-block;
-  /** @prop --foreground: Defines the foreground color. */
-  --foreground: var(--dnn-color-foreground, #000);
-  /** @prop --background: Defines the background color. */
-  --background: var(--dnn-color-background, #fff);
+  /** @prop --foreground-color: Defines the foreground color. */
+  --foreground-color: var(--dnn-color-foreground, #000);
+  /** @prop --background-color: Defines the background color. */
+  --background-color: var(--dnn-color-background, #fff);
   /** @prop --focus-color: Defines the color when the component is focused. */
   --focus-color: var(--dnn-color-primary, #3792ED);
   /** @prop --danger-color: Defines the danger color used for invalid data. */
@@ -57,4 +57,12 @@ button.show-password svg {
   width: auto;
   fill: var(--foreground);
   transform: scale(1.5);
+}
+
+dnn-fieldset {
+  --fieldset-foreground-color: var(--foreground-color);
+  --fieldset-background-color: var(--background-color);
+  --fieldset-focus-color: var(--focus-color);
+  --fieldset-danger-color: var(--danger-color);
+  --fieldset-control-radius: var(--control-radius);
 }

package/dist/collection/components/dnn-select/dnn-select.css

@@ -1,9 +1,9 @@
 :host {
   display: inline-block;
-  /** @prop --foreground: Defines the foreground color. */
-  --foreground: var(--dnn-color-foreground, #000);
-  /** @prop --background: Defines the background color. */
-  --background: var(--dnn-color-background, #fff);
+  /** @prop --foreground-color: Defines the foreground color. */
+  --foreground-color: var(--dnn-color-foreground, #000);
+  /** @prop --background-color: Defines the background color. */
+  --background-color: var(--dnn-color-background, #fff);
   /** @prop --focus-color: Defines the color when the component is focused. */
   --focus-color: var(--dnn-color-primary, #3792ED);
   /** @prop --danger-color: Defines the danger color used for invalid data. */
@@ -23,13 +23,14 @@ dnn-fieldset {
   justify-content: space-between;
   position: relative;
   width: 100%;
-  background-color: var(--background);
+  background-color: var(--background-color);
 }
 
 select {
   border: none;
   outline: none;
-  background-color: var(--background);
+  background-color: var(--background-color);
+  color: var(--foreground-color);
   text-align: var(--input-text-align);
   width: 100%;
   cursor: pointer;
@@ -44,4 +45,12 @@ svg.error {
   width: 1em;
   height: 1em;
   transform: scale(1.5);
+}
+
+dnn-fieldset {
+  --fieldset-foreground-color: var(--foreground-color);
+  --fieldset-background-color: var(--background-color);
+  --fieldset-focus-color: var(--focus-color);
+  --fieldset-danger-color: var(--danger-color);
+  --fieldset-control-radius: var(--control-radius);
 }

package/dist/collection/components/dnn-textarea/dnn-textarea.css

@@ -1,9 +1,9 @@
 :host {
   display: inline-block;
-  /** @prop --foreground: Defines the foreground color. */
-  --foreground: var(--dnn-color-foreground, #000);
-  /** @prop --background: Defines the background color. */
-  --background: var(--dnn-color-background, #fff);
+  /** @prop --foreground-color: Defines the foreground color. */
+  --foreground-color: var(--dnn-color-foreground, #000);
+  /** @prop --background-color: Defines the background color. */
+  --background-color: var(--dnn-color-background, #fff);
   /** @prop --focus-color: Defines the color when the component is focused. */
   --focus-color: var(--dnn-color-primary, #3792ED);
   /** @prop --danger-color: Defines the danger color used for invalid data. */
@@ -20,9 +20,17 @@ textarea {
   border: none;
   outline: none;
   background-color: transparent;
-  color: var(--foreground);
+  color: var(--foreground-color);
   width: calc(100% - 1em);
   height: calc(100% - 1em);
   line-height: 1.5em;
   resize: none;
+}
+
+dnn-fieldset {
+  --fieldset-foreground-color: var(--foreground-color);
+  --fieldset-background-color: var(--background-color);
+  --fieldset-focus-color: var(--focus-color);
+  --fieldset-danger-color: var(--danger-color);
+  --fieldset-control-radius: var(--control-radius);
 }

package/dist/dnn/dnn.esm.js

@@ -1,2 +1,2 @@
-import{p as e,b as a}from"./p-91d08ab2.js";export{s as setNonce}from"./p-91d08ab2.js";import{g as l}from"./p-e1255160.js";var t=()=>{const a=import.meta.url;const l={};if(a!==""){l.resourcesUrl=new URL(".",a).href}return e(l)};t().then((async e=>{await l();return a([["p-107bd5a8",[[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"]}]]],["p-ef6a902d",[[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"]}]]],["p-a9d8a942",[[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"],autocomplete:[1],focused:[32],valid:[32],customValidityMessage:[32],selectedIndex:[32],positionInitialized:[32],lastScrollTop:[32],displayValue:[32],checkValidity:[64],setCustomValidity:[64]},[[4,"click","handleClick"]],{value:["handleValueChange"]}]]],["p-e6bd0f5b",[[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"],inputmode:[1],focused:[32],valid:[32],checkValidity:[64],setCustomValidity:[64]}]]],["p-d55632fe",[[65,"dnn-select",{label:[1],name:[1],required:[4],helpText:[1,"help-text"],disabled:[4],disableValidityReporting:[4,"disable-validity-reporting"],autocomplete:[1],value:[1537],focused:[32],valid:[32],customValidityMessage:[32],checkValidity:[64]}]]],["p-88a928f2",[[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]}]]],["p-c12c6683",[[1,"dnn-treeview-item",{expanded:[1540],hasChildren:[32],focused:[32]},null,{expanded:["watchExpanded"]}]]],["p-2b3d9bc1",[[1,"dnn-chevron",{expandText:[1,"expand-text"],collapseText:[1,"collapse-text"],expanded:[1540],focused:[32]},null,{expanded:["handleExpandedChanged"]}]]],["p-c15dfb8b",[[66,"dnn-monaco-editor",{language:[1],value:[1025],name:[1],focused:[32]},null,{language:["languageChanged"],value:["valueChanged"]}]]],["p-b0239140",[[1,"dnn-progress-bar",{value:[2],max:[2],useGradient:[4,"use-gradient"]}]]],["p-9b318120",[[65,"dnn-richtext",{options:[16],value:[1],name:[1],plugins:[16],customizeOptions:[16],focused:[32]},null,{value:["watchValueChanged"]}]]],["p-a645d829",[[1,"dnn-sort-icon",{sortDirection:[1025,"sort-direction"],focused:[32]}]]],["p-8056c270",[[65,"dnn-toggle",{checked:[1028],disabled:[4],name:[1],value:[1],focused:[32]},[[2,"click","handleClick"]],{checked:["checkedChanged"]}]]],["p-cf2aa06f",[[1,"dnn-vertical-overflow-menu",{showDropdownButton:[32],showDropdownMenu:[32]}]]],["p-b8ec5d70",[[1,"dnn-vertical-splitview",{splitterWidth:[2,"splitter-width"],splitWidthPercentage:[1026,"split-width-percentage"],leftWidth:[32],rightWidth:[32],setSplitWidthPercentage:[64],getSplitWidthPercentage:[64]}]]],["p-bff377d5",[[65,"dnn-checkbox",{checked:[1025],useIntermediate:[4,"use-intermediate"],value:[1],name:[1],nextStateHandler:[16],focused:[32]},[[2,"click","handleClick"]],{checked:["handleCheckedChange"]}]]],["p-f4b5a8e5",[[1,"dnn-color-picker",{color:[1],colorBoxHeight:[1,"color-box-height"],currentColor:[32],rgbDisplay:[32],hslDisplay:[32],hexDisplay:[32],focused:[32]},null,{currentColor:["handeCurrentColorChanged"]}]]],["p-2ff4df3f",[[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"]}]]],["p-678c5a33",[[1,"dnn-searchbox",{placeholder:[1],debounced:[4],debounceTime:[2,"debounce-time"],query:[1025],focused:[32]},null,{query:["handleQueryChanged"]}]]],["p-3279942a",[[1,"dnn-tab",{tabTitle:[1,"tab-title"],visible:[32],show:[64],hide:[64]}],[1,"dnn-tabs",{tabTitles:[32],selectedTabTitle:[32]}]]],["p-5aa5dc7b",[[1,"dnn-collapsible",{expanded:[516],transitionDuration:[2,"transition-duration"],updateSize:[64]},[[0,"dnnCollapsibleHeightChanged","handleHeightChanged"]],{expanded:["handledExpandedChanged"]}]]],["p-507074b5",[[1,"dnn-modal",{backdropDismiss:[4,"backdrop-dismiss"],closeText:[1,"close-text"],resizable:[4],showCloseButton:[4,"show-close-button"],visible:[1540],show:[64],hide:[64]}]]],["p-36dc982d",[[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]}]]],["p-0de82dae",[[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"]}]]],["p-bc2d2d54",[[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]}]]]],e)}));
+import{p as e,b as l}from"./p-91d08ab2.js";export{s as setNonce}from"./p-91d08ab2.js";import{g as a}from"./p-e1255160.js";var t=()=>{const l=import.meta.url;const a={};if(l!==""){a.resourcesUrl=new URL(".",l).href}return e(a)};t().then((async e=>{await a();return l([["p-fdee6fe3",[[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"]}]]],["p-ef6a902d",[[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"]}]]],["p-44d0c486",[[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"],autocomplete:[1],focused:[32],valid:[32],customValidityMessage:[32],selectedIndex:[32],positionInitialized:[32],lastScrollTop:[32],displayValue:[32],checkValidity:[64],setCustomValidity:[64]},[[4,"click","handleClick"]],{value:["handleValueChange"]}]]],["p-54a16398",[[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"],inputmode:[1],focused:[32],valid:[32],checkValidity:[64],setCustomValidity:[64]}]]],["p-a44c4df1",[[65,"dnn-select",{label:[1],name:[1],required:[4],helpText:[1,"help-text"],disabled:[4],disableValidityReporting:[4,"disable-validity-reporting"],autocomplete:[1],value:[1537],focused:[32],valid:[32],customValidityMessage:[32],checkValidity:[64]}]]],["p-793481e9",[[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]}]]],["p-c12c6683",[[1,"dnn-treeview-item",{expanded:[1540],hasChildren:[32],focused:[32]},null,{expanded:["watchExpanded"]}]]],["p-2b3d9bc1",[[1,"dnn-chevron",{expandText:[1,"expand-text"],collapseText:[1,"collapse-text"],expanded:[1540],focused:[32]},null,{expanded:["handleExpandedChanged"]}]]],["p-c15dfb8b",[[66,"dnn-monaco-editor",{language:[1],value:[1025],name:[1],focused:[32]},null,{language:["languageChanged"],value:["valueChanged"]}]]],["p-b0239140",[[1,"dnn-progress-bar",{value:[2],max:[2],useGradient:[4,"use-gradient"]}]]],["p-9b318120",[[65,"dnn-richtext",{options:[16],value:[1],name:[1],plugins:[16],customizeOptions:[16],focused:[32]},null,{value:["watchValueChanged"]}]]],["p-a645d829",[[1,"dnn-sort-icon",{sortDirection:[1025,"sort-direction"],focused:[32]}]]],["p-8056c270",[[65,"dnn-toggle",{checked:[1028],disabled:[4],name:[1],value:[1],focused:[32]},[[2,"click","handleClick"]],{checked:["checkedChanged"]}]]],["p-cf2aa06f",[[1,"dnn-vertical-overflow-menu",{showDropdownButton:[32],showDropdownMenu:[32]}]]],["p-b8ec5d70",[[1,"dnn-vertical-splitview",{splitterWidth:[2,"splitter-width"],splitWidthPercentage:[1026,"split-width-percentage"],leftWidth:[32],rightWidth:[32],setSplitWidthPercentage:[64],getSplitWidthPercentage:[64]}]]],["p-bff377d5",[[65,"dnn-checkbox",{checked:[1025],useIntermediate:[4,"use-intermediate"],value:[1],name:[1],nextStateHandler:[16],focused:[32]},[[2,"click","handleClick"]],{checked:["handleCheckedChange"]}]]],["p-f4b5a8e5",[[1,"dnn-color-picker",{color:[1],colorBoxHeight:[1,"color-box-height"],currentColor:[32],rgbDisplay:[32],hslDisplay:[32],hexDisplay:[32],focused:[32]},null,{currentColor:["handeCurrentColorChanged"]}]]],["p-2ff4df3f",[[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"]}]]],["p-678c5a33",[[1,"dnn-searchbox",{placeholder:[1],debounced:[4],debounceTime:[2,"debounce-time"],query:[1025],focused:[32]},null,{query:["handleQueryChanged"]}]]],["p-3279942a",[[1,"dnn-tab",{tabTitle:[1,"tab-title"],visible:[32],show:[64],hide:[64]}],[1,"dnn-tabs",{tabTitles:[32],selectedTabTitle:[32]}]]],["p-5aa5dc7b",[[1,"dnn-collapsible",{expanded:[516],transitionDuration:[2,"transition-duration"],updateSize:[64]},[[0,"dnnCollapsibleHeightChanged","handleHeightChanged"]],{expanded:["handledExpandedChanged"]}]]],["p-507074b5",[[1,"dnn-modal",{backdropDismiss:[4,"backdrop-dismiss"],closeText:[1,"close-text"],resizable:[4],showCloseButton:[4,"show-close-button"],visible:[1540],show:[64],hide:[64]}]]],["p-36dc982d",[[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]}]]],["p-0de82dae",[[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"]}]]],["p-edc588c2",[[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]}]]]],e)}));
 //# sourceMappingURL=dnn.esm.js.map

package/dist/dnn/p-44d0c486.entry.js

@@ -0,0 +1,2 @@
+import{r as i,c as t,h as e,H as s,g as n}from"./p-91d08ab2.js";import{D as o}from"./p-78c57746.js";const r=":host{display:inline-block;--foreground-color:var(--dnn-color-foreground, #000);--background-color:var(--dnn-color-background, #fff);--focus-color:var(--dnn-color-primary, #3792ED);--danger-color:var(--dnn-color-danger, #900);--control-radius:var(--dnn-controls-radius, 3px)}dnn-fieldset{width:100%}@keyframes shift{0%{background-position:0% 0}50%{background-position:100% 0}100%{background-position:200% 0}}.inner-container{display:flex;justify-content:space-between;position:relative;width:100%}.inner-container input{border:none;outline:none;background-color:transparent;color:var(--foreground-color);text-align:var(--input-text-align);width:100%}.inner-container svg.chevron-down{height:1rem;width:auto;transform:scale(1.2);fill:var(--foreground-color);cursor:pointer}.inner-container ul{position:absolute;border:1px solid lightgray;margin:0;padding:var(--dnn-controls-radius, 3px) 0;overflow-y:auto;width:100%;box-shadow:2px 2px 6px 1px rgba(0, 0, 0, 0.3);background-color:var(--dnn-color-background, white);border-radius:var(--dnn-controls-radius, 3px);z-index:2;display:none;scroll-behavior:smooth}.inner-container ul.show{display:block}.inner-container ul li{display:block;list-style-type:none;cursor:pointer;padding:0 0.5rem}.inner-container ul li.selected{background-color:lightgray}.inner-container ul li:hover{background-color:lightgray}.inner-container ul .loading{width:100%;height:0.5rem;border-radius:0.5rem;background:linear-gradient(to right, var(--background-color) 0%, var(--foreground-color) 50%, var(--background-color) 100%);background-size:200% 100%;animation:shift 2s linear infinite;width:75%;margin:0 auto;opacity:0.5}dnn-fieldset{--fieldset-foreground-color:var(--foreground-color);--fieldset-background-color:var(--background-color);--fieldset-focus-color:var(--focus-color);--fieldset-danger-color:var(--danger-color);--fieldset-control-radius:var(--control-radius)}";const h=r;var a=undefined&&undefined.__decorate||function(i,t,e,s){var n=arguments.length,o=n<3?t:s===null?s=Object.getOwnPropertyDescriptor(t,e):s,r;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")o=Reflect.decorate(i,t,e,s);else for(var h=i.length-1;h>=0;h--)if(r=i[h])o=(n<3?r(o):n>3?r(t,e,o):r(t,e))||o;return n>3&&o&&Object.defineProperty(t,e,o),o};const d=class{constructor(e){i(this,e);this.valueChange=t(this,"valueChange",7);this.valueInput=t(this,"valueInput",7);this.needMoreItems=t(this,"needMoreItems",7);this.searchQueryChanged=t(this,"searchQueryChanged",7);this.itemSelected=t(this,"itemSelected",7);if(e.$hostElement$["s-ei"]){this.internals=e.$hostElement$["s-ei"]}else{this.internals=e.$hostElement$.attachInternals();e.$hostElement$["s-ei"]=this.internals}this.adjustDropdownPosition=()=>{var i=this.findAverageSuggestionHeight();requestAnimationFrame((()=>{this.positionInitialized=true}));var t=window.innerHeight-this.inputField.getBoundingClientRect().bottom;const e=parseFloat(getComputedStyle(document.documentElement).fontSize);const s=t>3*i+3*e;if(s){this.suggestionsContainer.style.top="1.2rem"}else{this.suggestionsContainer.style.bottom="1.2rem"}if(s){this.suggestionsContainer.style.maxHeight=`${t-3*e}px`}else{this.suggestionsContainer.style.maxHeight=`${this.inputField.getBoundingClientRect().top-3*e}px`}this.checkIfMoreItemsNeeded()};this.label=undefined;this.name=undefined;this.helpText=undefined;this.value=undefined;this.required=undefined;this.disabled=undefined;this.suggestions=[];this.renderSuggestion=undefined;this.totalSuggestions=undefined;this.preloadThresholdPixels=1e3;this.autocomplete="off";this.focused=false;this.valid=true;this.customValidityMessage=undefined;this.selectedIndex=undefined;this.positionInitialized=false;this.lastScrollTop=0;this.displayValue=""}async checkValidity(){var i=this.inputField.checkValidity();if(!i){this.fieldset.setValidity(false,this.inputField.validationMessage)}this.fieldset.setValidity(true,"");return this.inputField.validity}async setCustomValidity(i){if(i==undefined||i==""){this.inputField.setCustomValidity("");this.valid=true;this.fieldset.setValidity(true);return}this.inputField.setCustomValidity(i);this.valid=false;this.fieldset.setValidity(false,i)}handleValueChange(i){this.displayValue=i;this.selectedIndex=this.suggestions.findIndex((t=>t.value===i))}handleClick(i){const t=i.composedPath();if(!t.includes(this.element)){this.focused=false}}componentDidRender(){if(this.focused&&this.suggestions.length>0&&!this.positionInitialized){this.adjustDropdownPosition()}}formResetCallback(){this.inputField.setCustomValidity("");this.valid=true;this.value="";this.internals.setValidity({});this.internals.setFormValue("")}handleInput(i){const t=i.target.value;this.displayValue=t;this.value=t;var e=this.inputField.checkValidity();this.valid=e;this.valueInput.emit(t);this.handleSearchQueryChanged(t)}handleSearchQueryChanged(i){this.searchQueryChanged.emit(i)}handleInvalid(){this.valid=false;if(this.customValidityMessage==undefined){this.customValidityMessage=this.inputField.validationMessage}}handleChange(){this.valueChange.emit(this.value);if(this.name!=undefined){var i=new FormData;i.append(this.name,this.value.toString());this.internals.setFormValue(i)}}shouldLabelFloat(){if(this.focused){return false}if(this.value!=undefined&&this.value!=""){return false}return true}findAverageSuggestionHeight(){const i=this.suggestionsContainer.querySelectorAll("li");var t=0;for(let e=0;e<i.length;e++){t+=i[e].clientHeight}return t/i.length}handleKeyDown(i){var t;if(i.key==="ArrowDown"){i.preventDefault();if(this.selectedIndex==undefined){this.selectedIndex=0}else{this.selectedIndex=Math.min(this.selectedIndex+1,this.suggestions.length-1)}}if(i.key==="ArrowUp"){i.preventDefault();if(this.selectedIndex==undefined){this.selectedIndex=this.suggestions.length-1}else{this.selectedIndex=Math.max(this.selectedIndex-1,0)}}this.value=((t=this.suggestions[this.selectedIndex])===null||t===void 0?void 0:t.value)||this.value;if(i.key==="Enter"){var e=this.suggestions[this.selectedIndex];this.value=e.value;this.inputField.value=e.label;this.itemSelected.emit(e.value);this.focused=false}if(i.key==="Tab"){this.focused=false}}selectItem(i,t){i.preventDefault();i.stopPropagation();this.selectedIndex=t;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)}getVirtualScrollHeight(){const i=this.findAverageSuggestionHeight();const t=this.totalSuggestions-this.suggestions.length;return i*t}handleDropdownClick(){this.handleSearchQueryChanged(this.value)}handleSuggestionsScroll(){const i=this.suggestionsContainer;const t=i.scrollTop;if(t>this.lastScrollTop){const e=i.querySelector(".loading");if(e==undefined){this.lastScrollTop=t;return}const s=e.offsetTop;const n=e.offsetHeight;const o=s+n;const r=t+i.clientHeight;if(r>o){i.scrollTop=o-i.clientHeight}this.checkIfMoreItemsNeeded()}this.lastScrollTop=t}checkIfMoreItemsNeeded(){const i=this.suggestionsContainer;const t=i.querySelector(".loading");if(t==undefined)return;const e=i.scrollTop+i.clientHeight;const s=t.offsetTop;if(s-e<this.preloadThresholdPixels){const i={searchTerm:this.inputField.value};this.needMoreItems.emit(i)}}handleBlur(){var i=this.inputField.checkValidity();this.valid=i;this.fieldset.setValidity(i,this.inputField.validationMessage);this.internals.setValidity(this.inputField.validity,this.inputField.validationMessage)}render(){var i;return e(s,{key:"e4721cc0e2110853787b552f1353c94d8483287b",tabIndex:this.focused?-1:0,onFocus:()=>this.inputField.focus(),onBlur:()=>this.inputField.blur()},e("dnn-fieldset",{key:"0881da2521817503d78f15cd1fd9b777654b108d",ref:i=>this.fieldset=i,invalid:!this.valid,focused:this.focused,label:`${(i=this.label)!==null&&i!==void 0?i:""}${this.required?" *":""}`,helpText:this.helpText,id:this.labelId,disabled:this.disabled,floatLabel:this.shouldLabelFloat()},e("div",{key:"ac5590e129b624f1ba1c012448897515017db086",class:"inner-container"},e("input",{key:"779f3a6e00dff6319b2d94c6bb903e9b495d1746",ref:i=>this.inputField=i,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:this.autocomplete,value:this.displayValue,onFocus:()=>{this.searchQueryChanged.emit(this.value||"");this.focused=true},onBlur:()=>this.handleBlur(),onInput:i=>this.handleInput(i),onInvalid:()=>this.handleInvalid(),onChange:()=>this.handleChange(),"aria-labelledby":this.labelId,onKeyDown:i=>this.handleKeyDown(i)}),e("ul",{key:"32448159bf989944d974bdba2ca42cf30f089272",class:this.focused&&this.suggestions.length>0?"show":"",role:"listbox",ref:i=>this.suggestionsContainer=i,onScroll:()=>this.handleSuggestionsScroll()},this.suggestions.map(((i,t)=>e("li",{id:`option-${t}`,role:"option","aria-selected":this.selectedIndex==t,class:this.selectedIndex==t?"selected":"",onClick:i=>this.selectItem(i,t)},this.renderSuggestion!=undefined?this.renderSuggestion(i):i.label))),this.totalSuggestions!=undefined&&this.totalSuggestions>this.suggestions.length&&e("div",{key:"d4bee8ab76bb9058740f1fb6a0faf06e9446f859",class:"loading"}),this.totalSuggestions!=undefined&&this.totalSuggestions>this.suggestions.length&&this.positionInitialized&&e("div",{key:"54539c1e08aa3cd521306a942df62835099f3560",style:{height:`${this.getVirtualScrollHeight()}px`}})),e("svg",{key:"43a4b159fcd84253003375dbf5cf95818539b410",onClick:()=>this.handleDropdownClick(),class:"chevron-down",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 -960 960 960"},e("path",{key:"c752ed998df5b38322b13f8636f172c645f2ca8a",d:"M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z"})))))}static get formAssociated(){return true}get element(){return n(this)}static get watchers(){return{value:["handleValueChange"]}}};a([o(300)],d.prototype,"handleSearchQueryChanged",null);a([o(100)],d.prototype,"handleSuggestionsScroll",null);a([o()],d.prototype,"checkIfMoreItemsNeeded",null);d.style=h;export{d as dnn_autocomplete};
+//# sourceMappingURL=p-44d0c486.entry.js.map

package/dist/dnn/p-44d0c486.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["dnnAutocompleteCss","DnnAutocompleteStyle0","DnnAutocomplete","this","adjustDropdownPosition","itemHeight","findAverageSuggestionHeight","requestAnimationFrame","positionInitialized","spaceBelow","window","innerHeight","inputField","getBoundingClientRect","bottom","rem","parseFloat","getComputedStyle","document","documentElement","fontSize","fitsDown","suggestionsContainer","style","top","maxHeight","checkIfMoreItemsNeeded","checkValidity","validity","fieldset","setValidity","validationMessage","setCustomValidity","message","undefined","valid","handleValueChange","newValue","displayValue","selectedIndex","suggestions","findIndex","s","value","handleClick","e","path","composedPath","includes","element","focused","componentDidRender","length","formResetCallback","internals","setFormValue","handleInput","inputValue","target","valueInput","emit","handleSearchQueryChanged","searchQueryChanged","handleInvalid","customValidityMessage","handleChange","valueChange","name","data","FormData","append","toString","shouldLabelFloat","suggestionItems","querySelectorAll","totalHeight","i","clientHeight","handleKeyDown","key","preventDefault","Math","min","max","_a","selectedItem","label","itemSelected","selectItem","index","stopPropagation","getVirtualScrollHeight","upcomingItems","totalSuggestions","handleDropdownClick","handleSuggestionsScroll","container","currentScrollTop","scrollTop","lastScrollTop","loadingDiv","querySelector","loadingDivPosition","offsetTop","loadingDivHeight","offsetHeight","loadingDivBottom","visibleBottom","scrollPosition","preloadThresholdPixels","eventArgs","searchTerm","needMoreItems","handleBlur","render","h","Host","tabIndex","onFocus","focus","onBlur","blur","ref","el","invalid","required","helpText","id","labelId","disabled","floatLabel","class","type","role","autoComplete","autocomplete","onInput","onInvalid","onChange","onKeyDown","onScroll","map","suggestion","onClick","renderSuggestion","height","xmlns","viewBox","d","__decorate","Debounce"],"sources":["src/components/dnn-autocomplete/dnn-autocomplete.scss?tag=dnn-autocomplete&encapsulation=shadow","src/components/dnn-autocomplete/dnn-autocomplete.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n\n  /** @prop --foreground-color: Defines the foreground color. */\n  --foreground-color: var(--dnn-color-foreground, #000);\n\n  /** @prop --background-color: Defines the background color. */\n  --background-color: var(--dnn-color-background, #fff);\n\n  /** @prop --focus-color: Defines the color when the component is focused. */\n  --focus-color: var(--dnn-color-primary, #3792ED);\n\n  /** @prop --danger-color: Defines the danger color used for invalid data. */\n  --danger-color: var(--dnn-color-danger, #900);\n\n  /** @prop --control-radius: Defines the radius for the control corners. */\n  --control-radius: var(--dnn-controls-radius, 3px);\n}\n\ndnn-fieldset{\n  width: 100%;\n}\n\n@keyframes shift {\n  0% {\n      background-position: 0% 0;\n  }\n  50% {\n      background-position: 100% 0;\n  }\n  100% {\n      background-position: 200% 0;\n  }\n}\n\n.inner-container{\n  display: flex;\n  justify-content: space-between;\n  position: relative;\n  width: 100%;\n\n  input {\n    border: none;\n    outline: none;\n    background-color: transparent;\n    color: var(--foreground-color);\n    text-align: var(--input-text-align);\n    width: 100%;\n  }\n\n  svg.chevron-down{\n    height: 1rem;\n    width: auto;\n    transform: scale(1.2);\n    fill: var(--foreground-color);\n    cursor: pointer;\n  }\n\n  ul{\n    position: absolute;\n    border: 1px solid lightgray;\n    margin: 0;\n    padding: var(--dnn-controls-radius, 3px) 0;\n    overflow-y: auto;\n    width: 100%;\n    box-shadow: 2px 2px 6px 1px rgb(0 0 0 / 30%);\n    background-color: var(--dnn-color-background, white);\n    border-radius: var(--dnn-controls-radius, 3px);\n    z-index: 2;\n    display: none;\n    scroll-behavior: smooth;\n    &.show{\n      display: block;\n    }\n    li {\n      display: block;\n      list-style-type: none;\n      cursor: pointer;\n      padding: 0 0.5rem;\n      &.selected {\n        background-color: lightgray;\n      }\n      &:hover {\n        background-color: lightgray;\n      }\n    }\n    .loading {\n      width: 100%;\n      height: 0.5rem;\n      border-radius: 0.5rem;\n      background: linear-gradient(\n        to right,\n        var(--background-color) 0%,\n        var(--foreground-color) 50%,\n        var(--background-color) 100%);\n      background-size: 200% 100%;\n      animation: shift 2s linear infinite;\n      width: 75%;\n      margin: 0 auto;\n      opacity: 0.5;\n    }\n  }\n}\n\ndnn-fieldset{\n  --fieldset-foreground-color: var(--foreground-color);\n  --fieldset-background-color: var(--background-color);\n  --fieldset-focus-color: var(--focus-color);\n  --fieldset-danger-color: var(--danger-color);\n  --fieldset-control-radius: var(--control-radius);\n}\n","import { Component, Prop, State, Event, Element, h, Host, EventEmitter, Method, AttachInternals, Listen, Watch } 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  /** Defines the type of automatic completion the browser could use.\n  * See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\n  */\n  @Prop() autocomplete: string = \"off\";\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  @Watch(\"value\")\n  handleValueChange(newValue: string) {\n    this.displayValue = newValue;\n\n    // Find the index of the selected item\n    this.selectedIndex = this.suggestions.findIndex(s => s.value === newValue);\n  }\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={this.autocomplete}\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}"],"mappings":"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","ignoreList":[]}

package/dist/dnn/p-54a16398.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as e,h as i,H as s}from"./p-91d08ab2.js";import{g as n}from"./p-5df01911.js";const r=":host{display:inline-block;--foreground-color:var(--dnn-color-foreground, #000);--background-color:var(--dnn-color-background, #fff);--focus-color:var(--dnn-color-primary, #3792ED);--danger-color:var(--dnn-color-danger, #900);--control-radius:var(--dnn-controls-radius, 3px);--input-text-align:left}dnn-fieldset{width:100%}.inner-container{display:flex;justify-content:space-between;position:relative;width:100%}input{border:none;outline:none;background-color:transparent;color:var(--foreground);text-align:var(--input-text-align);width:100%}.prefix,.suffix{font-size:0.8em}svg.error{fill:red;width:1em;height:1em;transform:scale(1.5);margin-right:0.5em}button.show-password{border:none;background-color:transparent;margin:0;padding:0}button.show-password svg{height:1em;width:auto;fill:var(--foreground);transform:scale(1.5)}dnn-fieldset{--fieldset-foreground-color:var(--foreground-color);--fieldset-background-color:var(--background-color);--fieldset-focus-color:var(--focus-color);--fieldset-danger-color:var(--danger-color);--fieldset-control-radius:var(--control-radius)}";const a=r;const d=class{constructor(i){t(this,i);this.valueChange=e(this,"valueChange",7);this.valueInput=e(this,"valueInput",7);if(i.$hostElement$["s-ei"]){this.internals=i.$hostElement$["s-ei"]}else{this.internals=i.$hostElement$.attachInternals();i.$hostElement$["s-ei"]=this.internals}this.type="text";this.label=undefined;this.name=undefined;this.value=undefined;this.helpText=undefined;this.required=undefined;this.disabled=undefined;this.autocomplete="off";this.min=undefined;this.max=undefined;this.minlength=undefined;this.maxlength=undefined;this.multiple=undefined;this.pattern=undefined;this.readonly=undefined;this.step=undefined;this.disableValidityReporting=undefined;this.allowShowPassword=undefined;this.inputmode=undefined;this.focused=false;this.valid=true}async checkValidity(){var t=this.inputField.checkValidity();if(!t){this.fieldset.setValidity(false,this.inputField.validationMessage)}return this.inputField.validity}async setCustomValidity(t){if(t==undefined||t==""){this.inputField.setCustomValidity("");this.valid=true;this.fieldset.setValidity(true);return}this.inputField.setCustomValidity(t);this.valid=false;this.fieldset.setValidity(false,t)}componentWillLoad(){this.labelId=n()}componentDidLoad(){requestAnimationFrame((()=>{var t=this.inputField.validity;var e=t.valid?"":this.inputField.validationMessage;this.internals.setValidity(this.inputField.validity,e)}))}formResetCallback(){this.inputField.setCustomValidity("");this.value="";this.internals.setValidity({});this.internals.setFormValue("")}handleInput(t){if(this.type==="number"&&t.data==="-"){return}var e=t.target.value;this.value=e;var i=this.inputField.checkValidity();this.valid=i;this.valueInput.emit(this.value)}handleInvalid(){this.fieldset.setValidity(false,this.inputField.validationMessage);this.internals.setValidity(this.inputField.validity,this.inputField.validationMessage)}handleChange(){this.valueChange.emit(this.value);if(this.name!=undefined){var t=new FormData;t.append(this.name,this.value.toString());this.internals.setFormValue(t)}}switchPasswordVisibility(){if(this.type==="password"){this.type="text";return}if(this.type==="text"){this.type="password";return}}shouldLabelFloat(){if(this.type==="number"&&isNaN(this.value)){return true}if(this.focused){return false}if(this.value!=undefined&&this.value!=""){return false}if(this.type=="date"||this.type=="datetime-local"||this.type=="time"){return false}if(this.value===0||this.value==="0"){return false}return true}getInputMode(){var t;if(this.inputmode!=undefined){return this.inputmode}if(this.type==="number"){var e=parseFloat((t=this.min)===null||t===void 0?void 0:t.toString());if((this.step===1||this.step==undefined)&&e>=0){return"numeric"}return"decimal"}if(this.type==="tel"){return"tel"}if(this.type==="url"){return"url"}if(this.type==="email"){return"email"}if(this.type==="search"){return"search"}return"text"}handleBlur(){this.focused=false;var t=this.inputField.checkValidity();this.valid=t;this.fieldset.setValidity(t,this.inputField.validationMessage);this.internals.setValidity(this.inputField.validity,this.inputField.validationMessage)}render(){var t;return i(s,{key:"9f535f190488150dab4acc288b3ec7e274600d2d",tabIndex:this.focused?-1:0,onFocus:()=>this.inputField.focus(),onBlur:()=>this.inputField.blur()},i("dnn-fieldset",{key:"916246e3ab9d6981a9403163de3854ef8a439826",ref:t=>this.fieldset=t,invalid:!this.valid,focused:this.focused,label:`${(t=this.label)!==null&&t!==void 0?t:""}${this.required?" *":""}`,helpText:this.helpText,id:this.labelId,disabled:this.disabled,floatLabel:this.shouldLabelFloat(),onClick:()=>!this.focused&&this.inputField.focus(),onFocus:()=>this.focused=true,onBlur:()=>this.focused=false},i("div",{key:"79d7aea39ba02fbf7cda90e7f5733c107ff1bf9a",class:"inner-container"},!this.shouldLabelFloat()&&i("slot",{key:"a3c1e36d64c30ae7f79af57715a4e3435d0b8cf3",name:"prefix"}),i("input",{key:"05ba34c716a61bca952b22a87072512cecc2e11b",ref:t=>this.inputField=t,name:this.name,type:this.type,inputMode:this.getInputMode(),disabled:this.disabled,required:this.required,autoComplete:this.autocomplete,min:this.min,max:this.max,minlength:this.minlength,maxlength:this.maxlength,multiple:this.multiple,pattern:this.pattern,readonly:this.readonly,step:this.step,value:this.value,onBlur:()=>this.handleBlur(),onFocus:()=>this.focused=true,onInput:t=>this.handleInput(t),onInvalid:()=>this.handleInvalid(),onChange:()=>this.handleChange(),"aria-labelledby":this.labelId}),!this.shouldLabelFloat()&&i("slot",{key:"8463fa0fb1ec489b1d09643e6bf9f6df617d07c7",name:"suffix"}),!this.valid&&i("svg",{key:"408bda1e95757c312bc99578ea05d658d9dc4b2e",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 -960 960 960",class:"error"},i("path",{key:"491e2aded33fcb4a0a3db665796ceaa087b06539",d:"M479.982-280q14.018 0 23.518-9.482 9.5-9.483 9.5-23.5 0-14.018-9.482-23.518-9.483-9.5-23.5-9.5-14.018 0-23.518 9.482-9.5 9.483-9.5 23.5 0 14.018 9.482 23.518 9.483 9.5 23.5 9.5ZM453-433h60v-253h-60v253Zm27.266 353q-82.734 0-155.5-31.5t-127.266-86q-54.5-54.5-86-127.341Q80-397.681 80-480.5q0-82.819 31.5-155.659Q143-709 197.5-763t127.341-85.5Q397.681-880 480.5-880q82.819 0 155.659 31.5Q709-817 763-763t85.5 127Q880-563 880-480.266q0 82.734-31.5 155.5T763-197.684q-54 54.316-127 86Q563-80 480.266-80Zm.234-60Q622-140 721-239.5t99-241Q820-622 721.188-721 622.375-820 480-820q-141 0-240.5 98.812Q140-622.375 140-480q0 141 99.5 240.5t241 99.5Zm-.5-340Z"})),this.allowShowPassword&&i("button",{key:"d71085f4bbda1e7a43e75a6dd037232ad9eb5a05",class:"show-password",onClick:()=>this.switchPasswordVisibility()},this.type==="text"&&i("svg",{key:"0d9336e7c5defc77f1eb6144bc5dcc5bf73b0302",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 -960 960 960"},i("path",{key:"2e98406e3b4d0e9da313a91e5fbc0cd29374d4ae",d:"M480.118-330Q551-330 600.5-379.618q49.5-49.617 49.5-120.5Q650-571 600.382-620.5q-49.617-49.5-120.5-49.5Q409-670 359.5-620.382q-49.5 49.617-49.5 120.5Q310-429 359.618-379.5q49.617 49.5 120.5 49.5Zm-.353-58Q433-388 400.5-420.735q-32.5-32.736-32.5-79.5Q368-547 400.735-579.5q32.736-32.5 79.5-32.5Q527-612 559.5-579.265q32.5 32.736 32.5 79.5Q592-453 559.265-420.5q-32.736 32.5-79.5 32.5ZM480-200q-146 0-264-83T40-500q58-134 176-217t264-83q146 0 264 83t176 217q-58 134-176 217t-264 83Zm0-300Zm-.169 240Q601-260 702.5-325.5 804-391 857-500q-53-109-154.331-174.5-101.332-65.5-222.5-65.5Q359-740 257.5-674.5 156-609 102-500q54 109 155.331 174.5 101.332 65.5 222.5 65.5Z"})),this.type=="password"&&i("svg",{key:"36ad77ed9be0985f5be172ab90d503bd9567d229",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 -960 960 960"},i("path",{key:"5072fc4ec3d6be6432d893abda46b083b1e4131d",d:"m629-419-44-44q26-71-27-118t-115-24l-44-44q17-11 38-16t43-5q71 0 120.5 49.5T650-500q0 22-5.5 43.5T629-419Zm129 129-40-40q49-36 85.5-80.5T857-500q-50-111-150-175.5T490-740q-42 0-86 8t-69 19l-46-47q35-16 89.5-28T485-800q143 0 261.5 81.5T920-500q-26 64-67 117t-95 93Zm58 226L648-229q-35 14-79 21.5t-89 7.5q-146 0-265-81.5T40-500q20-52 55.5-101.5T182-696L56-822l42-43 757 757-39 44ZM223-654q-37 27-71.5 71T102-500q51 111 153.5 175.5T488-260q33 0 65-4t48-12l-64-64q-11 5-27 7.5t-30 2.5q-70 0-120-49t-50-121q0-15 2.5-30t7.5-27l-97-97Zm305 142Zm-116 58Z"}))))))}static get formAssociated(){return true}};d.style=a;export{d as dnn_input};
+//# sourceMappingURL=p-54a16398.entry.js.map

package/dist/dnn/p-54a16398.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["dnnInputCss","DnnInputStyle0","DnnInput","checkValidity","validity","this","inputField","fieldset","setValidity","validationMessage","setCustomValidity","message","undefined","valid","componentWillLoad","labelId","generateRandomId","componentDidLoad","requestAnimationFrame","validityMessage","internals","formResetCallback","value","setFormValue","handleInput","e","type","data","target","valueInput","emit","handleInvalid","handleChange","valueChange","name","FormData","append","toString","switchPasswordVisibility","shouldLabelFloat","isNaN","focused","getInputMode","inputmode","min","parseFloat","_a","step","handleBlur","render","h","Host","key","tabIndex","onFocus","focus","onBlur","blur","ref","el","invalid","label","required","helpText","id","disabled","floatLabel","onClick","class","inputMode","autoComplete","autocomplete","max","minlength","maxlength","multiple","pattern","readonly","onInput","onInvalid","onChange","xmlns","viewBox","d","allowShowPassword"],"sources":["src/components/dnn-input/dnn-input.scss?tag=dnn-input&encapsulation=shadow","src/components/dnn-input/dnn-input.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n\n  /** @prop --foreground-color: Defines the foreground color. */\n  --foreground-color: var(--dnn-color-foreground, #000);\n\n  /** @prop --background-color: Defines the background color. */\n  --background-color: var(--dnn-color-background, #fff);\n\n  /** @prop --focus-color: Defines the color when the component is focused. */\n  --focus-color: var(--dnn-color-primary, #3792ED);\n\n  /** @prop --danger-color: Defines the danger color used for invalid data. */\n  --danger-color: var(--dnn-color-danger, #900);\n\n  /** @prop --control-radius: Defines the radius for the control corners. */\n  --control-radius: var(--dnn-controls-radius, 3px);\n \n  /** @prop --input-text-align: Allows customizing the text alignment of the input text. */\n  --input-text-align: left;\n}\n\ndnn-fieldset{\n  width: 100%;\n}\n\n.inner-container{\n  display: flex;\n  justify-content: space-between;\n  position: relative;\n  width: 100%;\n}\ninput{\n  border: none;\n  outline: none;\n  background-color: transparent;\n  color: var(--foreground);\n  text-align: var(--input-text-align);\n  width: 100%;\n}\n\n.prefix, .suffix{\n  font-size: 0.8em;\n}\nsvg{\n  &.error{\n    fill: red;\n    width: 1em;\n    height: 1em;\n    transform: scale(1.5);\n    margin-right: 0.5em;\n  }\n}\nbutton.show-password{\n  border: none;\n  background-color: transparent;\n  margin: 0;\n  padding: 0;\n  svg{\n    height: 1em;\n    width: auto;\n    fill: var(--foreground);\n    transform: scale(1.5);\n  }\n}\n\ndnn-fieldset{\n  --fieldset-foreground-color: var(--foreground-color);\n  --fieldset-background-color: var(--background-color);\n  --fieldset-focus-color: var(--focus-color);\n  --fieldset-danger-color: var(--danger-color);\n  --fieldset-control-radius: var(--control-radius);\n}","import { Component, Host, Prop, State, h, Method, Event, EventEmitter, AttachInternals } from '@stencil/core';\nimport { generateRandomId } from '../../utilities/stringUtilities';\n\n/** A custom input component that wraps the html input element is a mobile friendly component that supports a label, some help text and other features.\n * @slot prefix - Can be used to inject content before the input field.\n * @slot suffix - Can be used to inject content after the input field.\n */\n@Component({\n  tag: 'dnn-input',\n  styleUrl: 'dnn-input.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class DnnInput {\n\n  /** The input type, supports most of html standard input type, see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types. */\n  @Prop({mutable: true}) type: \"date\" | \"datetime-local\" | \"email\" | \"number\" | \"password\" | \"tel\" | \"text\" | \"time\" | \"url\" | \"search\" = \"text\";\n  \n  /** The label for this input. */\n  @Prop() label: string;\n\n  /** The name for this input when used in forms. */\n  @Prop() name: string;\n\n  /** The value of the input. */\n  @Prop({mutable: true, reflect:true}) value: number | string | string[];\n\n  /** Defines the help label displayed under the field. */\n  @Prop() helpText: 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  /** Defines the type of auto-completion to use for this field, see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete. */\n  @Prop() autocomplete: string = \"off\";\n\n  /** Defines the minimum allowed value. */\n  @Prop() min: number | string;\n\n  /** Defines the maximum allowed value. */\n  @Prop() max: number | string;\n\n  /** Defines the minimum amount of charaters. */\n  @Prop() minlength: number;\n\n  /** Defines the maximum amount of charaters. */\n  @Prop() maxlength: number;\n\n  /** If true, allows multiple emails to be entered separated by commas. */\n  @Prop() multiple: boolean;\n\n  /** Valid for text, search, url, tel, email, and password, the pattern attribute defines a regular expression that the input's value must match in order for the value to pass constraint validation. */\n  @Prop() pattern: string;\n\n  /** Defines wheter the defined value is readonly. */\n  @Prop() readonly: boolean;\n\n  /** Defines the possible steps for numbers and dates/times. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date#step */\n  @Prop() step: string | number;\n\n  /** @deprecated This control has it's own validation reporting, will be removed in v0.25.0 */\n  @Prop() disableValidityReporting: boolean;\n\n  /** If true, enables users to switch between a password and a text field (to view their password). */\n  @Prop() allowShowPassword: boolean;\n\n  /** Hints at the type of data that might be entered by the user while editing the element or its contents.\n   * This allows a browser to display an appropriate virtual keyboard.\n   */\n  @Prop() inputmode: \"none\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | \"search\";\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  /** 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    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  \n  @AttachInternals() internals: ElementInternals;\n  \n  private inputField!: HTMLInputElement;\n  private fieldset: HTMLDnnFieldsetElement;\n  private labelId: string;\n\n  componentWillLoad() {\n    this.labelId = generateRandomId();\n  }\n\n  componentDidLoad() {\n    requestAnimationFrame(() => {\n      var validity = this.inputField.validity;\n      var validityMessage = validity.valid ? \"\" : this.inputField.validationMessage;\n      this.internals.setValidity(this.inputField.validity, validityMessage);\n    });\n  }\n\n  // eslint-disable-next-line @stencil-community/own-methods-must-be-private\n  formResetCallback() {\n    this.inputField.setCustomValidity(\"\");\n    this.value = \"\";\n    this.internals.setValidity({});\n    this.internals.setFormValue(\"\");\n  }\n\n  private handleInput(e: InputEvent): void {\n    if (this.type === \"number\" && e.data === \"-\") {\n      // Ignore the minus sign if the input type is number\n      return;\n    }\n    var value = (e.target as HTMLInputElement).value;\n    this.value = value;\n    var valid = this.inputField.checkValidity();\n    this.valid = valid;\n    this.valueInput.emit(this.value);\n  }\n\n  private handleInvalid(): void {\n    this.fieldset.setValidity(false, this.inputField.validationMessage);\n    this.internals.setValidity(this.inputField.validity, this.inputField.validationMessage);\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  private switchPasswordVisibility(){\n    if (this.type === \"password\" )\n    {\n      this.type = \"text\";\n      return;\n    }\n    if (this.type === \"text\")\n    {\n      this.type = \"password\";\n      return;\n    }\n  }\n\n  private shouldLabelFloat(): boolean {\n    if (this.type === \"number\" && isNaN(this.value as number)) {\n      return true;\n    }\n    \n    if (this.focused) {\n      return false;\n    }\n\n    if (this.value != undefined && this.value != \"\") {\n      return false;\n    }\n\n    if (this.type == \"date\" || this.type == \"datetime-local\" || this.type == \"time\") {\n      return false;\n    }\n\n    if (this.value === 0 || this.value === \"0\") {\n      return false;\n    }\n    \n    return true;\n  }\n\n  private getInputMode(): string {\n    if (this.inputmode != undefined) {\n      return this.inputmode;\n    }\n\n    if (this.type === \"number\") {\n      var min = parseFloat(this.min?.toString());\n      if ((this.step === 1 || this.step == undefined) && min >= 0) {\n        return \"numeric\";\n      }\n\n      return \"decimal\";\n    }\n\n    if (this.type === \"tel\") {\n      return \"tel\";\n    }\n\n    if (this.type === \"url\") {\n      return \"url\";\n    }\n\n    if (this.type === \"email\") {\n      return \"email\";\n    }\n\n    if (this.type === \"search\") {\n      return \"search\";\n    }\n\n    return \"text\";\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          onClick={() => !this.focused && this.inputField.focus()}\n          onFocus={() => this.focused = true}\n          onBlur={() => this.focused = false}\n        >\n          <div class=\"inner-container\">\n            {!this.shouldLabelFloat() &&\n              <slot name=\"prefix\"></slot>\n            }\n            <input\n              ref={el => this.inputField = el}\n              name={this.name}\n              type={this.type}\n              inputMode={this.getInputMode()}\n              disabled={this.disabled}\n              required={this.required}\n              autoComplete={this.autocomplete}\n              min={this.min}\n              max={this.max}\n              minlength={this.minlength}\n              maxlength={this.maxlength}\n              multiple={this.multiple}\n              pattern={this.pattern}\n              readonly={this.readonly}\n              step={this.step}\n              value={this.value}\n              onBlur={() => this.handleBlur()}\n              onFocus={() => this.focused = true}\n              onInput={e => this.handleInput(e)}\n              onInvalid={() => this.handleInvalid()}\n              onChange={() => this.handleChange()}\n              aria-labelledby={this.labelId}\n            />\n            {!this.shouldLabelFloat() &&\n              <slot name=\"suffix\"></slot>\n            }\n            {!this.valid &&\n              <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 -960 960 960\" class=\"error\">\n                <path d=\"M479.982-280q14.018 0 23.518-9.482 9.5-9.483 9.5-23.5 0-14.018-9.482-23.518-9.483-9.5-23.5-9.5-14.018 0-23.518 9.482-9.5 9.483-9.5 23.5 0 14.018 9.482 23.518 9.483 9.5 23.5 9.5ZM453-433h60v-253h-60v253Zm27.266 353q-82.734 0-155.5-31.5t-127.266-86q-54.5-54.5-86-127.341Q80-397.681 80-480.5q0-82.819 31.5-155.659Q143-709 197.5-763t127.341-85.5Q397.681-880 480.5-880q82.819 0 155.659 31.5Q709-817 763-763t85.5 127Q880-563 880-480.266q0 82.734-31.5 155.5T763-197.684q-54 54.316-127 86Q563-80 480.266-80Zm.234-60Q622-140 721-239.5t99-241Q820-622 721.188-721 622.375-820 480-820q-141 0-240.5 98.812Q140-622.375 140-480q0 141 99.5 240.5t241 99.5Zm-.5-340Z\"/>\n              </svg>\n            }\n            {this.allowShowPassword &&\n              <button class=\"show-password\" onClick={() => this.switchPasswordVisibility()}>\n                {this.type === \"text\" &&\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 -960 960 960\">\n                    <path d=\"M480.118-330Q551-330 600.5-379.618q49.5-49.617 49.5-120.5Q650-571 600.382-620.5q-49.617-49.5-120.5-49.5Q409-670 359.5-620.382q-49.5 49.617-49.5 120.5Q310-429 359.618-379.5q49.617 49.5 120.5 49.5Zm-.353-58Q433-388 400.5-420.735q-32.5-32.736-32.5-79.5Q368-547 400.735-579.5q32.736-32.5 79.5-32.5Q527-612 559.5-579.265q32.5 32.736 32.5 79.5Q592-453 559.265-420.5q-32.736 32.5-79.5 32.5ZM480-200q-146 0-264-83T40-500q58-134 176-217t264-83q146 0 264 83t176 217q-58 134-176 217t-264 83Zm0-300Zm-.169 240Q601-260 702.5-325.5 804-391 857-500q-53-109-154.331-174.5-101.332-65.5-222.5-65.5Q359-740 257.5-674.5 156-609 102-500q54 109 155.331 174.5 101.332 65.5 222.5 65.5Z\"/>\n                  </svg>\n                }\n                {this.type == \"password\" &&\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 -960 960 960\">\n                    <path d=\"m629-419-44-44q26-71-27-118t-115-24l-44-44q17-11 38-16t43-5q71 0 120.5 49.5T650-500q0 22-5.5 43.5T629-419Zm129 129-40-40q49-36 85.5-80.5T857-500q-50-111-150-175.5T490-740q-42 0-86 8t-69 19l-46-47q35-16 89.5-28T485-800q143 0 261.5 81.5T920-500q-26 64-67 117t-95 93Zm58 226L648-229q-35 14-79 21.5t-89 7.5q-146 0-265-81.5T40-500q20-52 55.5-101.5T182-696L56-822l42-43 757 757-39 44ZM223-654q-37 27-71.5 71T102-500q51 111 153.5 175.5T488-260q33 0 65-4t48-12l-64-64q-11 5-27 7.5t-30 2.5q-70 0-120-49t-50-121q0-15 2.5-30t7.5-27l-97-97Zm305 142Zm-116 58Z\"/>\n                  </svg>\n                }\n              </button>\n            }\n          </div>\n        </dnn-fieldset>\n      </Host>\n    );\n  }  \n}\n"],"mappings":"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","ignoreList":[]}

package/dist/dnn/p-793481e9.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as i,h as e,H as s}from"./p-91d08ab2.js";import{g as n}from"./p-5df01911.js";const r=":host{display:inline-block;--foreground-color:var(--dnn-color-foreground, #000);--background-color:var(--dnn-color-background, #fff);--focus-color:var(--dnn-color-primary, #3792ED);--danger-color:var(--dnn-color-danger, #900);--control-radius:var(--dnn-controls-radius, 3px)}dnn-fieldset{width:100%}textarea{border:none;outline:none;background-color:transparent;color:var(--foreground-color);width:calc(100% - 1em);height:calc(100% - 1em);line-height:1.5em;resize:none}dnn-fieldset{--fieldset-foreground-color:var(--foreground-color);--fieldset-background-color:var(--background-color);--fieldset-focus-color:var(--focus-color);--fieldset-danger-color:var(--danger-color);--fieldset-control-radius:var(--control-radius)}";const o=r;const d=class{constructor(e){t(this,e);this.valueInput=i(this,"valueInput",7);this.valueChange=i(this,"valueChange",7);if(e.$hostElement$["s-ei"]){this.internals=e.$hostElement$["s-ei"]}else{this.internals=e.$hostElement$.attachInternals();e.$hostElement$["s-ei"]=this.internals}this.resizable="block";this.value=undefined;this.label=undefined;this.name=undefined;this.helpText=undefined;this.required=undefined;this.disabled=undefined;this.autocomplete="off";this.minlength=undefined;this.maxlength=undefined;this.readonly=undefined;this.rows=3;this.focused=false;this.valid=true;this.customValidityMessage=undefined}async checkValidity(){return this.textarea.validity}async setCustomValidity(t){if(t==undefined||t==""){this.textarea.setCustomValidity("");this.valid=true;this.fieldset.setValidity(true);return}this.customValidityMessage=t;this.valid=false;this.textarea.setCustomValidity(t)}componentWillLoad(){this.labelId=n()}componentDidLoad(){this.textarea.style.minHeight=`${this.rows*1.5}em`}formResetCallback(){this.textarea.setCustomValidity("");this.valid=true;this.value="";this.internals.setValidity({});this.internals.setFormValue("")}handleInput(t){this.value=t;var i=this.textarea.checkValidity();this.valid=i;this.valueInput.emit(this.value)}handleInvalid(){this.valid=false;if(this.customValidityMessage==undefined){this.customValidityMessage=this.textarea.validationMessage}}handleChange(){this.valueChange.emit(this.value);if(this.name!=undefined){var t=new FormData;t.append(this.name,this.value.toString());this.internals.setFormValue(t)}}shouldLabelFloat(){if(this.focused){return false}if(this.value!=undefined&&this.value!=""){return false}return true}render(){var t;return e(s,{key:"dbc7de88630e93d1bc75ba0f29b4d492d433ed3f",tabIndex:this.focused?-1:0,onFocus:()=>this.textarea.focus(),onBlur:()=>this.textarea.blur()},e("dnn-fieldset",{key:"5c95dfbf4564daa898d9d14ca5dfa4fdff8a9007",ref:t=>this.fieldset=t,invalid:!this.valid,focused:this.focused,resizable:this.resizable,label:`${(t=this.label)!==null&&t!==void 0?t:""}${this.required?" *":""}`,helpText:this.helpText,disabled:this.disabled,id:this.labelId,floatLabel:this.shouldLabelFloat(),onClick:()=>!this.focused&&this.textarea.focus()},e("textarea",{key:"a09f9af15bc8e79111975edeafac7f35cd097133",ref:t=>this.textarea=t,name:this.name,value:this.value,required:this.required,onBlur:()=>this.focused=false,onFocus:()=>this.focused=true,onChange:()=>this.handleChange(),onInput:t=>this.handleInput(t.target.value),onInvalid:()=>this.handleInvalid(),disabled:this.disabled,autoComplete:this.autocomplete,minlength:this.minlength,maxlength:this.maxlength,readonly:this.readonly,"aria-labelledby":this.labelId,rows:this.rows})))}static get formAssociated(){return true}};d.style=o;export{d as dnn_textarea};
+//# sourceMappingURL=p-793481e9.entry.js.map

package/dist/dnn/p-793481e9.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["dnnTextareaCss","DnnTextareaStyle0","DnnTextarea","checkValidity","this","textarea","validity","setCustomValidity","message","undefined","valid","fieldset","setValidity","customValidityMessage","componentWillLoad","labelId","generateRandomId","componentDidLoad","style","minHeight","rows","formResetCallback","value","internals","setFormValue","handleInput","valueInput","emit","handleInvalid","validationMessage","handleChange","valueChange","name","data","FormData","append","toString","shouldLabelFloat","focused","render","h","Host","key","tabIndex","onFocus","focus","onBlur","blur","ref","el","invalid","resizable","label","_a","required","helpText","disabled","id","floatLabel","onClick","onChange","onInput","e","target","onInvalid","autoComplete","autocomplete","minlength","maxlength","readonly"],"sources":["src/components/dnn-textarea/dnn-textarea.scss?tag=dnn-textarea&encapsulation=shadow","src/components/dnn-textarea/dnn-textarea.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n\n    /** @prop --foreground-color: Defines the foreground color. */\n    --foreground-color: var(--dnn-color-foreground, #000);\n\n    /** @prop --background-color: Defines the background color. */\n    --background-color: var(--dnn-color-background, #fff);\n  \n    /** @prop --focus-color: Defines the color when the component is focused. */\n    --focus-color: var(--dnn-color-primary, #3792ED);\n  \n    /** @prop --danger-color: Defines the danger color used for invalid data. */\n    --danger-color: var(--dnn-color-danger, #900);\n  \n    /** @prop --control-radius: Defines the radius for the control corners. */\n    --control-radius: var(--dnn-controls-radius, 3px);\n}\n\ndnn-fieldset{\n  width: 100%;\n}\n\ntextarea{\n  border: none;\n  outline: none;\n  background-color: transparent;\n  color: var(--foreground-color);\n  width: calc(100% - 1em);\n  height: calc(100% - 1em);\n  line-height: 1.5em;\n  resize: none;\n}\n\ndnn-fieldset{\n  --fieldset-foreground-color: var(--foreground-color);\n  --fieldset-background-color: var(--background-color);\n  --fieldset-focus-color: var(--focus-color);\n  --fieldset-danger-color: var(--danger-color);\n  --fieldset-control-radius: var(--control-radius);\n}","import { Component, Host, h, Prop, AttachInternals, State, Event, EventEmitter, Method } from '@stencil/core';\nimport { generateRandomId } from '../../utilities/stringUtilities';\n\n/** A custom textarea component. */\n@Component({\n  tag: 'dnn-textarea',\n  styleUrl: 'dnn-textarea.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class DnnTextarea {\n  /** Can be set to change how the user can resize the field. */\n  @Prop() resizable: \"none\" | \"both\" | \"horizontal\" | \"vertical\" | \"block\" | \"inline\" = \"block\";\n\n  /** Sets the value of the textarea. */\n  @Prop({mutable: true}) value: string;\n\n  /** The label for this input. */\n  @Prop() label: string;\n\n  /** The name for this input 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 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  /** Defines the type of auto-completion to use for this field, see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete. */\n  @Prop() autocomplete: string = \"off\";\n\n  /** Defines the minimum amount of charaters. */\n  @Prop() minlength: number;\n\n  /** Defines the maximum amount of charaters. */\n  @Prop() maxlength: number;\n\n  /** Defines wheter the defined value is readonly. */\n  @Prop() readonly: boolean;\n\n  /** Defines how many rows (lines of text) to initially show. */\n  @Prop() rows: number = 3;\n\n  /** Fires when the using is inputing data (on keystrokes). */\n  @Event() valueInput: EventEmitter<string>;\n\n  /** Fires when the value has changed and the user exits the input. */\n  @Event() valueChange: 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.textarea.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.textarea.setCustomValidity(\"\");\n      this.valid = true;\n      this.fieldset.setValidity(true);\n      return;\n    }\n\n    this.customValidityMessage = message;\n    this.valid = false;\n    this.textarea.setCustomValidity(message);\n  }\n\n  @State() focused = false;\n  @State() valid = true;\n  @State() customValidityMessage: string;\n\n  @AttachInternals() internals: ElementInternals;\n  \n  private textarea: HTMLTextAreaElement;\n  private fieldset: HTMLDnnFieldsetElement;\n  private labelId: string;\n\n  componentWillLoad() {\n    this.labelId = generateRandomId();\n  }\n\n  componentDidLoad() {\n    this.textarea.style.minHeight = `${this.rows * 1.5}em`;\n  }\n\n  // eslint-disable-next-line @stencil-community/own-methods-must-be-private\n  formResetCallback() {\n    this.textarea.setCustomValidity(\"\");\n    this.valid = true;\n    this.value = \"\";\n    this.internals.setValidity({});\n    this.internals.setFormValue(\"\");\n  }\n\n  private handleInput(value: string): void {\n    this.value = value;\n    var valid = this.textarea.checkValidity();\n    this.valid = valid;\n    this.valueInput.emit(this.value);\n  }\n\n  private handleInvalid(): void {\n    this.valid = false;\n    if (this.customValidityMessage == undefined){\n      this.customValidityMessage = this.textarea.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  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  render() {\n    return (\n      <Host\n        tabIndex={this.focused ? -1 : 0}\n        onFocus={() => this.textarea.focus()}\n        onBlur={() => this.textarea.blur()}\n      >\n        <dnn-fieldset\n          ref={el => this.fieldset = el}\n          invalid={!this.valid}\n          focused={this.focused}\n          resizable={this.resizable}\n          label={`${this.label ?? \"\"}${this.required ? \" *\" : \"\"}`}\n          helpText={this.helpText}\n          disabled={this.disabled}\n          id={this.labelId}\n          floatLabel={this.shouldLabelFloat()}\n          onClick={() => !this.focused && this.textarea.focus()}\n        >\n          <textarea\n            ref={el => this.textarea = el}\n            name={this.name}\n            value={this.value}\n            required={this.required}\n            onBlur={() => this.focused = false}\n            onFocus={() => this.focused=true}\n            onChange={() => this.handleChange()}\n            onInput={e => this.handleInput((e.target as HTMLTextAreaElement).value)}\n            onInvalid={() => this.handleInvalid()}\n            disabled={this.disabled}\n            autoComplete={this.autocomplete}\n            minlength={this.minlength}\n            maxlength={this.maxlength}\n            readonly={this.readonly}\n            aria-labelledby={this.labelId}\n            rows={this.rows}\n          />\n        </dnn-fieldset>\n      </Host>\n    );\n  }\n\n}\n"],"mappings":"6FAAA,MAAMA,EAAiB,mtBACvB,MAAAC,EAAeD,E,MCSFE,EAAW,M,wRAEgE,Q,wJAqBvD,M,oFAYR,E,aA6BJ,M,WACF,K,qCApBjB,mBAAMC,GACJ,OAAOC,KAAKC,SAASC,Q,CAKvB,uBAAMC,CAAkBC,GACtB,GAAIA,GAAWC,WAAaD,GAAW,GAAI,CACzCJ,KAAKC,SAASE,kBAAkB,IAChCH,KAAKM,MAAQ,KACbN,KAAKO,SAASC,YAAY,MAC1B,M,CAGFR,KAAKS,sBAAwBL,EAC7BJ,KAAKM,MAAQ,MACbN,KAAKC,SAASE,kBAAkBC,E,CAalC,iBAAAM,GACEV,KAAKW,QAAUC,G,CAGjB,gBAAAC,GACEb,KAAKC,SAASa,MAAMC,UAAY,GAAGf,KAAKgB,KAAO,O,CAIjD,iBAAAC,GACEjB,KAAKC,SAASE,kBAAkB,IAChCH,KAAKM,MAAQ,KACbN,KAAKkB,MAAQ,GACblB,KAAKmB,UAAUX,YAAY,IAC3BR,KAAKmB,UAAUC,aAAa,G,CAGtB,WAAAC,CAAYH,GAClBlB,KAAKkB,MAAQA,EACb,IAAIZ,EAAQN,KAAKC,SAASF,gBAC1BC,KAAKM,MAAQA,EACbN,KAAKsB,WAAWC,KAAKvB,KAAKkB,M,CAGpB,aAAAM,GACNxB,KAAKM,MAAQ,MACb,GAAIN,KAAKS,uBAAyBJ,UAAU,CAC1CL,KAAKS,sBAAwBT,KAAKC,SAASwB,iB,EAIvC,YAAAC,GACN1B,KAAK2B,YAAYJ,KAAKvB,KAAKkB,OAC3B,GAAIlB,KAAK4B,MAAQvB,UAAU,CACzB,IAAIwB,EAAO,IAAIC,SACfD,EAAKE,OAAO/B,KAAK4B,KAAM5B,KAAKkB,MAAMc,YAClChC,KAAKmB,UAAUC,aAAaS,E,EAIxB,gBAAAI,GACN,GAAIjC,KAAKkC,QAAS,CAChB,OAAO,K,CAGT,GAAIlC,KAAKkB,OAASb,WAAaL,KAAKkB,OAAS,GAAI,CAC/C,OAAO,K,CAGT,OAAO,I,CAGT,MAAAiB,G,MACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,SAAUvC,KAAKkC,SAAW,EAAI,EAC9BM,QAAS,IAAMxC,KAAKC,SAASwC,QAC7BC,OAAQ,IAAM1C,KAAKC,SAAS0C,QAE5BP,EAAA,gBAAAE,IAAA,2CACEM,IAAKC,GAAM7C,KAAKO,SAAWsC,EAC3BC,SAAU9C,KAAKM,MACf4B,QAASlC,KAAKkC,QACda,UAAW/C,KAAK+C,UAChBC,MAAO,IAAGC,EAAAjD,KAAKgD,SAAK,MAAAC,SAAA,EAAAA,EAAI,KAAKjD,KAAKkD,SAAW,KAAO,KACpDC,SAAUnD,KAAKmD,SACfC,SAAUpD,KAAKoD,SACfC,GAAIrD,KAAKW,QACT2C,WAAYtD,KAAKiC,mBACjBsB,QAAS,KAAOvD,KAAKkC,SAAWlC,KAAKC,SAASwC,SAE9CL,EAAA,YAAAE,IAAA,2CACEM,IAAKC,GAAM7C,KAAKC,SAAW4C,EAC3BjB,KAAM5B,KAAK4B,KACXV,MAAOlB,KAAKkB,MACZgC,SAAUlD,KAAKkD,SACfR,OAAQ,IAAM1C,KAAKkC,QAAU,MAC7BM,QAAS,IAAMxC,KAAKkC,QAAQ,KAC5BsB,SAAU,IAAMxD,KAAK0B,eACrB+B,QAASC,GAAK1D,KAAKqB,YAAaqC,EAAEC,OAA+BzC,OACjE0C,UAAW,IAAM5D,KAAKwB,gBACtB4B,SAAUpD,KAAKoD,SACfS,aAAc7D,KAAK8D,aACnBC,UAAW/D,KAAK+D,UAChBC,UAAWhE,KAAKgE,UAChBC,SAAUjE,KAAKiE,SAAQ,kBACNjE,KAAKW,QACtBK,KAAMhB,KAAKgB,Q","ignoreList":[]}

package/dist/dnn/p-a44c4df1.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as i,h as e,H as s,g as r}from"./p-91d08ab2.js";import{g as o}from"./p-5df01911.js";const n=":host{display:inline-block;--foreground-color:var(--dnn-color-foreground, #000);--background-color:var(--dnn-color-background, #fff);--focus-color:var(--dnn-color-primary, #3792ED);--danger-color:var(--dnn-color-danger, #900);--control-radius:var(--dnn-controls-radius, 3px);--input-text-align:left}dnn-fieldset{width:100%}.inner-container{display:flex;justify-content:space-between;position:relative;width:100%;background-color:var(--background-color)}select{border:none;outline:none;background-color:var(--background-color);color:var(--foreground-color);text-align:var(--input-text-align);width:100%;cursor:pointer}.prefix,.suffix{font-size:0.8em}svg.error{fill:red;width:1em;height:1em;transform:scale(1.5)}dnn-fieldset{--fieldset-foreground-color:var(--foreground-color);--fieldset-background-color:var(--background-color);--fieldset-focus-color:var(--focus-color);--fieldset-danger-color:var(--danger-color);--fieldset-control-radius:var(--control-radius)}";const a=n;const h=class{constructor(e){t(this,e);this.valueChange=i(this,"valueChange",7);if(e.$hostElement$["s-ei"]){this.internals=e.$hostElement$["s-ei"]}else{this.internals=e.$hostElement$.attachInternals();e.$hostElement$["s-ei"]=this.internals}this.label=undefined;this.name=undefined;this.required=undefined;this.helpText=undefined;this.disabled=undefined;this.disableValidityReporting=undefined;this.autocomplete="off";this.value=undefined;this.focused=false;this.valid=true;this.customValidityMessage=undefined}async checkValidity(){var t=this.select.checkValidity();if(!t){this.fieldset.setValidity(false,this.select.validationMessage)}return this.select.validity}componentWillLoad(){this.originalValue=this.value;this.labelId=o();this.observer=new MutationObserver((t=>{for(let i of t){if(i.type==="childList"){this.applySlottedItemsToSelect()}}}));const t={attributes:true,childList:true,subtree:true};this.observer.observe(this.el,t)}componentDidLoad(){requestAnimationFrame((()=>{var t=this.select.validity;var i=t.valid?"":this.select.validationMessage;this.internals.setValidity(this.select.validity,i);this.applySlottedItemsToSelect();this.setFormValue()}))}formResetCallback(){this.internals.setValidity({});this.value=this.originalValue;this.internals.setFormValue("");this.select.selectedIndex=-1}applySlottedItemsToSelect(){var t;const i=(t=this.slot)===null||t===void 0?void 0:t.assignedElements();i===null||i===void 0?void 0:i.forEach((t=>{if(t.nodeName==="OPTION"){const i=t;this.select.appendChild(i)}}))}setFormValue(){if(this.name!=undefined){var t=new FormData;t.append(this.name,this.value);this.internals.setFormValue(t)}}handleChange(t){this.value=t;var i=this.select.checkValidity();this.valid=i;this.valueChange.emit(this.value);this.setFormValue();if(this.valid){this.internals.setValidity({});this.fieldset.setValidity(true)}else{this.internals.setValidity({customError:true},this.select.validationMessage);this.fieldset.setValidity(false,this.select.validationMessage)}}handleInvalid(){this.valid=false;if(this.customValidityMessage==undefined){this.customValidityMessage=this.select.validationMessage}}handleBlur(){this.focused=false;var t=this.select.checkValidity();this.valid=t;this.fieldset.setValidity(t,this.select.validationMessage);this.internals.setValidity(this.select.validity,this.select.validationMessage)}render(){var t;return e(s,{key:"3ab6d0e08bb26d539989bcfab126228c79dcbda6",tabIndex:this.focused?-1:0,onFocus:()=>this.select.focus(),onBlur:()=>this.select.blur()},e("dnn-fieldset",{key:"3f8999f9c48f5858df122ab6a7af64f65b497e08",invalid:!this.valid,focused:this.focused,label:`${(t=this.label)!==null&&t!==void 0?t:""}${this.required?" *":""}`,helpText:this.helpText,id:this.labelId,onClick:()=>!this.focused&&this.select.focus(),ref:t=>this.fieldset=t},e("div",{key:"9bceeb3f3f1eb50abd25b78180a71e1ddbcfc693",class:"inner-container"},e("select",{key:"a94c7ff96ca40509bf3457aa72da53e761a2464a",ref:t=>this.select=t,autoComplete:this.autocomplete,onFocus:()=>this.focused=true,onBlur:()=>this.handleBlur(),onChange:t=>this.handleChange(t.target.value),onInvalid:()=>this.handleInvalid(),required:this.required,disabled:this.disabled,"aria-labelledby":this.labelId},e("slot",{key:"ce93edb423f2981529eea591024b6d073c619421",ref:t=>this.slot=t})),!this.valid&&e("svg",{key:"ab5151d56e6390acc6acfd7f0d737796170ba05b",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 -960 960 960",class:"error"},e("path",{key:"7394f15bb7815799a825c3ac848698efd2b28078",d:"M479.982-280q14.018 0 23.518-9.482 9.5-9.483 9.5-23.5 0-14.018-9.482-23.518-9.483-9.5-23.5-9.5-14.018 0-23.518 9.482-9.5 9.483-9.5 23.5 0 14.018 9.482 23.518 9.483 9.5 23.5 9.5ZM453-433h60v-253h-60v253Zm27.266 353q-82.734 0-155.5-31.5t-127.266-86q-54.5-54.5-86-127.341Q80-397.681 80-480.5q0-82.819 31.5-155.659Q143-709 197.5-763t127.341-85.5Q397.681-880 480.5-880q82.819 0 155.659 31.5Q709-817 763-763t85.5 127Q880-563 880-480.266q0 82.734-31.5 155.5T763-197.684q-54 54.316-127 86Q563-80 480.266-80Zm.234-60Q622-140 721-239.5t99-241Q820-622 721.188-721 622.375-820 480-820q-141 0-240.5 98.812Q140-622.375 140-480q0 141 99.5 240.5t241 99.5Zm-.5-340Z"})))))}static get formAssociated(){return true}get el(){return r(this)}};h.style=a;export{h as dnn_select};
+//# sourceMappingURL=p-a44c4df1.entry.js.map

package/dist/dnn/p-a44c4df1.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["dnnSelectCss","DnnSelectStyle0","DnnSelect","checkValidity","validity","this","select","fieldset","setValidity","validationMessage","componentWillLoad","originalValue","value","labelId","generateRandomId","observer","MutationObserver","mutations","mutation","type","applySlottedItemsToSelect","config","attributes","childList","subtree","observe","el","componentDidLoad","requestAnimationFrame","validityMessage","valid","internals","setFormValue","formResetCallback","selectedIndex","slottedItems","_a","slot","assignedElements","forEach","item","nodeName","optionElement","appendChild","name","undefined","data","FormData","append","handleChange","valueChange","emit","customError","handleInvalid","customValidityMessage","handleBlur","focused","render","h","Host","key","tabIndex","onFocus","focus","onBlur","blur","invalid","label","required","helpText","id","onClick","ref","class","autoComplete","autocomplete","onChange","e","target","onInvalid","disabled","xmlns","viewBox","d"],"sources":["src/components/dnn-select/dnn-select.scss?tag=dnn-select&encapsulation=shadow","src/components/dnn-select/dnn-select.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n\n  /** @prop --foreground-color: Defines the foreground color. */\n  --foreground-color: var(--dnn-color-foreground, #000);\n\n  /** @prop --background-color: Defines the background color. */\n  --background-color: var(--dnn-color-background, #fff);\n\n  /** @prop --focus-color: Defines the color when the component is focused. */\n  --focus-color: var(--dnn-color-primary, #3792ED);\n\n  /** @prop --danger-color: Defines the danger color used for invalid data. */\n  --danger-color: var(--dnn-color-danger, #900);\n\n  /** @prop --control-radius: Defines the radius for the control corners. */\n  --control-radius: var(--dnn-controls-radius, 3px);\n \n  /** @prop --input-text-align: Allows customizing the text alignment of the input text. */\n  --input-text-align: left;\n}\n\ndnn-fieldset{\n  width: 100%;\n}\n\n.inner-container{\n  display: flex;\n  justify-content: space-between;\n  position: relative;\n  width: 100%;\n  background-color: var(--background-color);\n}\n\nselect{\n  border: none;\n  outline: none;\n  background-color: var(--background-color);\n  color: var(--foreground-color);\n  text-align: var(--input-text-align);\n  width: 100%;\n  cursor: pointer; \n}\n\n.prefix, .suffix{\n  font-size: 0.8em;\n}\nsvg{\n  &.error{\n    fill: red;\n    width: 1em;\n    height: 1em;\n    transform: scale(1.5);\n  }\n}\n\ndnn-fieldset{\n  --fieldset-foreground-color: var(--foreground-color);\n  --fieldset-background-color: var(--background-color);\n  --fieldset-focus-color: var(--focus-color);\n  --fieldset-danger-color: var(--danger-color);\n  --fieldset-control-radius: var(--control-radius);\n}","import { Component, Element, Host, Prop, h, State, Event, EventEmitter, AttachInternals, Method } from '@stencil/core';\nimport { generateRandomId } from '../../utilities/stringUtilities';\n\n@Component({\n  tag: 'dnn-select',\n  styleUrl: 'dnn-select.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class DnnSelect {\n\n  /** The label for this input. */\n  @Prop() label: string;\n\n  /** The name for this input, if used in forms. */\n  @Prop() name: string;\n\n  /** Defines whether the field requires having a value. */\n  @Prop() required: boolean;\n\n  /** Defines the help label displayed under the field. */\n  @Prop() helpText: string;\n  \n  /** Defines whether the field is disabled. */\n  @Prop() disabled: boolean;\n  \n  /** @deprecated This control has its own validatin reporting, will be removed in v0.25.0 */\n  @Prop() disableValidityReporting: boolean;\n\n  /** Defines the type of automatic completion the browser can use.\n   * See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\n   */\n  @Prop() autocomplete = \"off\";\n  \n  /** The value of the input. */\n  @Prop({mutable: true, reflect:true}) value: string;\n  \n  @Element() el: HTMLDnnSelectElement;\n  \n  @State() focused: boolean = false;\n  @State() valid = true;\n  @State() customValidityMessage: string;\n\n  /** Fires when the value has changed and the user exits the input. */\n  @Event() valueChange: 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() {\n    var validity = this.select.checkValidity();\n    if (!validity) {\n      this.fieldset.setValidity(false, this.select.validationMessage);\n    }\n    return this.select.validity;\n  }\n  \n  @AttachInternals() internals: ElementInternals;\n  \n  private slot: HTMLSlotElement;\n  private select: HTMLSelectElement;\n  private observer: MutationObserver;\n  private labelId: string;\n  private originalValue: string;\n  private fieldset: HTMLDnnFieldsetElement;\n  \n  componentWillLoad() {\n    this.originalValue = this.value;\n    this.labelId = generateRandomId();\n    this.observer = new MutationObserver((mutations) => {\n      for (let mutation of mutations) {\n        if (mutation.type === 'childList') {\n          this.applySlottedItemsToSelect();\n        }\n      }\n    });\n\n    const config = { attributes: true, childList: true, subtree: true };\n    this.observer.observe(this.el, config);\n  }\n  \n  componentDidLoad() {\n    requestAnimationFrame(() => {\n      var validity = this.select.validity;\n      var validityMessage = validity.valid ? \"\" : this.select.validationMessage;\n      this.internals.setValidity(this.select.validity, validityMessage);\n      this.applySlottedItemsToSelect();\n      this.setFormValue();\n    });\n  }\n\n  // eslint-disable-next-line @stencil-community/own-methods-must-be-private\n  formResetCallback() {\n    this.internals.setValidity({});\n    this.value = this.originalValue;\n    this.internals.setFormValue(\"\");\n    this.select.selectedIndex = -1;\n  }\n\n  private applySlottedItemsToSelect () {\n    const slottedItems = this.slot?.assignedElements();\n    slottedItems?.forEach((item) => {\n      if (item.nodeName === \"OPTION\") {\n        const optionElement = item as HTMLOptionElement;\n        this.select.appendChild(optionElement);\n      }\n    });\n  }\n\n  private setFormValue(){\n    if (this.name != undefined){\n      var data = new FormData();\n      data.append(this.name, this.value);\n      this.internals.setFormValue(data);\n    }\n  }\n\n  private handleChange(value: string) {\n    this.value = value;\n    var valid = this.select.checkValidity();\n    this.valid = valid;\n    this.valueChange.emit(this.value);\n    this.setFormValue();\n    if (this.valid){\n      this.internals.setValidity({});\n      this.fieldset.setValidity(true);\n    }\n    else{\n      this.internals.setValidity({customError: true}, this.select.validationMessage);\n      this.fieldset.setValidity(false, this.select.validationMessage);\n    }\n  }\n\n  private handleInvalid(): void {\n    this.valid = false;\n    if (this.customValidityMessage == undefined){\n      this.customValidityMessage = this.select.validationMessage;\n    }\n  }\n\n  private handleBlur(): void {\n    this.focused = false\n    var validity = this.select.checkValidity();\n    this.valid = validity;\n    this.fieldset.setValidity(validity, this.select.validationMessage);\n    this.internals.setValidity(this.select.validity, this.select.validationMessage);\n  }\n\n  render() {\n    return (\n      <Host\n        tabIndex={this.focused ? -1 : 0}\n        onFocus={() => this.select.focus()}\n        onBlur={() => this.select.blur()}\n      >\n        <dnn-fieldset\n          invalid={!this.valid}\n          focused={this.focused}\n          label={`${this.label ?? \"\"}${this.required ? \" *\" : \"\"}`}\n          helpText={this.helpText}\n          id={this.labelId}\n          onClick={() => !this.focused && this.select.focus()}\n          ref={el => this.fieldset = el}\n        >\n          <div class=\"inner-container\">\n            <select\n              ref={el => this.select = el}\n              autoComplete={this.autocomplete}\n              onFocus={() => this.focused = true}\n              onBlur={() => this.handleBlur()}\n              onChange={e => this.handleChange((e.target as HTMLSelectElement).value)}\n              onInvalid={() => this.handleInvalid()}\n              required={this.required}\n              disabled={this.disabled}\n              aria-labelledby={this.labelId}\n            >\n              <slot ref={el => this.slot = (el as HTMLSlotElement)}></slot>\n            </select>\n            {!this.valid &&\n              <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 -960 960 960\" class=\"error\">\n                <path d=\"M479.982-280q14.018 0 23.518-9.482 9.5-9.483 9.5-23.5 0-14.018-9.482-23.518-9.483-9.5-23.5-9.5-14.018 0-23.518 9.482-9.5 9.483-9.5 23.5 0 14.018 9.482 23.518 9.483 9.5 23.5 9.5ZM453-433h60v-253h-60v253Zm27.266 353q-82.734 0-155.5-31.5t-127.266-86q-54.5-54.5-86-127.341Q80-397.681 80-480.5q0-82.819 31.5-155.659Q143-709 197.5-763t127.341-85.5Q397.681-880 480.5-880q82.819 0 155.659 31.5Q709-817 763-763t85.5 127Q880-563 880-480.266q0 82.734-31.5 155.5T763-197.684q-54 54.316-127 86Q563-80 480.266-80Zm.234-60Q622-140 721-239.5t99-241Q820-622 721.188-721 622.375-820 480-820q-141 0-240.5 98.812Q140-622.375 140-480q0 141 99.5 240.5t241 99.5Zm-.5-340Z\"/>\n              </svg>\n            }\n          </div>\n        </dnn-fieldset>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/dnn/p-edc588c2.entry.js

@@ -0,0 +1,2 @@
+import{r as e,h as o,H as i}from"./p-91d08ab2.js";const r=":host{display:inline-block;--fieldset-foreground-color:var(--dnn-color-foreground, #000);--fieldset-background-color:var(--dnn-color-background, #fff);--fieldset-focus-color:var(--dnn-color-primary, #3792ED);--fieldset-danger-color:var(--dnn-color-danger, #900);--fieldset-control-radius:var(--dnn-controls-radius, 3px)}.container{border:1px solid var(--fieldset-foreground-color, #000);border-radius:var(--fieldset-control-radius, 3px);padding:0.75em;display:flex;justify-content:space-between;gap:0.1em;position:relative;background-color:var(--fieldset-background-color);margin-top:1em;line-height:1em}.container .resizer{width:100%}.container .inner-container{position:relative;width:100%;background-color:var(--fieldset-background-color);height:calc(100% - 1em)}.container label{display:inline-flex;position:absolute;opacity:1;transition:all 150ms ease-in-out;left:0.5em;top:-1.5em;padding:0 0.5em;background-color:var(--fieldset-background-color);white-space:nowrap;max-width:100%;border-radius:var(--fieldset-control-radius);font-size:1em;margin-top:1em;z-index:1;pointer-events:none;line-height:1em}.container.focused{border:1px solid var(--fieldset-focus-color);box-shadow:0 0 0 1px var(--fieldset-focus-color)}.container.focused.invalid{border:1px solid var(--fieldset-danger-color);box-shadow:0 0 0 1px var(--fieldset-danger-color)}.container.focused input{color:var(--fieldset-foreground-color, #000)}.container.float-label label{opacity:0.6;left:0;top:calc(50% - 0.5em);margin-top:0}.container.disabled{opacity:0.5}.container.invalid{border-color:var(--fieldset-danger-color)}.help-text,.error-message{font-style:italic;opacity:0.7;font-size:0.8em;margin:0.25em}.error-message{color:var(--fieldset-danger-color);font-style:normal;font-weight:bold}";const s=r;const a=class{constructor(o){e(this,o);this.focused=undefined;this.disabled=undefined;this.invalid=undefined;this.label=undefined;this.floatLabel=undefined;this.helpText=undefined;this.resizable="none";this.customValidityMessage=undefined}async setFocused(){this.focused=true}async setBlurred(){this.focused=false}async disable(){this.disabled=true}async enable(){this.disabled=false}async pinLabel(){this.floatLabel=false}async unpinLabel(){this.floatLabel=true}async setValidity(e,o){this.invalid=!e;this.customValidityMessage=o}getContainerClasses(){const e=["container"];if(this.focused){e.push("focused")}if(this.disabled){e.push("disabled")}if(this.invalid){e.push("invalid")}if(this.floatLabel&&!this.focused){e.push("float-label")}return e.join(" ")}render(){return o(i,{key:"f97ae39c92d41cd55c68e49726d2d03cd95d5a4e"},o("div",{key:"428c954731215899b0b8d85132c93d2452dabf1d",class:this.getContainerClasses()},this.label&&o("label",{key:"1430170d4d130c7174f4bb369520ecff89e42b23"},o("slot",{key:"381665dc530db579968d89fe826f081b4d7c0957",name:"label-prefix"}),this.label,o("slot",{key:"513395e461546b1b3cf214c59f4afe5ba580ffd9",name:"label-suffix"})),o("div",{key:"621ddedaf8da8d3e79346778a70e9de7039483fe",class:"resizer",style:{resize:this.resizable,overflow:this.resizable=="none"?"visible":"auto"}},o("div",{key:"42b3cd52e1a8182abfc3eba043ab79b80f15d310",class:"inner-container"},o("slot",{key:"a4225c9af1d7e2fd613e0b3b1975c53ef98e8448"})))),this.invalid&&this.customValidityMessage&&o("div",{key:"917c3db73b9eef42934152494cf0cb03e94082df",class:"error-message"},this.customValidityMessage),!this.invalid&&o("div",{key:"5300002ff371d1b32292831e7849db4d985059c1",class:"help-text"},this.helpText))}};a.style=s;export{a as dnn_fieldset};
+//# sourceMappingURL=p-edc588c2.entry.js.map

package/dist/dnn/p-edc588c2.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["dnnFieldsetCss","DnnFieldsetStyle0","DnnFieldset","setFocused","this","focused","setBlurred","disable","disabled","enable","pinLabel","floatLabel","unpinLabel","setValidity","valid","message","invalid","customValidityMessage","getContainerClasses","classes","push","join","render","h","Host","key","class","label","name","style","resize","resizable","overflow","helpText"],"sources":["src/components/dnn-fieldset/dnn-fieldset.scss?tag=dnn-fieldset&encapsulation=shadow","src/components/dnn-fieldset/dnn-fieldset.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n\n  /** @prop --fieldset-foreground-color: Defines the foreground color. */\n  --fieldset-foreground-color: var(--dnn-color-foreground, #000);\n\n  /** @prop --fieldset-background-color: Defines the background color. */\n  --fieldset-background-color: var(--dnn-color-background, #fff);\n\n  /** @prop --focus-color: Defines the color when the component is focused. */\n  --fieldset-focus-color: var(--dnn-color-primary, #3792ED);\n\n  /** @prop --danger-color: Defines the danger color used for invalid data. */\n  --fieldset-danger-color: var(--dnn-color-danger, #900);\n\n  /** @prop --control-radius: Defines the radius for the control corners. */\n  --fieldset-control-radius: var(--dnn-controls-radius, 3px);\n}\n\n.container{\n  border: 1px solid var(--fieldset-foreground-color, #000);\n  border-radius: var(--fieldset-control-radius, 3px);\n  padding: 0.75em;\n  display: flex;\n  justify-content: space-between;\n  gap: 0.1em;\n  position: relative;\n  background-color: var(--fieldset-background-color);\n  margin-top: 1em;\n  line-height: 1em;\n  .resizer{\n    width: 100%;\n  }\n  .inner-container{\n    position: relative;\n    width: 100%;\n    background-color: var(--fieldset-background-color);\n    height: calc(100% - 1em);\n  }\n  label{\n    display: inline-flex;\n    position: absolute;\n    opacity: 1;\n    transition: all 150ms ease-in-out;\n    left: 0.5em;\n    top: -1.5em;\n    padding: 0 0.5em;\n    background-color: var(--fieldset-background-color);\n    white-space: nowrap;\n    max-width: 100%;\n    border-radius: var(--fieldset-control-radius);\n    font-size: 1em;\n    margin-top: 1em;\n    z-index: 1;\n    pointer-events: none;\n    line-height: 1em;\n  }\n  &.focused{\n    border: 1px solid var(--fieldset-focus-color);\n    box-shadow: 0 0 0 1px var(--fieldset-focus-color);\n    &.invalid{\n      border: 1px solid var(--fieldset-danger-color);\n      box-shadow: 0 0 0 1px var(--fieldset-danger-color);\n    }\n    input{\n      color: var(--fieldset-foreground-color, #000);\n    }\n  }\n  &.float-label{\n    label{\n      opacity: 0.6;\n      left: 0;\n      top: calc(50% - 0.5em);\n      margin-top:0;\n    }\n  }\n  &.disabled{\n    opacity: 0.5;\n  }\n  &.invalid{\n    border-color: var(--fieldset-danger-color);\n  }\n}\n\n.help-text, .error-message{\n  font-style: italic;\n  opacity: 0.7;\n  font-size: 0.8em;\n  margin: 0.25em;\n}\n.error-message{\n  color: var(--fieldset-danger-color);\n  font-style: normal;\n  font-weight: bold;\n}","import { Component, Host, h, Prop, Method, State } from '@stencil/core';\n\n/** A custom input component that wraps the html input element is a mobile friendly component that supports a label, some help text and other features.\n * @slot label-prefix - Can be used to inject content before the labe.\n * @slot label-suffix - Can be used to inject content after the label.\n */\n@Component({\n  tag: 'dnn-fieldset',\n  styleUrl: 'dnn-fieldset.scss',\n  shadow: true,\n})\nexport class DnnFieldset {\n\n  /** If true the fieldset will display as focused. */\n  @Prop({mutable: true, reflect: true}) focused: boolean;\n\n  /** If true, the fieldset will display as disabled. */\n  @Prop({mutable: true, reflect: true}) disabled: boolean;\n\n  /** If true, the  fieldset will display as invalid. */\n  @Prop({mutable: true, reflect: true}) invalid: boolean;\n\n  /** Sets the text of the fieldset label (caption). */\n  @Prop() label: string;\n\n  /** If true, the label will float in the container, set false to show it on top. */\n  @Prop({mutable: true, reflect: true}) floatLabel: boolean;\n\n  /** Can be used to show some help text about this field. */\n  @Prop() helpText: string;\n\n  /** Can be set to specify if the fieldset can be resized by the user. */\n  @Prop() resizable: \"none\" | \"both\" | \"horizontal\" | \"vertical\" | \"block\" | \"inline\" = \"none\";\n\n  /** Sets the fieldset to the focused state. */\n  @Method()\n  async setFocused() {\n    this.focused = true;\n  }\n\n  /** Unsets the fieldset focused state. */\n  @Method()\n  async setBlurred() {\n    this.focused = false;\n  }\n\n  /** Sets the fieldset to a disabled state. */\n  @Method()\n  async disable() {\n    this.disabled = true;\n  }\n\n  /** Sets the fieldset to an enabled state. */\n  @Method()\n  async enable() {\n    this.disabled = false;\n  }\n\n  /** Places the label on the top of the container. */\n  @Method()\n  async pinLabel() {\n    this.floatLabel = false;\n  }\n\n  /** Places the label in the vertical middle of the container. */\n  @Method()\n  async unpinLabel() {\n    this.floatLabel = true;\n  }\n\n  /** Sets the validity of the field. */\n  @Method()\n  async setValidity(valid: boolean, message?: string) {\n    this.invalid = !valid;\n    this.customValidityMessage = message;\n  }\n\n  @State() customValidityMessage: string;\n\n  private getContainerClasses() {\n    const classes: string[] = [\"container\"];\n    if (this.focused) {\n      classes.push(\"focused\");\n    }\n\n    if (this.disabled)\n    {\n      classes.push(\"disabled\");\n    }\n\n    if (this.invalid){\n      classes.push(\"invalid\");\n    }\n\n    if (this.floatLabel && !this.focused)\n    {\n      classes.push(\"float-label\");\n    }\n\n    return classes.join(\" \");\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={this.getContainerClasses()}>\n          {this.label &&\n            <label>\n              <slot name=\"label-prefix\"></slot>\n              {this.label}\n              <slot name=\"label-suffix\"></slot>\n            </label>\n          }\n          <div class=\"resizer\" style={{resize: this.resizable, overflow: this.resizable == \"none\" ? \"visible\" : \"auto\"}}>\n            <div class=\"inner-container\">\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n        {this.invalid && this.customValidityMessage &&\n          <div class=\"error-message\">\n            {this.customValidityMessage}\n          </div>\n        }\n        {!this.invalid &&\n          <div class=\"help-text\">{this.helpText}</div>\n        }\n      </Host>\n    );\n  }\n\n}\n"],"mappings":"kDAAA,MAAMA,EAAiB,kuDACvB,MAAAC,EAAeD,E,MCUFE,EAAW,M,qLAqBgE,O,qCAItF,gBAAMC,GACJC,KAAKC,QAAU,I,CAKjB,gBAAMC,GACJF,KAAKC,QAAU,K,CAKjB,aAAME,GACJH,KAAKI,SAAW,I,CAKlB,YAAMC,GACJL,KAAKI,SAAW,K,CAKlB,cAAME,GACJN,KAAKO,WAAa,K,CAKpB,gBAAMC,GACJR,KAAKO,WAAa,I,CAKpB,iBAAME,CAAYC,EAAgBC,GAChCX,KAAKY,SAAWF,EAChBV,KAAKa,sBAAwBF,C,CAKvB,mBAAAG,GACN,MAAMC,EAAoB,CAAC,aAC3B,GAAIf,KAAKC,QAAS,CAChBc,EAAQC,KAAK,U,CAGf,GAAIhB,KAAKI,SACT,CACEW,EAAQC,KAAK,W,CAGf,GAAIhB,KAAKY,QAAQ,CACfG,EAAQC,KAAK,U,CAGf,GAAIhB,KAAKO,aAAeP,KAAKC,QAC7B,CACEc,EAAQC,KAAK,c,CAGf,OAAOD,EAAQE,KAAK,I,CAGtB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAOtB,KAAKc,uBACdd,KAAKuB,OACJJ,EAAA,SAAAE,IAAA,4CACEF,EAAA,QAAAE,IAAA,2CAAMG,KAAK,iBACVxB,KAAKuB,MACNJ,EAAA,QAAAE,IAAA,2CAAMG,KAAK,kBAGfL,EAAA,OAAAE,IAAA,2CAAKC,MAAM,UAAUG,MAAO,CAACC,OAAQ1B,KAAK2B,UAAWC,SAAU5B,KAAK2B,WAAa,OAAS,UAAY,SACpGR,EAAA,OAAAE,IAAA,2CAAKC,MAAM,mBACTH,EAAA,QAAAE,IAAA,gDAILrB,KAAKY,SAAWZ,KAAKa,uBACpBM,EAAA,OAAAE,IAAA,2CAAKC,MAAM,iBACRtB,KAAKa,wBAGRb,KAAKY,SACLO,EAAA,OAAAE,IAAA,2CAAKC,MAAM,aAAatB,KAAK6B,U","ignoreList":[]}

package/dist/dnn/p-fdee6fe3.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as t,h as o,H as i}from"./p-91d08ab2.js";import{g as d}from"./p-5df01911.js";const s=":host{display:inline-block;--foreground-color:var(--dnn-color-foreground, #000);--background-color:var(--dnn-color-background, #fff);--focus-color:var(--dnn-color-primary, #3792ED);--control-radius:var(--dnn-controls-radius, 3px);--contast-text-align:left}dnn-fieldset{width:100%}.inner-container{display:flex;justify-content:space-between;position:relative;width:100%;background-color:var(--background-color)}button{margin:0 0 0 1em;padding:0;border:none;background-color:transparent;width:1em;height:1em}button svg{fill:var(--dnn-color-primary);transform:scale(1.5)}.color-preview{min-height:1em;min-width:10em;display:flex;width:100%;position:relative}.color-preview>div{flex:1}.color-preview .contrast{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:space-around;align-items:center}.color-preview .contrast hr{min-width:1em;border-width:0.1em 0 0.1em 0;border-style:solid}h3{text-align:center}.modal-content{margin:0.5em}.controls{display:flex;justify-content:space-between;margin-top:1em}dnn-fieldset{--fieldset-foreground-color:var(--foreground-color);--fieldset-background-color:var(--background-color);--fieldset-focus-color:var(--focus-color);--fieldset-danger-color:var(--danger-color);--fieldset-control-radius:var(--control-radius)}";const c=s;const a=class{constructor(o){e(this,o);this.colorChange=t(this,"colorChange",7);this.colorInput=t(this,"colorInput",7);if(o.$hostElement$["s-ei"]){this.internals=o.$hostElement$["s-ei"]}else{this.internals=o.$hostElement$.attachInternals();o.$hostElement$["s-ei"]=this.internals}this.hasMultipleColors=()=>this.useContrastColor||this.useLightColor||this.useDarkColor;this.color="000088";this.contrastColor="FFFFFF";this.lightColor="00000FF";this.darkColor="0000044";this.label=undefined;this.readonly=undefined;this.localization={contrast:"Contrast",preview:"Preview",cancel:"Cancel",confirm:"Confirm",normal:"Normal",light:"Light",dark:"Dark"};this.name=undefined;this.helpText=undefined;this.useContrastColor=undefined;this.useLightColor=undefined;this.useDarkColor=undefined;this.currentColor=undefined;this.focused=undefined}currentColorChanged(e,t){if(e!=t){this.colorInput.emit(t);this.setFormValue()}}componentWillLoad(){this.labelId=d();this.currentColor={color:this.color,contrastColor:this.contrastColor,lightColor:this.lightColor,darkColor:this.darkColor};this.originalColor=this.currentColor}componentDidLoad(){this.setFormValue()}formResetCallback(){this.internals.setValidity({});this.color=this.originalColor.color;this.contrastColor=this.originalColor.contrastColor;this.lightColor=this.originalColor.lightColor;this.darkColor=this.originalColor.darkColor;this.currentColor=this.originalColor}showPicker(){this.currentColor={color:this.color,contrastColor:this.contrastColor,lightColor:this.lightColor,darkColor:this.darkColor};this.colorModal.show()}saveColor(){this.color=this.currentColor.color;this.contrastColor=this.currentColor.contrastColor;this.lightColor=this.currentColor.lightColor;this.darkColor=this.currentColor.darkColor;this.colorModal.hide();this.colorChange.emit(this.currentColor)}setFormValue(){if(this.name!=undefined){var e=new FormData;e.append(this.name,JSON.stringify(this.currentColor));this.internals.setFormValue(e)}}render(){var e,t,d,s,c;return o(i,{key:"722affca46b0605ab63409bd938f5032ea45db18",tabIndex:this.focused?-1:0,onFocus:()=>this.button.focus(),onBlur:()=>this.button.blur()},o("dnn-fieldset",{key:"c5d939a1bca9286398ff7d0fa652406bd4e6df3d",label:this.label,id:this.labelId,focused:this.focused,helpText:this.helpText},o("div",{key:"7fca976fe59f26e560cb2a4412d01356391308c2",class:"inner-container"},o("slot",{key:"3ec1651ac8ee6a4cdf40dc2d1bf9408aa611e559",name:"prefix"}),o("div",{key:"50b34dd1d2e8ff2d9999f87b9bd72ddfb577e5ee",class:"color-preview"},this.useLightColor&&o("div",{key:"5eb78240709025161e7011e040fddbe0fb8845da",style:{backgroundColor:`#${this.lightColor}`}}),o("div",{key:"18ae5db63545be3b824d445ee3045611de5fac47",style:{backgroundColor:`#${this.color}`}}),this.useDarkColor&&o("div",{key:"88ea0a66d09361aece5753aa2f116c824ce78edb",style:{backgroundColor:`#${this.darkColor}`}}),this.useContrastColor&&o("div",{key:"fe2f71930826ffcff305e25a7c47986dff2b9c16",class:"contrast",style:{color:`#${this.contrastColor}`}},o("hr",{key:"eef74b6b8d5176128c0a487d82827b2c4ac6aa07",style:{color:`#${this.contrastColor}`}}),o("span",{key:"6615c23bb06c50fc9ba36fd74066f8344a125303"},this.localization.contrast),o("hr",{key:"06421c535aa56fc8d8cefefd3087ce1d679679eb",style:{color:`#${this.contrastColor}`}}))),!this.readonly&&o("button",{key:"01766ed62e5e3af7831585370be5e4f563fddd83",ref:e=>this.button=e,"aria-labelledby":this.labelId,onClick:()=>this.showPicker(),onFocus:()=>this.focused=true,onBlur:()=>this.focused=false},o("svg",{key:"4b84477b59644d1c6d87c53d0143f7b4886e3a88",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 -960 960 960"},o("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"}))),o("slot",{key:"73fda889edbe3d375e4f5def837a06cd631494af",name:"suffix"}))),o("dnn-modal",{key:"48f0b7ecc4e187bf4d495725556f712c022094b2",ref:e=>this.colorModal=e,backdropDismiss:false},this.currentColor&&o("div",{key:"21e84f6b00f197952622c1726813dc3164844b35",class:"modal-content"},this.hasMultipleColors()&&o("dnn-tabs",{key:"a2d81adf564e9908c6586fb7fa551979f2e52e11"},o("dnn-tab",{key:"9df0030996b43c88a28265fabc6d68e2d4f4e947",tabTitle:this.localization.normal},o("dnn-color-picker",{key:"b89397aaf0a6ef2e852585f63863f7424fd5801d",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})})),this.useLightColor&&o("dnn-tab",{key:"03cba449faada93d9fc113c0106ab24345279f94",tabTitle:this.localization.light},o("dnn-color-picker",{key:"f2364df9c8e56af1539c032b45ebb4be6cb67cc7",color:(t=this.currentColor)===null||t===void 0?void 0:t.lightColor,onColorChanged:e=>this.currentColor=Object.assign(Object.assign({},this.currentColor),{lightColor:e.detail.hex})})),this.useDarkColor&&o("dnn-tab",{key:"7ce2accefcb3a7c4d9159311883309bf6f6d8255",tabTitle:this.localization.dark},o("dnn-color-picker",{key:"5d54a2ff099956daccb2b23dded73d6b6258d36a",color:(d=this.currentColor)===null||d===void 0?void 0:d.darkColor,onColorChanged:e=>this.currentColor=Object.assign(Object.assign({},this.currentColor),{darkColor:e.detail.hex})})),this.useContrastColor&&o("dnn-tab",{key:"c00615ce72d44510a10d1664b95ea685300c48d0",tabTitle:this.localization.contrast},o("dnn-color-picker",{key:"fe4ff29caf538dd459db0478ad56d3b35cb16602",color:(s=this.currentColor)===null||s===void 0?void 0:s.contrastColor,onColorChanged:e=>this.currentColor=Object.assign(Object.assign({},this.currentColor),{contrastColor:e.detail.hex})}))),!this.hasMultipleColors()&&o("dnn-color-picker",{key:"0b016c6d2e48f00f018dd52f941a32498d2686f8",color:(c=this.currentColor)===null||c===void 0?void 0:c.color,onColorChanged:e=>this.currentColor=Object.assign(Object.assign({},this.currentColor),{color:e.detail.hex})}),o("h3",{key:"3f7d790877eab2603b404742dddc91caa4558078"},"Preview"),o("div",{key:"e406cb06b6bb09e1f42343e8c7a152dcaa583761",class:"color-preview"},this.useLightColor&&o("div",{key:"c6b3ad4d35ae6bb9bd2009b322c83c2a9b36e67e",style:{backgroundColor:`#${this.currentColor.lightColor}`}}),o("div",{key:"ce5a6482f603b72e25505048addae3718da56292",style:{backgroundColor:`#${this.currentColor.color}`}}),this.useDarkColor&&o("div",{key:"ab08de041e1403eae14aeee40637cacd2b65a236",style:{backgroundColor:`#${this.currentColor.darkColor}`}}),this.useContrastColor&&o("div",{key:"e4a34aa10934332c83bb0446c881c307e263bcce",class:"contrast",style:{color:`#${this.currentColor.contrastColor}`}},o("hr",{key:"8735a2c4427f9fdc8e112c0c395139d91fc4d336",style:{color:`#${this.currentColor.contrastColor}`}}),o("span",{key:"98e119f43c4a7c736e48940e59563a58a6c67df0"},this.localization.contrast),o("hr",{key:"fe6891f255cfbb9dd1662937e635a89f18ad853a",style:{color:`#${this.currentColor.contrastColor}`}}))),o("div",{key:"39dcff0c2dc1bf96d77c713f0163d11d21960e6d",class:"controls"},o("dnn-button",{key:"f86f95402a4495e0333710b14a14324ac751e630",reversed:true,onClick:()=>this.colorModal.hide()},this.localization.cancel),o("dnn-button",{key:"1b6558d0878a0e0e160c884677ba89484ca50ba2",onClick:()=>this.saveColor()},this.localization.confirm)))))}static get formAssociated(){return true}static get watchers(){return{currentColor:["currentColorChanged"]}}};a.style=c;export{a as dnn_color_input};
+//# sourceMappingURL=p-fdee6fe3.entry.js.map