@aquera/nile-elements 0.1.14 → 0.1.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/README.md +3 -0
  2. package/demo/index.html +8 -66
  3. package/dist/nile-checkbox/nile-checkbox.cjs.js +1 -1
  4. package/dist/nile-checkbox/nile-checkbox.cjs.js.map +1 -1
  5. package/dist/nile-checkbox/nile-checkbox.esm.js +11 -18
  6. package/dist/src/nile-checkbox/nile-checkbox.js +5 -12
  7. package/dist/src/nile-checkbox/nile-checkbox.js.map +1 -1
  8. package/dist/tsconfig.tsbuildinfo +1 -1
  9. package/package.json +1 -1
  10. package/src/nile-checkbox/nile-checkbox.ts +5 -12
package/README.md CHANGED
@@ -80,6 +80,9 @@ To run a local development server that serves the basic demo located in `demo/in
80
80
  In this section, you can find the updates for each release of `nile-elements`. It's a good practice to maintain detailed release notes to help users and developers understand what changes have been made from one version to another and how these changes might affect their projects.
81
81
 
82
82
 
83
+ #### Version 0.1.15
84
+ - Nile Checkbox: Help text modified according to the design.
85
+
83
86
  #### Version 0.1.14
84
87
  - Nile Code Editor: function added focusAtPostion, custom styling property fixes
85
88
 
package/demo/index.html CHANGED
@@ -35,80 +35,22 @@
35
35
  <!-- Add the tour component -->
36
36
  <nile-tour id="tour" .showBackdrop="false" .disableInteraction="false"></nile-tour>
37
37
  <body>
38
- <div class="flex-container wrap" id="button-container"></div>
38
+ <div class="flex-container wrap" style="width: 400px; height: 400px;" id="button-container">
39
+
40
+
41
+ <nile-checkbox label="I am label" help-text="i am help text jhsdjsh djshd jhsdj sjdh sjdhjs dhjsd sjhdjs hdj"></nile-checkbox>
42
+ <nile-input label="I am label" help-text="i am help text jhsdjsh djshd jhsdj sjdh sjdhjs dhjsd sjhdjs hdj"></nile-input>
43
+
44
+
45
+ </div>
39
46
  <style>
40
47
  .frame-left-lg {
41
48
  padding-left: 4rem;
42
49
  margin-left: 208px;
43
50
  }
44
51
  </style>
45
- <script>
46
- const container = document.getElementById("button-container");
47
- const tourElement = document.getElementById("tour");
48
-
49
- // Define an array of random titles and contents
50
- const titles = [
51
- "Welcome to Reports", "Checkbox", "Text Area", "Actions",
52
- "Submit Form", "Edit Item", "Delete Item", "View Details", "Settings"
53
- ];
54
-
55
- const contents = [
56
- "This is the title section for setting up reports.",
57
- "Select this checkbox for additional options.",
58
- "Provide additional details about the report in this text area.",
59
- "Use the Save, Reset, and Help buttons to manage your actions.",
60
- "Click to submit your changes.",
61
- "Click to edit this item.",
62
- "Click to delete this item.",
63
- "Click to view more details.",
64
- "Change settings here."
65
- ];
66
-
67
- // Generate 100 buttons with random content and data-tour attributes
68
- tourElement.steps = [];
69
- for (let i = 1; i <= 80; i++) {
70
- const button = document.createElement("nile-button");
71
- const stepNo = i;
72
- const elementId = `${i}`;
73
- button.setAttribute("data-tour", stepNo);
74
- button.setAttribute("variant", "secondary");
75
- button.textContent = `Button ${i}`;
76
-
77
- // Assign random content for the tour steps
78
- const randomTitle = titles[Math.floor(Math.random() * titles.length)];
79
- const randomContent = contents[Math.floor(Math.random() * contents.length)];
80
-
81
- // Create random position (top, left, right, bottom)
82
- const positions = [
83
- "top", "bottom", "left", "right",
84
- "top-right-aligned", "top-left-aligned",
85
- "top-middle-aligned", "bottom-right-aligned",
86
- "bottom-left-aligned", "bottom-middle-aligned"
87
- ]; const randomPosition = positions[Math.floor(Math.random() * positions.length)];
88
-
89
- // Add the button to the container
90
- container.appendChild(button);
91
-
92
- // Create a tour step for this button
93
- tourElement.steps.push({
94
- stepNo: stepNo,
95
- element: elementId,
96
- title: randomTitle,
97
- content: randomContent,
98
- position:'bottom-middle-aligned',
99
- });
100
- }
101
-
102
- // Start the tour when the page loads
103
- window.onload = () => {
104
-
105
- setTimeout(()=>{
106
- tourElement.startTour();
107
52
 
108
- },300);
109
- };
110
53
 
111
- </script>
112
54
  </body>
113
55
 
114
56
  </html>
package/dist/nile-checkbox/nile-checkbox.cjs.js CHANGED
@@ -1,2 +1,2 @@
1
- function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o;}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o;},_typeof(o);}System.register(["tslib","lit","lit/decorators.js","./nile-checkbox.css.cjs.js","lit/directives/class-map.js","../internal/default-value.cjs.js","lit/directives/if-defined.js","lit/directives/live.js","../internal/watch.cjs.js","../internal/nile-element.cjs.js"],function(_export,_context){"use strict";var e,t,i,s,c,o,h,l,n,r,a,d,m,_templateObject,_templateObject2,_templateObject3,_templateObject4,_templateObject5,p;function _taggedTemplateLiteral(strings,raw){if(!raw){raw=strings.slice(0);}return Object.freeze(Object.defineProperties(strings,{raw:{value:Object.freeze(raw)}}));}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,_toPropertyKey(descriptor.key),descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);Object.defineProperty(Constructor,"prototype",{writable:false});return Constructor;}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+"";}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.");}return("string"===r?String:Number)(t);}function _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}else if(call!==void 0){throw new TypeError("Derived constructors may only return object or undefined");}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t;})();}function _get(){if(typeof Reflect!=="undefined"&&Reflect.get){_get=Reflect.get.bind();}else{_get=function _get(target,property,receiver){var base=_superPropBase(target,property);if(!base)return;var desc=Object.getOwnPropertyDescriptor(base,property);if(desc.get){return desc.get.call(arguments.length<3?target:receiver);}return desc.value;};}return _get.apply(this,arguments);}function _superPropBase(object,property){while(!Object.prototype.hasOwnProperty.call(object,property)){object=_getPrototypeOf(object);if(object===null)break;}return object;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});Object.defineProperty(subClass,"prototype",{writable:false});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}return{setters:[function(_tslib){e=_tslib.__decorate;},function(_lit){t=_lit.html;},function(_litDecoratorsJs){i=_litDecoratorsJs.query;s=_litDecoratorsJs.state;c=_litDecoratorsJs.property;o=_litDecoratorsJs.customElement;},function(_nileCheckboxCssCjsJs){h=_nileCheckboxCssCjsJs.s;},function(_litDirectivesClassMapJs){l=_litDirectivesClassMapJs.classMap;},function(_internalDefaultValueCjsJs){n=_internalDefaultValueCjsJs.d;},function(_litDirectivesIfDefinedJs){r=_litDirectivesIfDefinedJs.ifDefined;},function(_litDirectivesLiveJs){a=_litDirectivesLiveJs.live;},function(_internalWatchCjsJs){d=_internalWatchCjsJs.w;},function(_internalNileElementCjsJs){m=_internalNileElementCjsJs.N;}],execute:function execute(){_export("N",p=/*#__PURE__*/function(_m){function p(){var _this;_classCallCheck(this,p);_this=_callSuper(this,p),_this.hasFocus=!1,_this.title="",_this.name="",_this.size="medium",_this.disabled=!1,_this.checked=!1,_this.label="",_this.indeterminate=!1,_this.defaultChecked=!1,_this.helpText="",_this.errorMessage="",_this.showHelpText=!1,_this.form="",_this.required=!1;return _this;}_inherits(p,_m);return _createClass(p,[{key:"toggleHelpText",value:function toggleHelpText(){this.showHelpText=!this.showHelpText;}},{key:"handleClick",value:function handleClick(){this.checked=!this.checked,this.indeterminate=!1,this.emit("nile-change",{checked:this.checked}),this.emit("valueChange",{checked:this.checked});}},{key:"handleBlur",value:function handleBlur(){this.hasFocus=!1,this.emit("blur");}},{key:"handleInput",value:function handleInput(){this.emit("input");}},{key:"handleFocus",value:function handleFocus(){this.hasFocus=!0,this.emit("focus");}},{key:"handleStateChange",value:function handleStateChange(){this.input.checked=this.checked,this.input.indeterminate=this.indeterminate;}},{key:"click",value:function click(){this.input.click();}},{key:"focus",value:function focus(e){this.input.focus(e);}},{key:"blur",value:function blur(){this.input.blur();}},{key:"connectedCallback",value:function connectedCallback(){_get(_getPrototypeOf(p.prototype),"connectedCallback",this).call(this),this.updateHostClass(),this.emit("nile-init");}},{key:"disconnectedCallback",value:function disconnectedCallback(){_get(_getPrototypeOf(p.prototype),"disconnectedCallback",this).call(this),this.emit("nile-destroy");}},{key:"updated",value:function updated(e){_get(_getPrototypeOf(p.prototype),"updated",this).call(this,e),e.has("helpText")&&this.updateHostClass();}},{key:"updateHostClass",value:function updateHostClass(){this.helpText?this.classList.add("full-width"):this.classList.remove("full-width");}},{key:"render",value:function render(){var e=!!this.helpText,i=!!this.errorMessage;return t(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n <label\n part=\"base\"\n class=","\n >\n <input\n class=\"checkbox__input\"\n type=\"checkbox\"\n title=","\n name=","\n value=","\n .indeterminate=","\n .checked=","\n .disabled=","\n .required=","\n aria-checked=","\n @click=","\n @input=","\n @blur=","\n @focus=","\n />\n \n <span\n part=\"control","","\"\n class=\"checkbox__control\"\n >\n ","\n ","\n </span>\n \n <div part=\"label\" class=\"checkbox__label\">\n ","\n <slot></slot>\n </div>\n </label>\n \n ","\n \n ","\n "])),l({checkbox:!0,"checkbox--checked":this.checked,"checkbox--disabled":this.disabled,"checkbox--focused":this.hasFocus,"checkbox--indeterminate":this.indeterminate,"checkbox--medium":"medium"===this.size}),this.title,this.name,r(this.value),a(this.indeterminate),a(this.checked),this.disabled,this.required,this.checked?"true":"false",this.handleClick,this.handleInput,this.handleBlur,this.handleFocus,this.checked?" control--checked":"",this.indeterminate?" control--indeterminate":"",this.checked?t(_templateObject2||(_templateObject2=_taggedTemplateLiteral(["\n <nile-icon\n part=\"checked-icon\"\n class=\"checkbox__checked-icon\"\n color=\"white\"\n library=\"system\"\n name=\"tick\"\n size=\"12\"\n ></nile-icon>\n "]))):"",!this.checked&&this.indeterminate?t(_templateObject3||(_templateObject3=_taggedTemplateLiteral(["\n <nile-icon\n part=\"indeterminate-icon\"\n class=\"checkbox__indeterminate-icon\"\n library=\"system\"\n color=\"white\"\n name=\"minus\"\n size=\"12\"\n ></nile-icon>\n "]))):"","boolean"==typeof this.label?"":this.label,e?t(_templateObject4||(_templateObject4=_taggedTemplateLiteral(["\n <nile-tooltip content=\"","\" placement=\"bottom\">\n <nile-icon\n name=\"question\"\n class=\"checkbox__helptext-icon\"\n ></nile-icon>\n </nile-tooltip>\n "])),this.helpText):"",i?t(_templateObject5||(_templateObject5=_taggedTemplateLiteral(["\n <nile-form-error-message\n >","</nile-form-error-message\n >\n "])),this.errorMessage):"");}}]);}(m));p.styles=h,e([i('input[type="checkbox"]')],p.prototype,"input",void 0),e([s()],p.prototype,"hasFocus",void 0),e([c()],p.prototype,"title",void 0),e([c()],p.prototype,"name",void 0),e([c()],p.prototype,"value",void 0),e([c({reflect:!0})],p.prototype,"size",void 0),e([c({type:Boolean,reflect:!0})],p.prototype,"disabled",void 0),e([c({type:Boolean,reflect:!0})],p.prototype,"checked",void 0),e([c({type:String,reflect:!0})],p.prototype,"label",void 0),e([c({type:Boolean,reflect:!0})],p.prototype,"indeterminate",void 0),e([n("checked")],p.prototype,"defaultChecked",void 0),e([c({attribute:"help-text",reflect:!0})],p.prototype,"helpText",void 0),e([c({attribute:"error-message",reflect:!0})],p.prototype,"errorMessage",void 0),e([c({type:Boolean})],p.prototype,"showHelpText",void 0),e([c({reflect:!0})],p.prototype,"form",void 0),e([c({type:Boolean,reflect:!0})],p.prototype,"required",void 0),e([d(["checked","indeterminate"],{waitUntilFirstUpdate:!0})],p.prototype,"handleStateChange",null),_export("N",p=e([o("nile-checkbox")],p));}};});
1
+ function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o;}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o;},_typeof(o);}System.register(["tslib","lit","lit/decorators.js","./nile-checkbox.css.cjs.js","lit/directives/class-map.js","../internal/default-value.cjs.js","lit/directives/if-defined.js","lit/directives/live.js","../internal/watch.cjs.js","../internal/nile-element.cjs.js"],function(_export,_context){"use strict";var e,t,i,s,h,c,l,o,r,a,n,d,m,_templateObject,_templateObject2,_templateObject3,_templateObject4,_templateObject5,p;function _taggedTemplateLiteral(strings,raw){if(!raw){raw=strings.slice(0);}return Object.freeze(Object.defineProperties(strings,{raw:{value:Object.freeze(raw)}}));}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,_toPropertyKey(descriptor.key),descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);Object.defineProperty(Constructor,"prototype",{writable:false});return Constructor;}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+"";}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.");}return("string"===r?String:Number)(t);}function _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}else if(call!==void 0){throw new TypeError("Derived constructors may only return object or undefined");}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t;})();}function _get(){if(typeof Reflect!=="undefined"&&Reflect.get){_get=Reflect.get.bind();}else{_get=function _get(target,property,receiver){var base=_superPropBase(target,property);if(!base)return;var desc=Object.getOwnPropertyDescriptor(base,property);if(desc.get){return desc.get.call(arguments.length<3?target:receiver);}return desc.value;};}return _get.apply(this,arguments);}function _superPropBase(object,property){while(!Object.prototype.hasOwnProperty.call(object,property)){object=_getPrototypeOf(object);if(object===null)break;}return object;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});Object.defineProperty(subClass,"prototype",{writable:false});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}return{setters:[function(_tslib){e=_tslib.__decorate;},function(_lit){t=_lit.html;},function(_litDecoratorsJs){i=_litDecoratorsJs.query;s=_litDecoratorsJs.state;h=_litDecoratorsJs.property;c=_litDecoratorsJs.customElement;},function(_nileCheckboxCssCjsJs){l=_nileCheckboxCssCjsJs.s;},function(_litDirectivesClassMapJs){o=_litDirectivesClassMapJs.classMap;},function(_internalDefaultValueCjsJs){r=_internalDefaultValueCjsJs.d;},function(_litDirectivesIfDefinedJs){a=_litDirectivesIfDefinedJs.ifDefined;},function(_litDirectivesLiveJs){n=_litDirectivesLiveJs.live;},function(_internalWatchCjsJs){d=_internalWatchCjsJs.w;},function(_internalNileElementCjsJs){m=_internalNileElementCjsJs.N;}],execute:function execute(){_export("N",p=/*#__PURE__*/function(_m){function p(){var _this;_classCallCheck(this,p);_this=_callSuper(this,p),_this.hasFocus=!1,_this.title="",_this.name="",_this.size="medium",_this.disabled=!1,_this.checked=!1,_this.label="",_this.indeterminate=!1,_this.defaultChecked=!1,_this.helpText="",_this.errorMessage="",_this.showHelpText=!1,_this.form="",_this.required=!1;return _this;}_inherits(p,_m);return _createClass(p,[{key:"toggleHelpText",value:function toggleHelpText(){this.showHelpText=!this.showHelpText;}},{key:"handleClick",value:function handleClick(){this.checked=!this.checked,this.indeterminate=!1,this.emit("nile-change",{checked:this.checked}),this.emit("valueChange",{checked:this.checked});}},{key:"handleBlur",value:function handleBlur(){this.hasFocus=!1,this.emit("blur");}},{key:"handleInput",value:function handleInput(){this.emit("input");}},{key:"handleFocus",value:function handleFocus(){this.hasFocus=!0,this.emit("focus");}},{key:"handleStateChange",value:function handleStateChange(){this.input.checked=this.checked,this.input.indeterminate=this.indeterminate;}},{key:"click",value:function click(){this.input.click();}},{key:"focus",value:function focus(e){this.input.focus(e);}},{key:"blur",value:function blur(){this.input.blur();}},{key:"connectedCallback",value:function connectedCallback(){_get(_getPrototypeOf(p.prototype),"connectedCallback",this).call(this),this.updateHostClass(),this.emit("nile-init");}},{key:"disconnectedCallback",value:function disconnectedCallback(){_get(_getPrototypeOf(p.prototype),"disconnectedCallback",this).call(this),this.emit("nile-destroy");}},{key:"updated",value:function updated(e){_get(_getPrototypeOf(p.prototype),"updated",this).call(this,e),e.has("helpText")&&this.updateHostClass();}},{key:"updateHostClass",value:function updateHostClass(){this.helpText?this.classList.add("full-width"):this.classList.remove("full-width");}},{key:"render",value:function render(){var e=!!this.helpText,i=!!this.errorMessage;return t(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n <label\n part=\"base\"\n class=","\n >\n <input\n class=\"checkbox__input\"\n type=\"checkbox\"\n title=","\n name=","\n value=","\n .indeterminate=","\n .checked=","\n .disabled=","\n .required=","\n aria-checked=","\n @click=","\n @input=","\n @blur=","\n @focus=","\n />\n\n <span\n part=\"control","","\"\n class=\"checkbox__control\"\n >\n ","\n ","\n </span>\n\n <div part=\"label\" class=\"checkbox__label\">\n ","\n <slot></slot>\n </div>\n </label>\n\n ","\n \n ","\n "])),o({checkbox:!0,"checkbox--checked":this.checked,"checkbox--disabled":this.disabled,"checkbox--focused":this.hasFocus,"checkbox--indeterminate":this.indeterminate,"checkbox--medium":"medium"===this.size}),this.title,this.name,a(this.value),n(this.indeterminate),n(this.checked),this.disabled,this.required,this.checked?"true":"false",this.handleClick,this.handleInput,this.handleBlur,this.handleFocus,this.checked?" control--checked":"",this.indeterminate?" control--indeterminate":"",this.checked?t(_templateObject2||(_templateObject2=_taggedTemplateLiteral(["\n <nile-icon\n part=\"checked-icon\"\n class=\"checkbox__checked-icon\"\n color=\"white\"\n library=\"system\"\n name=\"tick\"\n size=\"12\"\n ></nile-icon>\n "]))):"",!this.checked&&this.indeterminate?t(_templateObject3||(_templateObject3=_taggedTemplateLiteral(["\n <nile-icon\n part=\"indeterminate-icon\"\n class=\"checkbox__indeterminate-icon\"\n library=\"system\"\n color=\"white\"\n name=\"minus\"\n size=\"12\"\n ></nile-icon>\n "]))):"","boolean"==typeof this.label?"":this.label,e?t(_templateObject4||(_templateObject4=_taggedTemplateLiteral([" <nile-form-help-text>","</nile-form-help-text> "])),this.helpText):"",i?t(_templateObject5||(_templateObject5=_taggedTemplateLiteral(["\n <nile-form-error-message\n >","</nile-form-error-message\n >\n "])),this.errorMessage):"");}}]);}(m));p.styles=l,e([i('input[type="checkbox"]')],p.prototype,"input",void 0),e([s()],p.prototype,"hasFocus",void 0),e([h()],p.prototype,"title",void 0),e([h()],p.prototype,"name",void 0),e([h()],p.prototype,"value",void 0),e([h({reflect:!0})],p.prototype,"size",void 0),e([h({type:Boolean,reflect:!0})],p.prototype,"disabled",void 0),e([h({type:Boolean,reflect:!0})],p.prototype,"checked",void 0),e([h({type:String,reflect:!0})],p.prototype,"label",void 0),e([h({type:Boolean,reflect:!0})],p.prototype,"indeterminate",void 0),e([r("checked")],p.prototype,"defaultChecked",void 0),e([h({attribute:"help-text",reflect:!0})],p.prototype,"helpText",void 0),e([h({attribute:"error-message",reflect:!0})],p.prototype,"errorMessage",void 0),e([h({type:Boolean})],p.prototype,"showHelpText",void 0),e([h({reflect:!0})],p.prototype,"form",void 0),e([h({type:Boolean,reflect:!0})],p.prototype,"required",void 0),e([d(["checked","indeterminate"],{waitUntilFirstUpdate:!0})],p.prototype,"handleStateChange",null),_export("N",p=e([c("nile-checkbox")],p));}};});
2
2
  //# sourceMappingURL=nile-checkbox.cjs.js.map
package/dist/nile-checkbox/nile-checkbox.cjs.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"nile-checkbox.cjs.js","sources":["../../../src/nile-checkbox/nile-checkbox.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n \nimport {\n LitElement,\n html,\n CSSResultArray,\n TemplateResult,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-checkbox.css';\n \nimport { classMap } from 'lit/directives/class-map.js';\nimport { query, state } from 'lit/decorators.js';\nimport { defaultValue } from '../internal/default-value';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { watch } from '../internal/watch';\nimport NileElement from '../internal/nile-element';\nimport type { CSSResultGroup } from 'lit';\n \n/**\n * @summary Checkboxes allow the user to toggle an option on or off.\n *\n * @dependency nile-icon\n *\n * @slot - The checkbox's label.\n *\n * @event nile-blur - Emitted when the checkbox loses focus.\n * @event nile-change - Emitted when the checked state changes.\n * @event nile-focus - Emitted when the checkbox gains focus.\n * @event nile-input - Emitted when the checkbox receives input.\n * @event nile-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart base - The component's base wrapper.\n * @csspart control - The square container that wraps the checkbox's checked state.\n * @csspart control--checked - Matches the control part when the checkbox is checked.\n * @csspart control--indeterminate - Matches the control part when the checkbox is indeterminate.\n * @csspart checked-icon - The checked icon, an `<nile-icon>` element.\n * @csspart indeterminate-icon - The indeterminate icon, an `<nile-icon>` element.\n * @csspart label - The container that wraps the checkbox's label.\n */\n \n/**\n * Nile icon component.\n *\n * @tag nile-checkbox\n *\n */\n@customElement('nile-checkbox')\nexport class NileCheckbox extends NileElement {\n constructor() {\n super();\n }\n \n static styles: CSSResultGroup = styles;\n \n @query('input[type=\"checkbox\"]') input: HTMLInputElement;\n \n @state() private hasFocus = false;\n \n @property() title = ''; // make reactive to pass through\n \n /** The name of the checkbox, submitted as a name/value pair with form data. */\n @property() name = '';\n \n /** The current value of the checkbox, submitted as a name/value pair with form data. */\n @property() value: boolean;\n \n /** The checkbox's size. */\n @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n \n /** Disables the checkbox. */\n @property({ type: Boolean, reflect: true }) disabled = false;\n \n /** Draws the checkbox in a checked state. */\n @property({ type: Boolean, reflect: true }) checked = false;\n \n /** Label, declared this property for backward compatibility of old component */\n @property({ type: String, reflect: true }) label = '';\n \n /**\n * Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\n * all/none\" behavior when associated checkboxes have a mix of checked and unchecked states.\n */\n @property({ type: Boolean, reflect: true }) indeterminate = false;\n \n /** The default value of the form control. Primarily used for resetting the form control. */\n @defaultValue('checked') defaultChecked = false;\n \n @property({ attribute: 'help-text', reflect: true }) helpText = '';\n \n @property({ attribute: 'error-message', reflect: true }) errorMessage = '';\n \n @property({ type: Boolean }) showHelpText = false;\n \n \n /**\n * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\n * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in\n * the same document or shadow root for this to work.\n */\n @property({ reflect: true }) form = '';\n \n /** Makes the checkbox a required field. */\n @property({ type: Boolean, reflect: true }) required = false;\n \n private toggleHelpText() {\n this.showHelpText = !this.showHelpText;\n }\n \n private handleClick() {\n this.checked = !this.checked;\n this.indeterminate = false;\n this.emit('nile-change',{checked: this.checked})\n this.emit('valueChange',{checked: this.checked})\n }\n \n private handleBlur() {\n this.hasFocus = false;\n this.emit('blur');\n }\n \n private handleInput() {\n this.emit('input');\n }\n \n private handleFocus() {\n this.hasFocus = true;\n this.emit('focus');\n }\n \n @watch(['checked', 'indeterminate'], { waitUntilFirstUpdate: true })\n handleStateChange() {\n this.input.checked = this.checked; // force a sync update\n this.input.indeterminate = this.indeterminate; // force a sync update\n }\n \n /** Simulates a click on the checkbox. */\n click() {\n this.input.click();\n }\n \n /** Sets focus on the checkbox. */\n focus(options?: FocusOptions) {\n this.input.focus(options);\n }\n \n /** Removes focus from the checkbox. */\n blur() {\n this.input.blur();\n }\n \n connectedCallback() {\n super.connectedCallback();\n this.updateHostClass();\n this.emit('nile-init');\n }\n \n disconnectedCallback() {\n super.disconnectedCallback();\n this.emit('nile-destroy');\n }\n \n updated(changedProperties: Map<string | number | symbol, unknown>) {\n super.updated(changedProperties);\n if (changedProperties.has('helpText')) {\n this.updateHostClass();\n }\n }\n \n private updateHostClass() {\n if (this.helpText) {\n this.classList.add('full-width');\n } else {\n this.classList.remove('full-width');\n }\n }\n \n render() {\n const hasHelpText = this.helpText ? true : false;\n const hasErrorMessage = this.errorMessage ? true : false;\n \n return html`\n <label\n part=\"base\"\n class=${classMap({\n checkbox: true,\n 'checkbox--checked': this.checked,\n 'checkbox--disabled': this.disabled,\n 'checkbox--focused': this.hasFocus,\n 'checkbox--indeterminate': this.indeterminate,\n 'checkbox--medium': this.size === 'medium',\n })}\n >\n <input\n class=\"checkbox__input\"\n type=\"checkbox\"\n title=${\n this\n .title /* An empty title prevents browser validation tooltips from appearing on hover */\n }\n name=${this.name}\n value=${ifDefined(this.value)}\n .indeterminate=${live(this.indeterminate)}\n .checked=${live(this.checked)}\n .disabled=${this.disabled}\n .required=${this.required}\n aria-checked=${this.checked ? 'true' : 'false'}\n @click=${this.handleClick}\n @input=${this.handleInput}\n @blur=${this.handleBlur}\n @focus=${this.handleFocus}\n />\n \n <span\n part=\"control${this.checked ? ' control--checked' : ''}${this\n .indeterminate\n ? ' control--indeterminate'\n : ''}\"\n class=\"checkbox__control\"\n >\n ${this.checked\n ? html`\n <nile-icon\n part=\"checked-icon\"\n class=\"checkbox__checked-icon\"\n color=\"white\"\n library=\"system\"\n name=\"tick\"\n size=\"12\"\n ></nile-icon>\n `\n : ''}\n ${!this.checked && this.indeterminate\n ? html`\n <nile-icon\n part=\"indeterminate-icon\"\n class=\"checkbox__indeterminate-icon\"\n library=\"system\"\n color=\"white\"\n name=\"minus\"\n size=\"12\"\n ></nile-icon>\n `\n : ''}\n </span>\n \n <div part=\"label\" class=\"checkbox__label\">\n ${typeof this.label === 'boolean' ? '' : this.label}\n <slot></slot>\n </div>\n </label>\n \n ${hasHelpText\n ? html`\n <nile-tooltip content=\"${this.helpText}\" placement=\"bottom\">\n <nile-icon\n name=\"question\"\n class=\"checkbox__helptext-icon\"\n ></nile-icon>\n </nile-tooltip>\n `\n : ``}\n \n ${hasErrorMessage\n ? html`\n <nile-form-error-message\n >${this.errorMessage}</nile-form-error-message\n >\n `\n : ``}\n `;\n }\n}\n \nexport default NileCheckbox;\n \ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-checkbox': NileCheckbox;\n }\n}"],"names":["NileCheckbox","_m","p","constructor","super","this","hasFocus","title","name","size","disabled","checked","label","indeterminate","defaultChecked","helpText","errorMessage","showHelpText","form","required","_this","_inherits","_createClass","key","value","toggleHelpText","handleClick","emit","handleBlur","handleInput","handleFocus","handleStateChange","input","click","focus","options","blur","connectedCallback","updateHostClass","disconnectedCallback","updated","changedProperties","has","classList","add","remove","render","hasHelpText","hasErrorMessage","html","_templateObject","_taggedTemplateLiteral","classMap","checkbox","ifDefined","live","_templateObject2","_templateObject3","_templateObject4","_templateObject5","NileElement","styles","__decorate","query","prototype","state","property","reflect","type","Boolean","String","defaultValue","attribute","watch","waitUntilFirstUpdate","customElement"],"mappings":"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"}
1
+ {"version":3,"file":"nile-checkbox.cjs.js","sources":["../../../src/nile-checkbox/nile-checkbox.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n \nimport {\n LitElement,\n html,\n CSSResultArray,\n TemplateResult,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-checkbox.css';\n \nimport { classMap } from 'lit/directives/class-map.js';\nimport { query, state } from 'lit/decorators.js';\nimport { defaultValue } from '../internal/default-value';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { watch } from '../internal/watch';\nimport NileElement from '../internal/nile-element';\nimport type { CSSResultGroup } from 'lit';\n \n/**\n * @summary Checkboxes allow the user to toggle an option on or off.\n *\n * @dependency nile-icon\n *\n * @slot - The checkbox's label.\n *\n * @event nile-blur - Emitted when the checkbox loses focus.\n * @event nile-change - Emitted when the checked state changes.\n * @event nile-focus - Emitted when the checkbox gains focus.\n * @event nile-input - Emitted when the checkbox receives input.\n * @event nile-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart base - The component's base wrapper.\n * @csspart control - The square container that wraps the checkbox's checked state.\n * @csspart control--checked - Matches the control part when the checkbox is checked.\n * @csspart control--indeterminate - Matches the control part when the checkbox is indeterminate.\n * @csspart checked-icon - The checked icon, an `<nile-icon>` element.\n * @csspart indeterminate-icon - The indeterminate icon, an `<nile-icon>` element.\n * @csspart label - The container that wraps the checkbox's label.\n */\n \n/**\n * Nile icon component.\n *\n * @tag nile-checkbox\n *\n */\n@customElement('nile-checkbox')\nexport class NileCheckbox extends NileElement {\n constructor() {\n super();\n }\n \n static styles: CSSResultGroup = styles;\n \n @query('input[type=\"checkbox\"]') input: HTMLInputElement;\n \n @state() private hasFocus = false;\n \n @property() title = ''; // make reactive to pass through\n \n /** The name of the checkbox, submitted as a name/value pair with form data. */\n @property() name = '';\n \n /** The current value of the checkbox, submitted as a name/value pair with form data. */\n @property() value: boolean;\n \n /** The checkbox's size. */\n @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n \n /** Disables the checkbox. */\n @property({ type: Boolean, reflect: true }) disabled = false;\n \n /** Draws the checkbox in a checked state. */\n @property({ type: Boolean, reflect: true }) checked = false;\n \n /** Label, declared this property for backward compatibility of old component */\n @property({ type: String, reflect: true }) label = '';\n \n /**\n * Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\n * all/none\" behavior when associated checkboxes have a mix of checked and unchecked states.\n */\n @property({ type: Boolean, reflect: true }) indeterminate = false;\n \n /** The default value of the form control. Primarily used for resetting the form control. */\n @defaultValue('checked') defaultChecked = false;\n \n @property({ attribute: 'help-text', reflect: true }) helpText = '';\n \n @property({ attribute: 'error-message', reflect: true }) errorMessage = '';\n \n @property({ type: Boolean }) showHelpText = false;\n \n \n /**\n * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\n * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in\n * the same document or shadow root for this to work.\n */\n @property({ reflect: true }) form = '';\n \n /** Makes the checkbox a required field. */\n @property({ type: Boolean, reflect: true }) required = false;\n \n private toggleHelpText() {\n this.showHelpText = !this.showHelpText;\n }\n \n private handleClick() {\n this.checked = !this.checked;\n this.indeterminate = false;\n this.emit('nile-change',{checked: this.checked})\n this.emit('valueChange',{checked: this.checked})\n }\n \n private handleBlur() {\n this.hasFocus = false;\n this.emit('blur');\n }\n \n private handleInput() {\n this.emit('input');\n }\n \n private handleFocus() {\n this.hasFocus = true;\n this.emit('focus');\n }\n \n @watch(['checked', 'indeterminate'], { waitUntilFirstUpdate: true })\n handleStateChange() {\n this.input.checked = this.checked; // force a sync update\n this.input.indeterminate = this.indeterminate; // force a sync update\n }\n \n /** Simulates a click on the checkbox. */\n click() {\n this.input.click();\n }\n \n /** Sets focus on the checkbox. */\n focus(options?: FocusOptions) {\n this.input.focus(options);\n }\n \n /** Removes focus from the checkbox. */\n blur() {\n this.input.blur();\n }\n \n connectedCallback() {\n super.connectedCallback();\n this.updateHostClass();\n this.emit('nile-init');\n }\n \n disconnectedCallback() {\n super.disconnectedCallback();\n this.emit('nile-destroy');\n }\n \n updated(changedProperties: Map<string | number | symbol, unknown>) {\n super.updated(changedProperties);\n if (changedProperties.has('helpText')) {\n this.updateHostClass();\n }\n }\n \n private updateHostClass() {\n if (this.helpText) {\n this.classList.add('full-width');\n } else {\n this.classList.remove('full-width');\n }\n }\n \n render() {\n const hasHelpText = this.helpText ? true : false;\n const hasErrorMessage = this.errorMessage ? true : false;\n \n return html`\n <label\n part=\"base\"\n class=${classMap({\n checkbox: true,\n 'checkbox--checked': this.checked,\n 'checkbox--disabled': this.disabled,\n 'checkbox--focused': this.hasFocus,\n 'checkbox--indeterminate': this.indeterminate,\n 'checkbox--medium': this.size === 'medium',\n })}\n >\n <input\n class=\"checkbox__input\"\n type=\"checkbox\"\n title=${\n this\n .title /* An empty title prevents browser validation tooltips from appearing on hover */\n }\n name=${this.name}\n value=${ifDefined(this.value)}\n .indeterminate=${live(this.indeterminate)}\n .checked=${live(this.checked)}\n .disabled=${this.disabled}\n .required=${this.required}\n aria-checked=${this.checked ? 'true' : 'false'}\n @click=${this.handleClick}\n @input=${this.handleInput}\n @blur=${this.handleBlur}\n @focus=${this.handleFocus}\n />\n\n <span\n part=\"control${this.checked ? ' control--checked' : ''}${this\n .indeterminate\n ? ' control--indeterminate'\n : ''}\"\n class=\"checkbox__control\"\n >\n ${this.checked\n ? html`\n <nile-icon\n part=\"checked-icon\"\n class=\"checkbox__checked-icon\"\n color=\"white\"\n library=\"system\"\n name=\"tick\"\n size=\"12\"\n ></nile-icon>\n `\n : ''}\n ${!this.checked && this.indeterminate\n ? html`\n <nile-icon\n part=\"indeterminate-icon\"\n class=\"checkbox__indeterminate-icon\"\n library=\"system\"\n color=\"white\"\n name=\"minus\"\n size=\"12\"\n ></nile-icon>\n `\n : ''}\n </span>\n\n <div part=\"label\" class=\"checkbox__label\">\n ${typeof this.label === 'boolean' ? '' : this.label}\n <slot></slot>\n </div>\n </label>\n\n ${hasHelpText\n ? html` <nile-form-help-text>${this.helpText}</nile-form-help-text> `\n : ``}\n \n ${hasErrorMessage\n ? html`\n <nile-form-error-message\n >${this.errorMessage}</nile-form-error-message\n >\n `\n : ``}\n `;\n }\n}\n \nexport default NileCheckbox;\n \ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-checkbox': NileCheckbox;\n }\n}"],"names":["NileCheckbox","_m","p","constructor","super","this","hasFocus","title","name","size","disabled","checked","label","indeterminate","defaultChecked","helpText","errorMessage","showHelpText","form","required","_this","_inherits","_createClass","key","value","toggleHelpText","handleClick","emit","handleBlur","handleInput","handleFocus","handleStateChange","input","click","focus","options","blur","connectedCallback","updateHostClass","disconnectedCallback","updated","changedProperties","has","classList","add","remove","render","hasHelpText","hasErrorMessage","html","_templateObject","_taggedTemplateLiteral","classMap","checkbox","ifDefined","live","_templateObject2","_templateObject3","_templateObject4","_templateObject5","NileElement","styles","__decorate","query","prototype","state","property","reflect","type","Boolean","String","defaultValue","attribute","watch","waitUntilFirstUpdate","customElement"],"mappings":"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"}
package/dist/nile-checkbox/nile-checkbox.esm.js CHANGED
@@ -1,16 +1,16 @@
1
- import{__decorate as e}from"tslib";import{html as t}from"lit";import{query as i,state as s,property as o,customElement as c}from"lit/decorators.js";import{s as h}from"./nile-checkbox.css.esm.js";import{classMap as l}from"lit/directives/class-map.js";import{d as n}from"../internal/default-value.esm.js";import{ifDefined as r}from"lit/directives/if-defined.js";import{live as a}from"lit/directives/live.js";import{w as d}from"../internal/watch.esm.js";import{N as m}from"../internal/nile-element.esm.js";let p=class extends m{constructor(){super(),this.hasFocus=!1,this.title="",this.name="",this.size="medium",this.disabled=!1,this.checked=!1,this.label="",this.indeterminate=!1,this.defaultChecked=!1,this.helpText="",this.errorMessage="",this.showHelpText=!1,this.form="",this.required=!1}toggleHelpText(){this.showHelpText=!this.showHelpText}handleClick(){this.checked=!this.checked,this.indeterminate=!1,this.emit("nile-change",{checked:this.checked}),this.emit("valueChange",{checked:this.checked})}handleBlur(){this.hasFocus=!1,this.emit("blur")}handleInput(){this.emit("input")}handleFocus(){this.hasFocus=!0,this.emit("focus")}handleStateChange(){this.input.checked=this.checked,this.input.indeterminate=this.indeterminate}click(){this.input.click()}focus(e){this.input.focus(e)}blur(){this.input.blur()}connectedCallback(){super.connectedCallback(),this.updateHostClass(),this.emit("nile-init")}disconnectedCallback(){super.disconnectedCallback(),this.emit("nile-destroy")}updated(e){super.updated(e),e.has("helpText")&&this.updateHostClass()}updateHostClass(){this.helpText?this.classList.add("full-width"):this.classList.remove("full-width")}render(){const e=!!this.helpText,i=!!this.errorMessage;return t`
1
+ import{__decorate as e}from"tslib";import{html as t}from"lit";import{query as i,state as s,property as h,customElement as l}from"lit/decorators.js";import{s as o}from"./nile-checkbox.css.esm.js";import{classMap as c}from"lit/directives/class-map.js";import{d as r}from"../internal/default-value.esm.js";import{ifDefined as a}from"lit/directives/if-defined.js";import{live as n}from"lit/directives/live.js";import{w as d}from"../internal/watch.esm.js";import{N as m}from"../internal/nile-element.esm.js";let p=class extends m{constructor(){super(),this.hasFocus=!1,this.title="",this.name="",this.size="medium",this.disabled=!1,this.checked=!1,this.label="",this.indeterminate=!1,this.defaultChecked=!1,this.helpText="",this.errorMessage="",this.showHelpText=!1,this.form="",this.required=!1}toggleHelpText(){this.showHelpText=!this.showHelpText}handleClick(){this.checked=!this.checked,this.indeterminate=!1,this.emit("nile-change",{checked:this.checked}),this.emit("valueChange",{checked:this.checked})}handleBlur(){this.hasFocus=!1,this.emit("blur")}handleInput(){this.emit("input")}handleFocus(){this.hasFocus=!0,this.emit("focus")}handleStateChange(){this.input.checked=this.checked,this.input.indeterminate=this.indeterminate}click(){this.input.click()}focus(e){this.input.focus(e)}blur(){this.input.blur()}connectedCallback(){super.connectedCallback(),this.updateHostClass(),this.emit("nile-init")}disconnectedCallback(){super.disconnectedCallback(),this.emit("nile-destroy")}updated(e){super.updated(e),e.has("helpText")&&this.updateHostClass()}updateHostClass(){this.helpText?this.classList.add("full-width"):this.classList.remove("full-width")}render(){const e=!!this.helpText,i=!!this.errorMessage;return t`
2
2
  <label
3
3
  part="base"
4
- class=${l({checkbox:!0,"checkbox--checked":this.checked,"checkbox--disabled":this.disabled,"checkbox--focused":this.hasFocus,"checkbox--indeterminate":this.indeterminate,"checkbox--medium":"medium"===this.size})}
4
+ class=${c({checkbox:!0,"checkbox--checked":this.checked,"checkbox--disabled":this.disabled,"checkbox--focused":this.hasFocus,"checkbox--indeterminate":this.indeterminate,"checkbox--medium":"medium"===this.size})}
5
5
  >
6
6
  <input
7
7
  class="checkbox__input"
8
8
  type="checkbox"
9
9
  title=${this.title}
10
10
  name=${this.name}
11
- value=${r(this.value)}
12
- .indeterminate=${a(this.indeterminate)}
13
- .checked=${a(this.checked)}
11
+ value=${a(this.value)}
12
+ .indeterminate=${n(this.indeterminate)}
13
+ .checked=${n(this.checked)}
14
14
  .disabled=${this.disabled}
15
15
  .required=${this.required}
16
16
  aria-checked=${this.checked?"true":"false"}
@@ -19,7 +19,7 @@ import{__decorate as e}from"tslib";import{html as t}from"lit";import{query as i,
19
19
  @blur=${this.handleBlur}
20
20
  @focus=${this.handleFocus}
21
21
  />
22
-
22
+
23
23
  <span
24
24
  part="control${this.checked?" control--checked":""}${this.indeterminate?" control--indeterminate":""}"
25
25
  class="checkbox__control"
@@ -45,25 +45,18 @@ import{__decorate as e}from"tslib";import{html as t}from"lit";import{query as i,
45
45
  ></nile-icon>
46
46
  `:""}
47
47
  </span>
48
-
48
+
49
49
  <div part="label" class="checkbox__label">
50
50
  ${"boolean"==typeof this.label?"":this.label}
51
51
  <slot></slot>
52
52
  </div>
53
53
  </label>
54
-
55
- ${e?t`
56
- <nile-tooltip content="${this.helpText}" placement="bottom">
57
- <nile-icon
58
- name="question"
59
- class="checkbox__helptext-icon"
60
- ></nile-icon>
61
- </nile-tooltip>
62
- `:""}
63
-
54
+
55
+ ${e?t` <nile-form-help-text>${this.helpText}</nile-form-help-text> `:""}
56
+
64
57
  ${i?t`
65
58
  <nile-form-error-message
66
59
  >${this.errorMessage}</nile-form-error-message
67
60
  >
68
61
  `:""}
69
- `}};p.styles=h,e([i('input[type="checkbox"]')],p.prototype,"input",void 0),e([s()],p.prototype,"hasFocus",void 0),e([o()],p.prototype,"title",void 0),e([o()],p.prototype,"name",void 0),e([o()],p.prototype,"value",void 0),e([o({reflect:!0})],p.prototype,"size",void 0),e([o({type:Boolean,reflect:!0})],p.prototype,"disabled",void 0),e([o({type:Boolean,reflect:!0})],p.prototype,"checked",void 0),e([o({type:String,reflect:!0})],p.prototype,"label",void 0),e([o({type:Boolean,reflect:!0})],p.prototype,"indeterminate",void 0),e([n("checked")],p.prototype,"defaultChecked",void 0),e([o({attribute:"help-text",reflect:!0})],p.prototype,"helpText",void 0),e([o({attribute:"error-message",reflect:!0})],p.prototype,"errorMessage",void 0),e([o({type:Boolean})],p.prototype,"showHelpText",void 0),e([o({reflect:!0})],p.prototype,"form",void 0),e([o({type:Boolean,reflect:!0})],p.prototype,"required",void 0),e([d(["checked","indeterminate"],{waitUntilFirstUpdate:!0})],p.prototype,"handleStateChange",null),p=e([c("nile-checkbox")],p);export{p as N};
62
+ `}};p.styles=o,e([i('input[type="checkbox"]')],p.prototype,"input",void 0),e([s()],p.prototype,"hasFocus",void 0),e([h()],p.prototype,"title",void 0),e([h()],p.prototype,"name",void 0),e([h()],p.prototype,"value",void 0),e([h({reflect:!0})],p.prototype,"size",void 0),e([h({type:Boolean,reflect:!0})],p.prototype,"disabled",void 0),e([h({type:Boolean,reflect:!0})],p.prototype,"checked",void 0),e([h({type:String,reflect:!0})],p.prototype,"label",void 0),e([h({type:Boolean,reflect:!0})],p.prototype,"indeterminate",void 0),e([r("checked")],p.prototype,"defaultChecked",void 0),e([h({attribute:"help-text",reflect:!0})],p.prototype,"helpText",void 0),e([h({attribute:"error-message",reflect:!0})],p.prototype,"errorMessage",void 0),e([h({type:Boolean})],p.prototype,"showHelpText",void 0),e([h({reflect:!0})],p.prototype,"form",void 0),e([h({type:Boolean,reflect:!0})],p.prototype,"required",void 0),e([d(["checked","indeterminate"],{waitUntilFirstUpdate:!0})],p.prototype,"handleStateChange",null),p=e([l("nile-checkbox")],p);export{p as N};
package/dist/src/nile-checkbox/nile-checkbox.js CHANGED
@@ -167,7 +167,7 @@ let NileCheckbox = class NileCheckbox extends NileElement {
167
167
  @blur=${this.handleBlur}
168
168
  @focus=${this.handleFocus}
169
169
  />
170
-
170
+
171
171
  <span
172
172
  part="control${this.checked ? ' control--checked' : ''}${this
173
173
  .indeterminate
@@ -200,24 +200,17 @@ let NileCheckbox = class NileCheckbox extends NileElement {
200
200
  `
201
201
  : ''}
202
202
  </span>
203
-
203
+
204
204
  <div part="label" class="checkbox__label">
205
205
  ${typeof this.label === 'boolean' ? '' : this.label}
206
206
  <slot></slot>
207
207
  </div>
208
208
  </label>
209
-
209
+
210
210
  ${hasHelpText
211
- ? html `
212
- <nile-tooltip content="${this.helpText}" placement="bottom">
213
- <nile-icon
214
- name="question"
215
- class="checkbox__helptext-icon"
216
- ></nile-icon>
217
- </nile-tooltip>
218
- `
211
+ ? html ` <nile-form-help-text>${this.helpText}</nile-form-help-text> `
219
212
  : ``}
220
-
213
+
221
214
  ${hasErrorMessage
222
215
  ? html `
223
216
  <nile-form-error-message
package/dist/src/nile-checkbox/nile-checkbox.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"nile-checkbox.js","sourceRoot":"","sources":["../../../src/nile-checkbox/nile-checkbox.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAEL,IAAI,GAGL,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAGnD;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH;;;;;GAKG;AAEI,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,WAAW;IAC3C;QACE,KAAK,EAAE,CAAC;QAOO,aAAQ,GAAG,KAAK,CAAC;QAEtB,UAAK,GAAG,EAAE,CAAC,CAAC,gCAAgC;QAExD,+EAA+E;QACnE,SAAI,GAAG,EAAE,CAAC;QAKtB,2BAA2B;QACE,SAAI,GAAiC,QAAQ,CAAC;QAE3E,6BAA6B;QACe,aAAQ,GAAG,KAAK,CAAC;QAE7D,6CAA6C;QACD,YAAO,GAAG,KAAK,CAAC;QAE5D,iFAAiF;QACtC,UAAK,GAAG,EAAE,CAAC;QAEtD;;;WAGG;QACyC,kBAAa,GAAG,KAAK,CAAC;QAElE,4FAA4F;QACnE,mBAAc,GAAG,KAAK,CAAC;QAEK,aAAQ,GAAG,EAAE,CAAC;QAEV,iBAAY,GAAG,EAAE,CAAC;QAE9C,iBAAY,GAAG,KAAK,CAAC;QAGlD;;;;WAIG;QAC0B,SAAI,GAAG,EAAE,CAAC;QAEvC,2CAA2C;QACC,aAAQ,GAAG,KAAK,CAAC;IApD7D,CAAC;IAsDO,cAAc;QACpB,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC;IACzC,CAAC;IAEO,WAAW;QACjB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;QAC3B,IAAI,CAAC,IAAI,CAAC,aAAa,EAAC,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAC,CAAC,CAAA;QAChD,IAAI,CAAC,IAAI,CAAC,aAAa,EAAC,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAC,CAAC,CAAA;IAClD,CAAC;IAEO,UAAU;QAChB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;QACtB,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IACpB,CAAC;IAEO,WAAW;QACjB,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACrB,CAAC;IAEO,WAAW;QACjB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACrB,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACrB,CAAC;IAGD,iBAAiB;QACf,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,sBAAsB;QACzD,IAAI,CAAC,KAAK,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC,sBAAsB;IACvE,CAAC;IAED,yCAAyC;IACzC,KAAK;QACH,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;IACrB,CAAC;IAED,kCAAkC;IAClC,KAAK,CAAC,OAAsB;QAC1B,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAC5B,CAAC;IAED,uCAAuC;IACvC,IAAI;QACF,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;IACpB,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,eAAe,EAAE,CAAC;QACvB,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IACzB,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;IAC5B,CAAC;IAED,OAAO,CAAC,iBAAyD;QAC/D,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QACjC,IAAI,iBAAiB,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE,CAAC;YACtC,IAAI,CAAC,eAAe,EAAE,CAAC;QACzB,CAAC;IACH,CAAC;IAEO,eAAe;QACrB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;QACnC,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;QACtC,CAAC;IACH,CAAC;IAED,MAAM;QACJ,MAAM,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;QACjD,MAAM,eAAe,GAAG,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;QAEzD,OAAO,IAAI,CAAA;;;gBAGC,QAAQ,CAAC;YACf,QAAQ,EAAE,IAAI;YACd,mBAAmB,EAAE,IAAI,CAAC,OAAO;YACjC,oBAAoB,EAAE,IAAI,CAAC,QAAQ;YACnC,mBAAmB,EAAE,IAAI,CAAC,QAAQ;YAClC,yBAAyB,EAAE,IAAI,CAAC,aAAa;YAC7C,kBAAkB,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;SAC3C,CAAC;;;;;kBAME,IAAI;aACD,KAAK,CAAC,iFACX;iBACO,IAAI,CAAC,IAAI;kBACR,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC;2BACZ,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC;qBAC9B,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;sBACjB,IAAI,CAAC,QAAQ;sBACb,IAAI,CAAC,QAAQ;yBACV,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;mBACrC,IAAI,CAAC,WAAW;mBAChB,IAAI,CAAC,WAAW;kBACjB,IAAI,CAAC,UAAU;mBACd,IAAI,CAAC,WAAW;;;;yBAIV,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI;aAC1D,aAAa;YACd,CAAC,CAAC,yBAAyB;YAC3B,CAAC,CAAC,EAAE;;;YAGJ,IAAI,CAAC,OAAO;YACZ,CAAC,CAAC,IAAI,CAAA;;;;;;;;;eASH;YACH,CAAC,CAAC,EAAE;YACJ,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,aAAa;YACnC,CAAC,CAAC,IAAI,CAAA;;;;;;;;;eASH;YACH,CAAC,CAAC,EAAE;;;;YAIJ,OAAO,IAAI,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK;;;;;QAKrD,WAAW;YACX,CAAC,CAAC,IAAI,CAAA;qCACuB,IAAI,CAAC,QAAQ;;;;;;WAMvC;YACH,CAAC,CAAC,EAAE;;QAEJ,eAAe;YACf,CAAC,CAAC,IAAI,CAAA;;iBAEG,IAAI,CAAC,YAAY;;WAEvB;YACH,CAAC,CAAC,EAAE;KACP,CAAC;IACJ,CAAC;;AA1NM,mBAAM,GAAmB,MAAM,AAAzB,CAA0B;AAEN;IAAhC,KAAK,CAAC,wBAAwB,CAAC;2CAAyB;AAExC;IAAhB,KAAK,EAAE;8CAA0B;AAEtB;IAAX,QAAQ,EAAE;2CAAY;AAGX;IAAX,QAAQ,EAAE;0CAAW;AAGV;IAAX,QAAQ,EAAE;2CAAgB;AAGE;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAA+C;AAG/B;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAAkB;AAGjB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAAiB;AAGjB;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAAY;AAMV;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDAAuB;AAGzC;IAAxB,YAAY,CAAC,SAAS,CAAC;oDAAwB;AAEK;IAApD,QAAQ,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAAe;AAEV;IAAxD,QAAQ,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAAmB;AAE9C;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDAAsB;AAQrB;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAAW;AAGK;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAAkB;AA4B7D;IADC,KAAK,CAAC,CAAC,SAAS,EAAE,eAAe,CAAC,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;qDAInE;AAtFU,YAAY;IADxB,aAAa,CAAC,eAAe,CAAC;GAClB,YAAY,CAgOxB;;AAED,eAAe,YAAY,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n \nimport {\n LitElement,\n html,\n CSSResultArray,\n TemplateResult,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-checkbox.css';\n \nimport { classMap } from 'lit/directives/class-map.js';\nimport { query, state } from 'lit/decorators.js';\nimport { defaultValue } from '../internal/default-value';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { watch } from '../internal/watch';\nimport NileElement from '../internal/nile-element';\nimport type { CSSResultGroup } from 'lit';\n \n/**\n * @summary Checkboxes allow the user to toggle an option on or off.\n *\n * @dependency nile-icon\n *\n * @slot - The checkbox's label.\n *\n * @event nile-blur - Emitted when the checkbox loses focus.\n * @event nile-change - Emitted when the checked state changes.\n * @event nile-focus - Emitted when the checkbox gains focus.\n * @event nile-input - Emitted when the checkbox receives input.\n * @event nile-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart base - The component's base wrapper.\n * @csspart control - The square container that wraps the checkbox's checked state.\n * @csspart control--checked - Matches the control part when the checkbox is checked.\n * @csspart control--indeterminate - Matches the control part when the checkbox is indeterminate.\n * @csspart checked-icon - The checked icon, an `<nile-icon>` element.\n * @csspart indeterminate-icon - The indeterminate icon, an `<nile-icon>` element.\n * @csspart label - The container that wraps the checkbox's label.\n */\n \n/**\n * Nile icon component.\n *\n * @tag nile-checkbox\n *\n */\n@customElement('nile-checkbox')\nexport class NileCheckbox extends NileElement {\n constructor() {\n super();\n }\n \n static styles: CSSResultGroup = styles;\n \n @query('input[type=\"checkbox\"]') input: HTMLInputElement;\n \n @state() private hasFocus = false;\n \n @property() title = ''; // make reactive to pass through\n \n /** The name of the checkbox, submitted as a name/value pair with form data. */\n @property() name = '';\n \n /** The current value of the checkbox, submitted as a name/value pair with form data. */\n @property() value: boolean;\n \n /** The checkbox's size. */\n @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n \n /** Disables the checkbox. */\n @property({ type: Boolean, reflect: true }) disabled = false;\n \n /** Draws the checkbox in a checked state. */\n @property({ type: Boolean, reflect: true }) checked = false;\n \n /** Label, declared this property for backward compatibility of old component */\n @property({ type: String, reflect: true }) label = '';\n \n /**\n * Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\n * all/none\" behavior when associated checkboxes have a mix of checked and unchecked states.\n */\n @property({ type: Boolean, reflect: true }) indeterminate = false;\n \n /** The default value of the form control. Primarily used for resetting the form control. */\n @defaultValue('checked') defaultChecked = false;\n \n @property({ attribute: 'help-text', reflect: true }) helpText = '';\n \n @property({ attribute: 'error-message', reflect: true }) errorMessage = '';\n \n @property({ type: Boolean }) showHelpText = false;\n \n \n /**\n * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\n * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in\n * the same document or shadow root for this to work.\n */\n @property({ reflect: true }) form = '';\n \n /** Makes the checkbox a required field. */\n @property({ type: Boolean, reflect: true }) required = false;\n \n private toggleHelpText() {\n this.showHelpText = !this.showHelpText;\n }\n \n private handleClick() {\n this.checked = !this.checked;\n this.indeterminate = false;\n this.emit('nile-change',{checked: this.checked})\n this.emit('valueChange',{checked: this.checked})\n }\n \n private handleBlur() {\n this.hasFocus = false;\n this.emit('blur');\n }\n \n private handleInput() {\n this.emit('input');\n }\n \n private handleFocus() {\n this.hasFocus = true;\n this.emit('focus');\n }\n \n @watch(['checked', 'indeterminate'], { waitUntilFirstUpdate: true })\n handleStateChange() {\n this.input.checked = this.checked; // force a sync update\n this.input.indeterminate = this.indeterminate; // force a sync update\n }\n \n /** Simulates a click on the checkbox. */\n click() {\n this.input.click();\n }\n \n /** Sets focus on the checkbox. */\n focus(options?: FocusOptions) {\n this.input.focus(options);\n }\n \n /** Removes focus from the checkbox. */\n blur() {\n this.input.blur();\n }\n \n connectedCallback() {\n super.connectedCallback();\n this.updateHostClass();\n this.emit('nile-init');\n }\n \n disconnectedCallback() {\n super.disconnectedCallback();\n this.emit('nile-destroy');\n }\n \n updated(changedProperties: Map<string | number | symbol, unknown>) {\n super.updated(changedProperties);\n if (changedProperties.has('helpText')) {\n this.updateHostClass();\n }\n }\n \n private updateHostClass() {\n if (this.helpText) {\n this.classList.add('full-width');\n } else {\n this.classList.remove('full-width');\n }\n }\n \n render() {\n const hasHelpText = this.helpText ? true : false;\n const hasErrorMessage = this.errorMessage ? true : false;\n \n return html`\n <label\n part=\"base\"\n class=${classMap({\n checkbox: true,\n 'checkbox--checked': this.checked,\n 'checkbox--disabled': this.disabled,\n 'checkbox--focused': this.hasFocus,\n 'checkbox--indeterminate': this.indeterminate,\n 'checkbox--medium': this.size === 'medium',\n })}\n >\n <input\n class=\"checkbox__input\"\n type=\"checkbox\"\n title=${\n this\n .title /* An empty title prevents browser validation tooltips from appearing on hover */\n }\n name=${this.name}\n value=${ifDefined(this.value)}\n .indeterminate=${live(this.indeterminate)}\n .checked=${live(this.checked)}\n .disabled=${this.disabled}\n .required=${this.required}\n aria-checked=${this.checked ? 'true' : 'false'}\n @click=${this.handleClick}\n @input=${this.handleInput}\n @blur=${this.handleBlur}\n @focus=${this.handleFocus}\n />\n \n <span\n part=\"control${this.checked ? ' control--checked' : ''}${this\n .indeterminate\n ? ' control--indeterminate'\n : ''}\"\n class=\"checkbox__control\"\n >\n ${this.checked\n ? html`\n <nile-icon\n part=\"checked-icon\"\n class=\"checkbox__checked-icon\"\n color=\"white\"\n library=\"system\"\n name=\"tick\"\n size=\"12\"\n ></nile-icon>\n `\n : ''}\n ${!this.checked && this.indeterminate\n ? html`\n <nile-icon\n part=\"indeterminate-icon\"\n class=\"checkbox__indeterminate-icon\"\n library=\"system\"\n color=\"white\"\n name=\"minus\"\n size=\"12\"\n ></nile-icon>\n `\n : ''}\n </span>\n \n <div part=\"label\" class=\"checkbox__label\">\n ${typeof this.label === 'boolean' ? '' : this.label}\n <slot></slot>\n </div>\n </label>\n \n ${hasHelpText\n ? html`\n <nile-tooltip content=\"${this.helpText}\" placement=\"bottom\">\n <nile-icon\n name=\"question\"\n class=\"checkbox__helptext-icon\"\n ></nile-icon>\n </nile-tooltip>\n `\n : ``}\n \n ${hasErrorMessage\n ? html`\n <nile-form-error-message\n >${this.errorMessage}</nile-form-error-message\n >\n `\n : ``}\n `;\n }\n}\n \nexport default NileCheckbox;\n \ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-checkbox': NileCheckbox;\n }\n}"]}
1
+ {"version":3,"file":"nile-checkbox.js","sourceRoot":"","sources":["../../../src/nile-checkbox/nile-checkbox.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n \nimport {\n LitElement,\n html,\n CSSResultArray,\n TemplateResult,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-checkbox.css';\n \nimport { classMap } from 'lit/directives/class-map.js';\nimport { query, state } from 'lit/decorators.js';\nimport { defaultValue } from '../internal/default-value';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { watch } from '../internal/watch';\nimport NileElement from '../internal/nile-element';\nimport type { CSSResultGroup } from 'lit';\n \n/**\n * @summary Checkboxes allow the user to toggle an option on or off.\n *\n * @dependency nile-icon\n *\n * @slot - The checkbox's label.\n *\n * @event nile-blur - Emitted when the checkbox loses focus.\n * @event nile-change - Emitted when the checked state changes.\n * @event nile-focus - Emitted when the checkbox gains focus.\n * @event nile-input - Emitted when the checkbox receives input.\n * @event nile-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart base - The component's base wrapper.\n * @csspart control - The square container that wraps the checkbox's checked state.\n * @csspart control--checked - Matches the control part when the checkbox is checked.\n * @csspart control--indeterminate - Matches the control part when the checkbox is indeterminate.\n * @csspart checked-icon - The checked icon, an `<nile-icon>` element.\n * @csspart indeterminate-icon - The indeterminate icon, an `<nile-icon>` element.\n * @csspart label - The container that wraps the checkbox's label.\n */\n \n/**\n * Nile icon component.\n *\n * @tag nile-checkbox\n *\n */\n@customElement('nile-checkbox')\nexport class NileCheckbox extends NileElement {\n constructor() {\n super();\n }\n \n static styles: CSSResultGroup = styles;\n \n @query('input[type=\"checkbox\"]') input: HTMLInputElement;\n \n @state() private hasFocus = false;\n \n @property() title = ''; // make reactive to pass through\n \n /** The name of the checkbox, submitted as a name/value pair with form data. */\n @property() name = '';\n \n /** The current value of the checkbox, submitted as a name/value pair with form data. */\n @property() value: boolean;\n \n /** The checkbox's size. */\n @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n \n /** Disables the checkbox. */\n @property({ type: Boolean, reflect: true }) disabled = false;\n \n /** Draws the checkbox in a checked state. */\n @property({ type: Boolean, reflect: true }) checked = false;\n \n /** Label, declared this property for backward compatibility of old component */\n @property({ type: String, reflect: true }) label = '';\n \n /**\n * Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\n * all/none\" behavior when associated checkboxes have a mix of checked and unchecked states.\n */\n @property({ type: Boolean, reflect: true }) indeterminate = false;\n \n /** The default value of the form control. Primarily used for resetting the form control. */\n @defaultValue('checked') defaultChecked = false;\n \n @property({ attribute: 'help-text', reflect: true }) helpText = '';\n \n @property({ attribute: 'error-message', reflect: true }) errorMessage = '';\n \n @property({ type: Boolean }) showHelpText = false;\n \n \n /**\n * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\n * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in\n * the same document or shadow root for this to work.\n */\n @property({ reflect: true }) form = '';\n \n /** Makes the checkbox a required field. */\n @property({ type: Boolean, reflect: true }) required = false;\n \n private toggleHelpText() {\n this.showHelpText = !this.showHelpText;\n }\n \n private handleClick() {\n this.checked = !this.checked;\n this.indeterminate = false;\n this.emit('nile-change',{checked: this.checked})\n this.emit('valueChange',{checked: this.checked})\n }\n \n private handleBlur() {\n this.hasFocus = false;\n this.emit('blur');\n }\n \n private handleInput() {\n this.emit('input');\n }\n \n private handleFocus() {\n this.hasFocus = true;\n this.emit('focus');\n }\n \n @watch(['checked', 'indeterminate'], { waitUntilFirstUpdate: true })\n handleStateChange() {\n this.input.checked = this.checked; // force a sync update\n this.input.indeterminate = this.indeterminate; // force a sync update\n }\n \n /** Simulates a click on the checkbox. */\n click() {\n this.input.click();\n }\n \n /** Sets focus on the checkbox. */\n focus(options?: FocusOptions) {\n this.input.focus(options);\n }\n \n /** Removes focus from the checkbox. */\n blur() {\n this.input.blur();\n }\n \n connectedCallback() {\n super.connectedCallback();\n this.updateHostClass();\n this.emit('nile-init');\n }\n \n disconnectedCallback() {\n super.disconnectedCallback();\n this.emit('nile-destroy');\n }\n \n updated(changedProperties: Map<string | number | symbol, unknown>) {\n super.updated(changedProperties);\n if (changedProperties.has('helpText')) {\n this.updateHostClass();\n }\n }\n \n private updateHostClass() {\n if (this.helpText) {\n this.classList.add('full-width');\n } else {\n this.classList.remove('full-width');\n }\n }\n \n render() {\n const hasHelpText = this.helpText ? true : false;\n const hasErrorMessage = this.errorMessage ? true : false;\n \n return html`\n <label\n part=\"base\"\n class=${classMap({\n checkbox: true,\n 'checkbox--checked': this.checked,\n 'checkbox--disabled': this.disabled,\n 'checkbox--focused': this.hasFocus,\n 'checkbox--indeterminate': this.indeterminate,\n 'checkbox--medium': this.size === 'medium',\n })}\n >\n <input\n class=\"checkbox__input\"\n type=\"checkbox\"\n title=${\n this\n .title /* An empty title prevents browser validation tooltips from appearing on hover */\n }\n name=${this.name}\n value=${ifDefined(this.value)}\n .indeterminate=${live(this.indeterminate)}\n .checked=${live(this.checked)}\n .disabled=${this.disabled}\n .required=${this.required}\n aria-checked=${this.checked ? 'true' : 'false'}\n @click=${this.handleClick}\n @input=${this.handleInput}\n @blur=${this.handleBlur}\n @focus=${this.handleFocus}\n />\n\n <span\n part=\"control${this.checked ? ' control--checked' : ''}${this\n .indeterminate\n ? ' control--indeterminate'\n : ''}\"\n class=\"checkbox__control\"\n >\n ${this.checked\n ? html`\n <nile-icon\n part=\"checked-icon\"\n class=\"checkbox__checked-icon\"\n color=\"white\"\n library=\"system\"\n name=\"tick\"\n size=\"12\"\n ></nile-icon>\n `\n : ''}\n ${!this.checked && this.indeterminate\n ? html`\n <nile-icon\n part=\"indeterminate-icon\"\n class=\"checkbox__indeterminate-icon\"\n library=\"system\"\n color=\"white\"\n name=\"minus\"\n size=\"12\"\n ></nile-icon>\n `\n : ''}\n </span>\n\n <div part=\"label\" class=\"checkbox__label\">\n ${typeof this.label === 'boolean' ? '' : this.label}\n <slot></slot>\n </div>\n </label>\n\n ${hasHelpText\n ? html` <nile-form-help-text>${this.helpText}</nile-form-help-text> `\n : ``}\n \n ${hasErrorMessage\n ? html`\n <nile-form-error-message\n >${this.errorMessage}</nile-form-error-message\n >\n `\n : ``}\n `;\n }\n}\n \nexport default NileCheckbox;\n \ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-checkbox': NileCheckbox;\n }\n}"]}