@dnncommunity/dnn-elements 0.24.0-beta.1 → 0.24.0-beta.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/dnn-fieldset.cjs.entry.js +1 -1
- package/dist/cjs/dnn-fieldset.cjs.entry.js.map +1 -1
- package/dist/collection/components/dnn-fieldset/dnn-fieldset.css +2 -0
- package/dist/dnn/dnn.esm.js +1 -1
- package/dist/dnn/p-b553c159.entry.js +2 -0
- package/dist/dnn/p-b553c159.entry.js.map +1 -0
- package/dist/esm/dnn-fieldset.entry.js +1 -1
- package/dist/esm/dnn-fieldset.entry.js.map +1 -1
- package/package.json +1 -1
- package/dist/dnn/p-cb85f0af.entry.js +0 -2
- package/dist/dnn/p-cb85f0af.entry.js.map +0 -1
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-97332e7c.js');
|
|
6
6
|
|
|
7
|
-
const dnnFieldsetCss = ":host{display:inline-block;--fieldset-foreground:var(--dnn-color-foreground, #000);--fieldset-background: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, #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);margin-top:1em}.container .resizer{width:100%}.container .inner-container{position:relative;width:100%;background-color:var(--fieldset-background);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);white-space:nowrap;max-width:100%;border-radius:var(--fieldset-control-radius);font-size:1em;margin-top:1em;z-index:1;pointer-events:none}.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, #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}";
|
|
7
|
+
const dnnFieldsetCss = ":host{display:inline-block;--fieldset-foreground:var(--dnn-color-foreground, #000);--fieldset-background: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, #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);margin-top:1em;line-height:1em}.container .resizer{width:100%}.container .inner-container{position:relative;width:100%;background-color:var(--fieldset-background);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);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, #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}";
|
|
8
8
|
const DnnFieldsetStyle0 = dnnFieldsetCss;
|
|
9
9
|
|
|
10
10
|
const DnnFieldset = class {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"dnn-fieldset.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,
|
|
1
|
+
{"file":"dnn-fieldset.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,urDAAurD,CAAC;AAC/sD,0BAAe,cAAc;;MCUhB,WAAW;;;;;;;;;yBAqBgE,MAAM;;;;IAI5F,MAAM,UAAU;QACd,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;KACrB;;IAID,MAAM,UAAU;QACd,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;KACtB;;IAID,MAAM,OAAO;QACX,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;KACtB;;IAID,MAAM,MAAM;QACV,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;KACvB;;IAID,MAAM,QAAQ;QACZ,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;KACzB;;IAID,MAAM,UAAU;QACd,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;KACxB;;IAID,MAAM,WAAW,CAAC,KAAc,EAAE,OAAgB;QAChD,IAAI,CAAC,OAAO,GAAG,CAAC,KAAK,CAAC;QACtB,IAAI,CAAC,qBAAqB,GAAG,OAAO,CAAC;KACtC;IAIO,mBAAmB;QACzB,MAAM,OAAO,GAAa,CAAC,WAAW,CAAC,CAAC;QACxC,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;SACzB;QAED,IAAI,IAAI,CAAC,QAAQ,EACjB;YACE,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;SAC1B;QAED,IAAI,IAAI,CAAC,OAAO,EAAC;YACf,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;SACzB;QAED,IAAI,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,OAAO,EACpC;YACE,OAAO,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;SAC7B;QAED,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KAC1B;IAED,MAAM;QACJ,QACEA,QAACC,UAAI,uDACHD,kEAAK,KAAK,EAAE,IAAI,CAAC,mBAAmB,EAAE,IACnC,IAAI,CAAC,KAAK;YACTA,sEACEA,mEAAM,IAAI,EAAC,cAAc,GAAQ,EAChC,IAAI,CAAC,KAAK,EACXA,mEAAM,IAAI,EAAC,cAAc,GAAQ,CAC3B,EAEVA,kEAAK,KAAK,EAAC,SAAS,EAAC,KAAK,EAAE,EAAC,MAAM,EAAE,IAAI,CAAC,SAAS,EAAE,QAAQ,EAAE,IAAI,CAAC,SAAS,IAAI,MAAM,GAAG,SAAS,GAAG,MAAM,EAAC,IAC3GA,kEAAK,KAAK,EAAC,iBAAiB,IAC1BA,oEAAa,CACT,CACF,CACF,EACL,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,qBAAqB;YACzCA,kEAAK,KAAK,EAAC,eAAe,IACvB,IAAI,CAAC,qBAAqB,CACvB,EAEP,CAAC,IAAI,CAAC,OAAO;YACZA,kEAAK,KAAK,EAAC,WAAW,IAAE,IAAI,CAAC,QAAQ,CAAO,CAEzC,EACP;KACH;;;;;;","names":["h","Host"],"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 --foreground: Defines the foreground color. */\n --fieldset-foreground: var(--dnn-color-foreground, #000);\n\n /** @prop --background: Defines the background color. */\n --fieldset-background: 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, #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);\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);\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);\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, #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"],"version":3}
|
|
@@ -22,6 +22,7 @@
|
|
|
22
22
|
position: relative;
|
|
23
23
|
background-color: var(--fieldset-background);
|
|
24
24
|
margin-top: 1em;
|
|
25
|
+
line-height: 1em;
|
|
25
26
|
}
|
|
26
27
|
.container .resizer {
|
|
27
28
|
width: 100%;
|
|
@@ -48,6 +49,7 @@
|
|
|
48
49
|
margin-top: 1em;
|
|
49
50
|
z-index: 1;
|
|
50
51
|
pointer-events: none;
|
|
52
|
+
line-height: 1em;
|
|
51
53
|
}
|
|
52
54
|
.container.focused {
|
|
53
55
|
border: 1px solid var(--fieldset-focus-color);
|
package/dist/dnn/dnn.esm.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,b as l}from"./p-978abd50.js";export{s as setNonce}from"./p-978abd50.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-b96b7c4a",[[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-70b71aeb",[[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-40de6e57",[[65,"dnn-autocomplete",{label:[1],name:[1],helpText:[1,"help-text"],value:[1537],required:[4],disabled:[4],suggestions:[16],renderSuggestion:[16],totalSuggestions:[2,"total-suggestions"],preloadThresholdPixels:[2,"preload-threshold-pixels"],focused:[32],valid:[32],customValidityMessage:[32],selectedIndex:[32],positionInitialized:[32],lastScrollTop:[32],checkValidity:[64],setCustomValidity:[64]},[[4,"click","handleOutsideClick"]]]]],["p-510152fa",[[65,"dnn-input",{type:[1025],label:[1],name:[1],value:[1544],helpText:[1,"help-text"],required:[4],disabled:[4],autocomplete:[1],min:[8],max:[8],minlength:[2],maxlength:[2],multiple:[4],pattern:[1],readonly:[4],step:[8],disableValidityReporting:[4,"disable-validity-reporting"],allowShowPassword:[4,"allow-show-password"],focused:[32],valid:[32],checkValidity:[64],setCustomValidity:[64]}]]],["p-33cef64b",[[65,"dnn-select",{label:[1],name:[1],required:[4],helpText:[1,"help-text"],disabled:[4],disableValidityReporting:[4,"disable-validity-reporting"],value:[1537],focused:[32],valid:[32],customValidityMessage:[32],checkValidity:[64]}]]],["p-bdfd829e",[[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],focused:[32],valid:[32],customValidityMessage:[32],checkValidity:[64],setCustomValidity:[64]}]]],["p-8564bc60",[[1,"dnn-treeview-item",{expanded:[1540],hasChildren:[32],focused:[32]},null,{expanded:["watchExpanded"]}]]],["p-5b15b44a",[[1,"dnn-chevron",{expandText:[1,"expand-text"],collapseText:[1,"collapse-text"],expanded:[1540],focused:[32]},null,{expanded:["handleExpandedChanged"]}]]],["p-50b6bb3f",[[66,"dnn-monaco-editor",{language:[1],value:[1025],name:[1],focused:[32]},null,{language:["languageChanged"],value:["valueChanged"]}]]],["p-7c4bcd14",[[1,"dnn-progress-bar",{value:[2],max:[2],useGradient:[4,"use-gradient"]}]]],["p-e23840d6",[[65,"dnn-richtext",{options:[16],value:[1],name:[1],focused:[32]},null,{value:["watchValueChanged"]}]]],["p-6e54915d",[[1,"dnn-sort-icon",{sortDirection:[1025,"sort-direction"],focused:[32]}]]],["p-350e4008",[[65,"dnn-toggle",{checked:[1028],disabled:[4],name:[1],value:[1],focused:[32]},null,{checked:["checkedChanged"]}]]],["p-3b3475e0",[[1,"dnn-vertical-overflow-menu",{showDropdownButton:[32],showDropdownMenu:[32]}]]],["p-90dd4620",[[1,"dnn-vertical-splitview",{splitterWidth:[2,"splitter-width"],splitWidthPercentage:[1026,"split-width-percentage"],leftWidth:[32],rightWidth:[32],setSplitWidthPercentage:[64],getSplitWidthPercentage:[64]}]]],["p-3d1d6321",[[65,"dnn-checkbox",{checked:[1025],useIntermediate:[4,"use-intermediate"],value:[1],name:[1],focused:[32]},null,{checked:["handleCheckedChange"]}]]],["p-61dfb826",[[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-2486e9db",[[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-4574844c",[[1,"dnn-searchbox",{placeholder:[1],debounced:[4],debounceTime:[2,"debounce-time"],query:[1025],focused:[32]},null,{query:["handleQueryChanged"]}]]],["p-96c850a8",[[1,"dnn-tab",{tabTitle:[1,"tab-title"],visible:[32],show:[64],hide:[64]}],[1,"dnn-tabs",{tabTitles:[32],selectedTabTitle:[32]}]]],["p-21c5ef07",[[1,"dnn-collapsible",{expanded:[516],transitionDuration:[2,"transition-duration"],updateSize:[64]},[[0,"dnnCollapsibleHeightChanged","handleHeightChanged"]],{expanded:["handledExpandedChanged"]}]]],["p-d7d6dffb",[[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-9b330c82",[[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-b5241c09",[[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-
|
|
1
|
+
import{p as e,b as l}from"./p-978abd50.js";export{s as setNonce}from"./p-978abd50.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-b96b7c4a",[[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-70b71aeb",[[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-40de6e57",[[65,"dnn-autocomplete",{label:[1],name:[1],helpText:[1,"help-text"],value:[1537],required:[4],disabled:[4],suggestions:[16],renderSuggestion:[16],totalSuggestions:[2,"total-suggestions"],preloadThresholdPixels:[2,"preload-threshold-pixels"],focused:[32],valid:[32],customValidityMessage:[32],selectedIndex:[32],positionInitialized:[32],lastScrollTop:[32],checkValidity:[64],setCustomValidity:[64]},[[4,"click","handleOutsideClick"]]]]],["p-510152fa",[[65,"dnn-input",{type:[1025],label:[1],name:[1],value:[1544],helpText:[1,"help-text"],required:[4],disabled:[4],autocomplete:[1],min:[8],max:[8],minlength:[2],maxlength:[2],multiple:[4],pattern:[1],readonly:[4],step:[8],disableValidityReporting:[4,"disable-validity-reporting"],allowShowPassword:[4,"allow-show-password"],focused:[32],valid:[32],checkValidity:[64],setCustomValidity:[64]}]]],["p-33cef64b",[[65,"dnn-select",{label:[1],name:[1],required:[4],helpText:[1,"help-text"],disabled:[4],disableValidityReporting:[4,"disable-validity-reporting"],value:[1537],focused:[32],valid:[32],customValidityMessage:[32],checkValidity:[64]}]]],["p-bdfd829e",[[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],focused:[32],valid:[32],customValidityMessage:[32],checkValidity:[64],setCustomValidity:[64]}]]],["p-8564bc60",[[1,"dnn-treeview-item",{expanded:[1540],hasChildren:[32],focused:[32]},null,{expanded:["watchExpanded"]}]]],["p-5b15b44a",[[1,"dnn-chevron",{expandText:[1,"expand-text"],collapseText:[1,"collapse-text"],expanded:[1540],focused:[32]},null,{expanded:["handleExpandedChanged"]}]]],["p-50b6bb3f",[[66,"dnn-monaco-editor",{language:[1],value:[1025],name:[1],focused:[32]},null,{language:["languageChanged"],value:["valueChanged"]}]]],["p-7c4bcd14",[[1,"dnn-progress-bar",{value:[2],max:[2],useGradient:[4,"use-gradient"]}]]],["p-e23840d6",[[65,"dnn-richtext",{options:[16],value:[1],name:[1],focused:[32]},null,{value:["watchValueChanged"]}]]],["p-6e54915d",[[1,"dnn-sort-icon",{sortDirection:[1025,"sort-direction"],focused:[32]}]]],["p-350e4008",[[65,"dnn-toggle",{checked:[1028],disabled:[4],name:[1],value:[1],focused:[32]},null,{checked:["checkedChanged"]}]]],["p-3b3475e0",[[1,"dnn-vertical-overflow-menu",{showDropdownButton:[32],showDropdownMenu:[32]}]]],["p-90dd4620",[[1,"dnn-vertical-splitview",{splitterWidth:[2,"splitter-width"],splitWidthPercentage:[1026,"split-width-percentage"],leftWidth:[32],rightWidth:[32],setSplitWidthPercentage:[64],getSplitWidthPercentage:[64]}]]],["p-3d1d6321",[[65,"dnn-checkbox",{checked:[1025],useIntermediate:[4,"use-intermediate"],value:[1],name:[1],focused:[32]},null,{checked:["handleCheckedChange"]}]]],["p-61dfb826",[[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-2486e9db",[[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-4574844c",[[1,"dnn-searchbox",{placeholder:[1],debounced:[4],debounceTime:[2,"debounce-time"],query:[1025],focused:[32]},null,{query:["handleQueryChanged"]}]]],["p-96c850a8",[[1,"dnn-tab",{tabTitle:[1,"tab-title"],visible:[32],show:[64],hide:[64]}],[1,"dnn-tabs",{tabTitles:[32],selectedTabTitle:[32]}]]],["p-21c5ef07",[[1,"dnn-collapsible",{expanded:[516],transitionDuration:[2,"transition-duration"],updateSize:[64]},[[0,"dnnCollapsibleHeightChanged","handleHeightChanged"]],{expanded:["handledExpandedChanged"]}]]],["p-d7d6dffb",[[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-9b330c82",[[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-b5241c09",[[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-b553c159",[[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)}));
|
|
2
2
|
//# sourceMappingURL=dnn.esm.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as e,h as i,H as a}from"./p-978abd50.js";const o=":host{display:inline-block;--fieldset-foreground:var(--dnn-color-foreground, #000);--fieldset-background: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, #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);margin-top:1em;line-height:1em}.container .resizer{width:100%}.container .inner-container{position:relative;width:100%;background-color:var(--fieldset-background);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);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, #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=o;const n=class{constructor(i){e(this,i);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,i){this.invalid=!e;this.customValidityMessage=i}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 i(a,{key:"7ee42e394faac7673753be66dc1c4796f4d3cbf7"},i("div",{key:"cbc711c65ac10f3848014658228f6b28e8c2f855",class:this.getContainerClasses()},this.label&&i("label",{key:"4175e907013de07a8bfff4a1b760f707c47c9780"},i("slot",{key:"c665a4a1e89667b6796fdebf7a399cf73f3a2d5a",name:"label-prefix"}),this.label,i("slot",{key:"f38bc75b747a9690578235e67c614fe7bac802fc",name:"label-suffix"})),i("div",{key:"e94e37a5c5fe4284e60011d15453a0745eed4ef4",class:"resizer",style:{resize:this.resizable,overflow:this.resizable=="none"?"visible":"auto"}},i("div",{key:"eca3a5f55cbdeb75912a091a31a495b0d7abd6d8",class:"inner-container"},i("slot",{key:"6dcfd24831f36fcf33b78a172b2f1a04773957bd"})))),this.invalid&&this.customValidityMessage&&i("div",{key:"6d939440282fa9bf11ef431edaea1199e9183e4b",class:"error-message"},this.customValidityMessage),!this.invalid&&i("div",{key:"14d4661d357fb3a97e2fbba748cb2126389d1c53",class:"help-text"},this.helpText))}};n.style=s;export{n as dnn_fieldset};
|
|
2
|
+
//# sourceMappingURL=p-b553c159.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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 --foreground: Defines the foreground color. */\n --fieldset-foreground: var(--dnn-color-foreground, #000);\n\n /** @prop --background: Defines the background color. */\n --fieldset-background: 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, #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);\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);\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);\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, #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,wrDACvB,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":[]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, h, H as Host } from './index-9dbb7028.js';
|
|
2
2
|
|
|
3
|
-
const dnnFieldsetCss = ":host{display:inline-block;--fieldset-foreground:var(--dnn-color-foreground, #000);--fieldset-background: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, #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);margin-top:1em}.container .resizer{width:100%}.container .inner-container{position:relative;width:100%;background-color:var(--fieldset-background);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);white-space:nowrap;max-width:100%;border-radius:var(--fieldset-control-radius);font-size:1em;margin-top:1em;z-index:1;pointer-events:none}.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, #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}";
|
|
3
|
+
const dnnFieldsetCss = ":host{display:inline-block;--fieldset-foreground:var(--dnn-color-foreground, #000);--fieldset-background: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, #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);margin-top:1em;line-height:1em}.container .resizer{width:100%}.container .inner-container{position:relative;width:100%;background-color:var(--fieldset-background);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);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, #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}";
|
|
4
4
|
const DnnFieldsetStyle0 = dnnFieldsetCss;
|
|
5
5
|
|
|
6
6
|
const DnnFieldset = class {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"dnn-fieldset.entry.js","mappings":";;AAAA,MAAM,cAAc,GAAG,
|
|
1
|
+
{"file":"dnn-fieldset.entry.js","mappings":";;AAAA,MAAM,cAAc,GAAG,urDAAurD,CAAC;AAC/sD,0BAAe,cAAc;;MCUhB,WAAW;;;;;;;;;yBAqBgE,MAAM;;;;IAI5F,MAAM,UAAU;QACd,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;KACrB;;IAID,MAAM,UAAU;QACd,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;KACtB;;IAID,MAAM,OAAO;QACX,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;KACtB;;IAID,MAAM,MAAM;QACV,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;KACvB;;IAID,MAAM,QAAQ;QACZ,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;KACzB;;IAID,MAAM,UAAU;QACd,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;KACxB;;IAID,MAAM,WAAW,CAAC,KAAc,EAAE,OAAgB;QAChD,IAAI,CAAC,OAAO,GAAG,CAAC,KAAK,CAAC;QACtB,IAAI,CAAC,qBAAqB,GAAG,OAAO,CAAC;KACtC;IAIO,mBAAmB;QACzB,MAAM,OAAO,GAAa,CAAC,WAAW,CAAC,CAAC;QACxC,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;SACzB;QAED,IAAI,IAAI,CAAC,QAAQ,EACjB;YACE,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;SAC1B;QAED,IAAI,IAAI,CAAC,OAAO,EAAC;YACf,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;SACzB;QAED,IAAI,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,OAAO,EACpC;YACE,OAAO,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;SAC7B;QAED,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KAC1B;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAE,IAAI,CAAC,mBAAmB,EAAE,IACnC,IAAI,CAAC,KAAK;YACT,gEACE,6DAAM,IAAI,EAAC,cAAc,GAAQ,EAChC,IAAI,CAAC,KAAK,EACX,6DAAM,IAAI,EAAC,cAAc,GAAQ,CAC3B,EAEV,4DAAK,KAAK,EAAC,SAAS,EAAC,KAAK,EAAE,EAAC,MAAM,EAAE,IAAI,CAAC,SAAS,EAAE,QAAQ,EAAE,IAAI,CAAC,SAAS,IAAI,MAAM,GAAG,SAAS,GAAG,MAAM,EAAC,IAC3G,4DAAK,KAAK,EAAC,iBAAiB,IAC1B,8DAAa,CACT,CACF,CACF,EACL,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,qBAAqB;YACzC,4DAAK,KAAK,EAAC,eAAe,IACvB,IAAI,CAAC,qBAAqB,CACvB,EAEP,CAAC,IAAI,CAAC,OAAO;YACZ,4DAAK,KAAK,EAAC,WAAW,IAAE,IAAI,CAAC,QAAQ,CAAO,CAEzC,EACP;KACH;;;;;;","names":[],"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 --foreground: Defines the foreground color. */\n --fieldset-foreground: var(--dnn-color-foreground, #000);\n\n /** @prop --background: Defines the background color. */\n --fieldset-background: 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, #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);\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);\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);\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, #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"],"version":3}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dnncommunity/dnn-elements",
|
|
3
|
-
"version": "0.24.0-beta.
|
|
3
|
+
"version": "0.24.0-beta.2",
|
|
4
4
|
"description": "Dnn themed custom elements.",
|
|
5
5
|
"repository": "https://github.com/dnncommunity/dnn-elements",
|
|
6
6
|
"homepage": "https://dnncommunity.github.io/dnn-elements",
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as e,h as a,H as i}from"./p-978abd50.js";const o=":host{display:inline-block;--fieldset-foreground:var(--dnn-color-foreground, #000);--fieldset-background: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, #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);margin-top:1em}.container .resizer{width:100%}.container .inner-container{position:relative;width:100%;background-color:var(--fieldset-background);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);white-space:nowrap;max-width:100%;border-radius:var(--fieldset-control-radius);font-size:1em;margin-top:1em;z-index:1;pointer-events:none}.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, #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=o;const r=class{constructor(a){e(this,a);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,a){this.invalid=!e;this.customValidityMessage=a}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 a(i,{key:"7ee42e394faac7673753be66dc1c4796f4d3cbf7"},a("div",{key:"cbc711c65ac10f3848014658228f6b28e8c2f855",class:this.getContainerClasses()},this.label&&a("label",{key:"4175e907013de07a8bfff4a1b760f707c47c9780"},a("slot",{key:"c665a4a1e89667b6796fdebf7a399cf73f3a2d5a",name:"label-prefix"}),this.label,a("slot",{key:"f38bc75b747a9690578235e67c614fe7bac802fc",name:"label-suffix"})),a("div",{key:"e94e37a5c5fe4284e60011d15453a0745eed4ef4",class:"resizer",style:{resize:this.resizable,overflow:this.resizable=="none"?"visible":"auto"}},a("div",{key:"eca3a5f55cbdeb75912a091a31a495b0d7abd6d8",class:"inner-container"},a("slot",{key:"6dcfd24831f36fcf33b78a172b2f1a04773957bd"})))),this.invalid&&this.customValidityMessage&&a("div",{key:"6d939440282fa9bf11ef431edaea1199e9183e4b",class:"error-message"},this.customValidityMessage),!this.invalid&&a("div",{key:"14d4661d357fb3a97e2fbba748cb2126389d1c53",class:"help-text"},this.helpText))}};r.style=s;export{r as dnn_fieldset};
|
|
2
|
-
//# sourceMappingURL=p-cb85f0af.entry.js.map
|
|
@@ -1 +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 --foreground: Defines the foreground color. */\n --fieldset-foreground: var(--dnn-color-foreground, #000);\n\n /** @prop --background: Defines the background color. */\n --fieldset-background: 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, #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);\n margin-top: 1em;\n .resizer{\n width: 100%;\n }\n .inner-container{\n position: relative;\n width: 100%;\n background-color: var(--fieldset-background);\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);\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 }\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, #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,wpDACvB,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":[]}
|