@aquera/nile-elements 0.0.4-2 → 0.0.4-3
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/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-checkbox/nile-checkbox.css.js +29 -11
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-checkbox/nile-checkbox.css.js.map +1 -1
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-checkbox/nile-checkbox.d.ts +2 -0
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-checkbox/nile-checkbox.js +17 -8
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-checkbox/nile-checkbox.js.map +1 -1
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/tsconfig.tsbuildinfo +1 -1
- package/demo/index.html +2 -1
- package/dist/index.iife.js +39 -21
- package/dist/nile-checkbox/nile-checkbox.cjs.js +1 -1
- package/dist/nile-checkbox/nile-checkbox.cjs.js.map +1 -1
- package/dist/nile-checkbox/nile-checkbox.css.cjs.js +1 -1
- package/dist/nile-checkbox/nile-checkbox.css.cjs.js.map +1 -1
- package/dist/nile-checkbox/nile-checkbox.css.esm.js +29 -11
- package/dist/nile-checkbox/nile-checkbox.esm.js +13 -13
- package/dist/src/nile-checkbox/nile-checkbox.css.js +29 -11
- package/dist/src/nile-checkbox/nile-checkbox.css.js.map +1 -1
- package/dist/src/nile-checkbox/nile-checkbox.d.ts +2 -0
- package/dist/src/nile-checkbox/nile-checkbox.js +17 -8
- package/dist/src/nile-checkbox/nile-checkbox.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/nile-checkbox/nile-checkbox.css.ts +29 -11
- package/src/nile-checkbox/nile-checkbox.ts +21 -17
package/demo/index.html
CHANGED
|
@@ -129,6 +129,7 @@
|
|
|
129
129
|
<nile-icon name="search"></nile-icon>
|
|
130
130
|
<div class="stack frame-left-lg">
|
|
131
131
|
<h1>Setup Reports</h1>
|
|
132
|
+
<nile-checkbox label="This is label" help-text="this is help text"> </nile-checkbox>
|
|
132
133
|
<nile-textarea label="this is label" help-text="i'm here to help you" resize="vertical"> </nile-textarea>
|
|
133
134
|
<nile-input label="Name of the report" required>
|
|
134
135
|
<p slot="help" class="nds-help">2FA Enabled</p>
|
|
@@ -188,7 +189,7 @@
|
|
|
188
189
|
const w = new Worker('fetchTextFromFileWorker.js');
|
|
189
190
|
const getMessage = (msg)=>{
|
|
190
191
|
const icons = splitStringBy(msg.data, ',');
|
|
191
|
-
renderNewIcons(icons)
|
|
192
|
+
// renderNewIcons(icons)
|
|
192
193
|
}
|
|
193
194
|
function splitStringBy(str, seperator){
|
|
194
195
|
return str.split(seperator)
|
package/dist/index.iife.js
CHANGED
|
@@ -1377,7 +1377,7 @@ const YM=Symbol.for(""),bM=M=>{if((null==M?void 0:M.r)===YM)return null==M?void
|
|
|
1377
1377
|
display: none;
|
|
1378
1378
|
}
|
|
1379
1379
|
`,N([zM({type:Boolean,reflect:!0})],M.NileDrawer.prototype,"open",void 0),N([AM()],M.NileDrawer.prototype,"domExistence",void 0),M.NileDrawer=N([uM("nile-drawer")],M.NileDrawer);const JM=u`
|
|
1380
|
-
|
|
1380
|
+
:host {
|
|
1381
1381
|
display: inline-block;
|
|
1382
1382
|
}
|
|
1383
1383
|
|
|
@@ -1407,8 +1407,10 @@ const YM=Symbol.for(""),bM=M=>{if((null==M?void 0:M.r)===YM)return null==M?void
|
|
|
1407
1407
|
border: solid 1px var(--nile-colors-neutral-700);
|
|
1408
1408
|
background-color: var(--nile-colors-white-base);
|
|
1409
1409
|
border-radius: 4px;
|
|
1410
|
-
transition: var(--nile-transition-duration-default border-color),
|
|
1411
|
-
|
|
1410
|
+
transition: var(--nile-transition-duration-default border-color),
|
|
1411
|
+
var(--nile-transition-duration-default) background-color,
|
|
1412
|
+
var(--nile-transition-duration-default) color,
|
|
1413
|
+
var(--nile-transition-duration-default box-shadow);
|
|
1412
1414
|
}
|
|
1413
1415
|
|
|
1414
1416
|
.checkbox__input {
|
|
@@ -1419,20 +1421,22 @@ const YM=Symbol.for(""),bM=M=>{if((null==M?void 0:M.r)===YM)return null==M?void
|
|
|
1419
1421
|
pointer-events: none;
|
|
1420
1422
|
}
|
|
1421
1423
|
|
|
1422
|
-
|
|
1423
1424
|
/* svg {
|
|
1424
1425
|
display:none !important;
|
|
1425
1426
|
} */
|
|
1426
1427
|
|
|
1427
1428
|
/* Hover */
|
|
1428
|
-
.checkbox:not(.checkbox--checked):not(.checkbox--disabled)
|
|
1429
|
+
.checkbox:not(.checkbox--checked):not(.checkbox--disabled)
|
|
1430
|
+
.checkbox__control:hover {
|
|
1429
1431
|
background: var(--nile-colors-primary-100);
|
|
1430
1432
|
border: 1px solid var(--nile-colors-primary-600);
|
|
1431
1433
|
border-radius: 4px;
|
|
1432
1434
|
}
|
|
1433
1435
|
|
|
1434
1436
|
/* Focus */
|
|
1435
|
-
.checkbox:not(.checkbox--checked):not(.checkbox--disabled)
|
|
1437
|
+
.checkbox:not(.checkbox--checked):not(.checkbox--disabled)
|
|
1438
|
+
.checkbox__input:focus-visible
|
|
1439
|
+
~ .checkbox__control {
|
|
1436
1440
|
outline: solid 3px hsl(198.6 88.7% 48.4% / 40%);
|
|
1437
1441
|
outline-offset: 1px;
|
|
1438
1442
|
}
|
|
@@ -1446,14 +1450,19 @@ const YM=Symbol.for(""),bM=M=>{if((null==M?void 0:M.r)===YM)return null==M?void
|
|
|
1446
1450
|
|
|
1447
1451
|
/* Checked/indeterminate + hover */
|
|
1448
1452
|
.checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,
|
|
1449
|
-
.checkbox.checkbox--indeterminate:not(.checkbox--disabled)
|
|
1453
|
+
.checkbox.checkbox--indeterminate:not(.checkbox--disabled)
|
|
1454
|
+
.checkbox__control:hover {
|
|
1450
1455
|
background: var(--nile-colors-primary-900);
|
|
1451
1456
|
border: 1px solid var(--nile-colors-primary-900);
|
|
1452
1457
|
}
|
|
1453
1458
|
|
|
1454
1459
|
/* Checked/indeterminate + focus */
|
|
1455
|
-
.checkbox.checkbox--checked:not(.checkbox--disabled)
|
|
1456
|
-
|
|
1460
|
+
.checkbox.checkbox--checked:not(.checkbox--disabled)
|
|
1461
|
+
.checkbox__input:focus-visible
|
|
1462
|
+
~ .checkbox__control,
|
|
1463
|
+
.checkbox.checkbox--indeterminate:not(.checkbox--disabled)
|
|
1464
|
+
.checkbox__input:focus-visible
|
|
1465
|
+
~ .checkbox__control {
|
|
1457
1466
|
outline: solid 3px hsl(198.6 88.7% 48.4% / 40%);
|
|
1458
1467
|
outline-offset: 1px;
|
|
1459
1468
|
}
|
|
@@ -1480,13 +1489,22 @@ const YM=Symbol.for(""),bM=M=>{if((null==M?void 0:M.r)===YM)return null==M?void
|
|
|
1480
1489
|
|
|
1481
1490
|
:host([required]) .checkbox__label::after {
|
|
1482
1491
|
content: '*';
|
|
1483
|
-
margin-inline-start: -2px
|
|
1492
|
+
margin-inline-start: -2px;
|
|
1484
1493
|
}
|
|
1485
1494
|
|
|
1486
|
-
|
|
1495
|
+
.checkbox__checked-icon {
|
|
1487
1496
|
--nile-svg-stroke: white;
|
|
1488
1497
|
}
|
|
1489
|
-
|
|
1498
|
+
|
|
1499
|
+
.checkbox__indeterminate-icon {
|
|
1500
|
+
--nile-svg-stroke: white;
|
|
1501
|
+
}
|
|
1502
|
+
|
|
1503
|
+
.checkbox__icon {
|
|
1504
|
+
float: right;
|
|
1505
|
+
cursor: pointer;
|
|
1506
|
+
}
|
|
1507
|
+
`;M.NileCheckbox=class extends GM{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.showHelpText=!1,this.errorMessage="",this.form="",this.required=!1}toggleHelpText(){this.showHelpText=!this.showHelpText}handleClick(){this.checked=!this.checked,this.indeterminate=!1,this.dispatchEvent(new CustomEvent("valueChange",{composed:!0,bubbles:!0,detail:{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(M){this.input.focus(M)}blur(){this.input.blur()}render(){const M=!!this.helpText,N=!!this.errorMessage;return V`
|
|
1490
1508
|
<label
|
|
1491
1509
|
part="base"
|
|
1492
1510
|
class=${aM({checkbox:!0,"checkbox--checked":this.checked,"checkbox--disabled":this.disabled,"checkbox--focused":this.hasFocus,"checkbox--indeterminate":this.indeterminate,"checkbox--medium":"medium"===this.size})}
|
|
@@ -1540,16 +1558,16 @@ const YM=Symbol.for(""),bM=M=>{if((null==M?void 0:M.r)===YM)return null==M?void
|
|
|
1540
1558
|
</div>
|
|
1541
1559
|
</label>
|
|
1542
1560
|
|
|
1543
|
-
${M?V`
|
|
1544
|
-
<nile-form-help-text>${this.helpText}</nile-form-help-text>
|
|
1545
|
-
`:""}
|
|
1561
|
+
${M?V` <nile-icon name="question" @click=${this.toggleHelpText} class="checkbox__icon"></nile-icon> `:""}
|
|
1546
1562
|
|
|
1547
|
-
|
|
1548
|
-
|
|
1549
|
-
|
|
1550
|
-
|
|
1551
|
-
|
|
1552
|
-
|
|
1563
|
+
${M&&this.showHelpText?V` <nile-form-help-text>${this.helpText}</nile-form-help-text> `:""}
|
|
1564
|
+
|
|
1565
|
+
${N?V`
|
|
1566
|
+
<nile-form-error-message
|
|
1567
|
+
>${this.errorMessage}</nile-form-error-message
|
|
1568
|
+
>
|
|
1569
|
+
`:""}
|
|
1570
|
+
`}},M.NileCheckbox.styles=JM,N([tM('input[type="checkbox"]')],M.NileCheckbox.prototype,"input",void 0),N([AM()],M.NileCheckbox.prototype,"hasFocus",void 0),N([zM()],M.NileCheckbox.prototype,"title",void 0),N([zM()],M.NileCheckbox.prototype,"name",void 0),N([zM()],M.NileCheckbox.prototype,"value",void 0),N([zM({reflect:!0})],M.NileCheckbox.prototype,"size",void 0),N([zM({type:Boolean,reflect:!0})],M.NileCheckbox.prototype,"disabled",void 0),N([zM({type:Boolean,reflect:!0})],M.NileCheckbox.prototype,"checked",void 0),N([zM({type:String,reflect:!0})],M.NileCheckbox.prototype,"label",void 0),N([zM({type:Boolean,reflect:!0})],M.NileCheckbox.prototype,"indeterminate",void 0),N([PM("checked")],M.NileCheckbox.prototype,"defaultChecked",void 0),N([zM({attribute:"help-text"})],M.NileCheckbox.prototype,"helpText",void 0),N([zM({type:Boolean})],M.NileCheckbox.prototype,"showHelpText",void 0),N([zM({attribute:"error-message"})],M.NileCheckbox.prototype,"errorMessage",void 0),N([zM({reflect:!0})],M.NileCheckbox.prototype,"form",void 0),N([zM({type:Boolean,reflect:!0})],M.NileCheckbox.prototype,"required",void 0),N([VM(["checked","indeterminate"],{waitUntilFirstUpdate:!0})],M.NileCheckbox.prototype,"handleStateChange",null),M.NileCheckbox=N([uM("nile-checkbox")],M.NileCheckbox);const XM=u`
|
|
1553
1571
|
|
|
1554
1572
|
|
|
1555
1573
|
:host {
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
System.register(["tslib","../index-cd83c5c8.cjs.js","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","../property-0f6a51ec.cjs.js","lit"],function(_export,_context){"use strict";var e,t,
|
|
1
|
+
System.register(["tslib","../index-cd83c5c8.cjs.js","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","../property-0f6a51ec.cjs.js","lit"],function(_export,_context){"use strict";var e,i,t,s,o,c,h,l,r,n,a,d,m,_templateObject,_templateObject2,_templateObject3,_templateObject4,_templateObject5,_templateObject6,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(arg){var key=_toPrimitive(arg,"string");return typeof key==="symbol"?key:String(key);}function _toPrimitive(input,hint){if(typeof input!=="object"||input===null)return input;var prim=input[Symbol.toPrimitive];if(prim!==undefined){var res=prim.call(input,hint||"default");if(typeof res!=="object")return res;throw new TypeError("@@toPrimitive must return a primitive value.");}return(hint==="string"?String:Number)(input);}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);}function _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function _createSuperInternal(){var Super=_getPrototypeOf(Derived),result;if(hasNativeReflectConstruct){var NewTarget=_getPrototypeOf(this).constructor;result=Reflect.construct(Super,arguments,NewTarget);}else{result=Super.apply(this,arguments);}return _possibleConstructorReturn(this,result);};}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(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));return true;}catch(e){return false;}}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}return{setters:[function(_tslib){e=_tslib.__decorate;},function(_index001CjsJs){i=_index001CjsJs.x;},function(_litDecoratorsJs){t=_litDecoratorsJs.query;s=_litDecoratorsJs.state;o=_litDecoratorsJs.customElement;},function(_nileCheckboxCssCjsJs){c=_nileCheckboxCssCjsJs.s;},function(_litDirectivesClassMapJs){h=_litDirectivesClassMapJs.classMap;},function(_internalDefaultValueCjsJs){l=_internalDefaultValueCjsJs.d;},function(_litDirectivesIfDefinedJs){r=_litDirectivesIfDefinedJs.ifDefined;},function(_litDirectivesLiveJs){n=_litDirectivesLiveJs.live;},function(_internalWatchCjsJs){a=_internalWatchCjsJs.w;},function(_internalNileElementCjsJs){d=_internalNileElementCjsJs.N;},function(_property002CjsJs){m=_property002CjsJs.n;},function(_lit){}],execute:function(){_export("N",p=/*#__PURE__*/function(_d){_inherits(p,_d);var _super=_createSuper(p);function p(){var _this;_classCallCheck(this,p);_this=_super.call(this),_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.showHelpText=!1,_this.errorMessage="",_this.form="",_this.required=!1;return _this;}_createClass(p,[{key:"toggleHelpText",value:function toggleHelpText(){this.showHelpText=!this.showHelpText;}},{key:"handleClick",value:function handleClick(){this.checked=!this.checked,this.indeterminate=!1,this.dispatchEvent(new CustomEvent("valueChange",{composed:!0,bubbles:!0,detail:{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:"render",value:function render(){var e=!!this.helpText,t=!!this.errorMessage;return i(_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\n ","\n "])),h({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),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?i(_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?i(_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?i(_templateObject4||(_templateObject4=_taggedTemplateLiteral([" <nile-icon name=\"question\" @click="," class=\"checkbox__icon\"></nile-icon> "])),this.toggleHelpText):"",e&&this.showHelpText?i(_templateObject5||(_templateObject5=_taggedTemplateLiteral([" <nile-form-help-text>","</nile-form-help-text> "])),this.helpText):"",t?i(_templateObject6||(_templateObject6=_taggedTemplateLiteral(["\n <nile-form-error-message\n >","</nile-form-error-message\n >\n "])),this.errorMessage):"");}}]);return p;}(d));p.styles=c,e([t('input[type="checkbox"]')],p.prototype,"input",void 0),e([s()],p.prototype,"hasFocus",void 0),e([m()],p.prototype,"title",void 0),e([m()],p.prototype,"name",void 0),e([m()],p.prototype,"value",void 0),e([m({reflect:!0})],p.prototype,"size",void 0),e([m({type:Boolean,reflect:!0})],p.prototype,"disabled",void 0),e([m({type:Boolean,reflect:!0})],p.prototype,"checked",void 0),e([m({type:String,reflect:!0})],p.prototype,"label",void 0),e([m({type:Boolean,reflect:!0})],p.prototype,"indeterminate",void 0),e([l("checked")],p.prototype,"defaultChecked",void 0),e([m({attribute:"help-text"})],p.prototype,"helpText",void 0),e([m({type:Boolean})],p.prototype,"showHelpText",void 0),e([m({attribute:"error-message"})],p.prototype,"errorMessage",void 0),e([m({reflect:!0})],p.prototype,"form",void 0),e([m({type:Boolean,reflect:!0})],p.prototype,"required",void 0),e([a(["checked","indeterminate"],{waitUntilFirstUpdate:!0})],p.prototype,"handleStateChange",null),_export("N",p=e([o("nile-checkbox")],p));}};});
|
|
2
2
|
//# sourceMappingURL=nile-checkbox.cjs.js.map
|
|
@@ -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 property,\n CSSResultArray,\n TemplateResult,\n} from 'lit-element';\nimport { customElement } 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' }) helpText = '';\n\n @property({ attribute: 'error-message' }) errorMessage = '';\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 handleClick() {\n this.checked = !this.checked;\n this.indeterminate = false;\n this.dispatchEvent(\n new CustomEvent('valueChange', {\n composed: true,\n bubbles: true,\n detail: {\n checked: this.checked,\n },\n })\n );\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\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 ${\n hasHelpText\n ? html`\n <nile-form-help-text>${this.helpText}</nile-form-help-text>\n `\n : ``\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}\n\nexport default NileCheckbox;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-checkbox': NileCheckbox;\n }\n}\n"],"names":["NileCheckbox","p","constructor","super","this","hasFocus","title","name","size","disabled","checked","label","indeterminate","defaultChecked","helpText","errorMessage","form","required","_this","_createClass","key","value","handleClick","dispatchEvent","CustomEvent","composed","bubbles","detail","handleBlur","emit","handleInput","handleFocus","handleStateChange","input","click","focus","options","blur","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 property,\n CSSResultArray,\n TemplateResult,\n} from 'lit-element';\nimport { customElement } 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' }) helpText = '';\n\n @property({ type: Boolean }) showHelpText = false;\n\n @property({ attribute: 'error-message' }) errorMessage = '';\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.dispatchEvent(\n new CustomEvent('valueChange', {\n composed: true,\n bubbles: true,\n detail: {\n checked: this.checked,\n },\n })\n );\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\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-icon name=\"question\" @click=${this.toggleHelpText} class=\"checkbox__icon\"></nile-icon> `\n : ``}\n\n ${hasHelpText && this.showHelpText\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}\n"],"names":["NileCheckbox","p","super","this","hasFocus","title","name","size","disabled","checked","label","indeterminate","defaultChecked","helpText","showHelpText","errorMessage","form","required","_this","_createClass","key","value","toggleHelpText","handleClick","dispatchEvent","CustomEvent","composed","bubbles","detail","handleBlur","emit","handleInput","handleFocus","handleStateChange","input","click","focus","options","blur","render","hasHelpText","hasErrorMessage","html","_templateObject","_taggedTemplateLiteral","classMap","checkbox","ifDefined","live","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","NileElement","styles","__decorate","query","prototype","state","property","reflect","type","Boolean","String","defaultValue","attribute","watch","waitUntilFirstUpdate","customElement"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
System.register(["../index-cd83c5c8.cjs.js"],function(_export,_context){"use strict";var e,_templateObject,o;function _taggedTemplateLiteral(strings,raw){if(!raw){raw=strings.slice(0);}return Object.freeze(Object.defineProperties(strings,{raw:{value:Object.freeze(raw)}}));}return{setters:[function(_index001CjsJs){e=_index001CjsJs.i;}],execute:function(){_export("s",o=e(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n
|
|
1
|
+
System.register(["../index-cd83c5c8.cjs.js"],function(_export,_context){"use strict";var e,_templateObject,o;function _taggedTemplateLiteral(strings,raw){if(!raw){raw=strings.slice(0);}return Object.freeze(Object.defineProperties(strings,{raw:{value:Object.freeze(raw)}}));}return{setters:[function(_index001CjsJs){e=_index001CjsJs.i;}],execute:function(){_export("s",o=e(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n :host {\n display: inline-block;\n }\n\n .checkbox {\n position: relative;\n display: inline-flex;\n align-items: top;\n font-weight: 400;\n color: var(--nile-colors-dark-900);\n vertical-align: middle;\n cursor: pointer;\n }\n\n .checkbox--medium {\n --toggle-size: var(--nile-type-scale-3);\n font-size: var(--nile-type-scale-3);\n }\n\n .checkbox__control {\n flex: 0 0 auto;\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--nile-type-scale-3);\n height: var(--nile-type-scale-3);\n border: solid 1px var(--nile-colors-neutral-700);\n background-color: var(--nile-colors-white-base);\n border-radius: 4px;\n transition: var(--nile-transition-duration-default border-color),\n var(--nile-transition-duration-default) background-color,\n var(--nile-transition-duration-default) color,\n var(--nile-transition-duration-default box-shadow);\n }\n\n .checkbox__input {\n position: absolute;\n opacity: 0;\n padding: 0;\n margin: 0;\n pointer-events: none;\n }\n\n /* svg {\n display:none !important;\n } */\n\n /* Hover */\n .checkbox:not(.checkbox--checked):not(.checkbox--disabled)\n .checkbox__control:hover {\n background: var(--nile-colors-primary-100);\n border: 1px solid var(--nile-colors-primary-600);\n border-radius: 4px;\n }\n\n /* Focus */\n .checkbox:not(.checkbox--checked):not(.checkbox--disabled)\n .checkbox__input:focus-visible\n ~ .checkbox__control {\n outline: solid 3px hsl(198.6 88.7% 48.4% / 40%);\n outline-offset: 1px;\n }\n\n /* Checked/indeterminate */\n .checkbox--checked .checkbox__control,\n .checkbox--indeterminate .checkbox__control {\n border-color: var(--nile-colors-primary-600);\n background-color: var(--nile-colors-primary-600);\n }\n\n /* Checked/indeterminate + hover */\n .checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,\n .checkbox.checkbox--indeterminate:not(.checkbox--disabled)\n .checkbox__control:hover {\n background: var(--nile-colors-primary-900);\n border: 1px solid var(--nile-colors-primary-900);\n }\n\n /* Checked/indeterminate + focus */\n .checkbox.checkbox--checked:not(.checkbox--disabled)\n .checkbox__input:focus-visible\n ~ .checkbox__control,\n .checkbox.checkbox--indeterminate:not(.checkbox--disabled)\n .checkbox__input:focus-visible\n ~ .checkbox__control {\n outline: solid 3px hsl(198.6 88.7% 48.4% / 40%);\n outline-offset: 1px;\n }\n\n /* Disabled */\n .checkbox--disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .checkbox__label {\n display: inline-block;\n line-height: 14px;\n font-size: 14px;\n margin-inline-start: 0.5em;\n user-select: none;\n margin-top: 2px;\n color: var(--nile-colors-dark-900);\n font-family: Colfax-regular;\n font-style: normal;\n font-weight: 400;\n letter-spacing: 0.2px;\n }\n\n :host([required]) .checkbox__label::after {\n content: '*';\n margin-inline-start: -2px;\n }\n\n .checkbox__checked-icon {\n --nile-svg-stroke: white;\n }\n\n .checkbox__indeterminate-icon {\n --nile-svg-stroke: white;\n }\n\n .checkbox__icon {\n float: right;\n cursor: pointer;\n }\n"]))));}};});
|
|
2
2
|
//# sourceMappingURL=nile-checkbox.css.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-checkbox.css.cjs.js","sources":["../../../src/nile-checkbox/nile-checkbox.css.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 { css } from 'lit-element';\n\n/**\n * Checkbox CSS\n */\nexport const styles = css`\n
|
|
1
|
+
{"version":3,"file":"nile-checkbox.css.cjs.js","sources":["../../../src/nile-checkbox/nile-checkbox.css.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 { css } from 'lit-element';\n\n/**\n * Checkbox CSS\n */\nexport const styles = css`\n :host {\n display: inline-block;\n }\n\n .checkbox {\n position: relative;\n display: inline-flex;\n align-items: top;\n font-weight: 400;\n color: var(--nile-colors-dark-900);\n vertical-align: middle;\n cursor: pointer;\n }\n\n .checkbox--medium {\n --toggle-size: var(--nile-type-scale-3);\n font-size: var(--nile-type-scale-3);\n }\n\n .checkbox__control {\n flex: 0 0 auto;\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--nile-type-scale-3);\n height: var(--nile-type-scale-3);\n border: solid 1px var(--nile-colors-neutral-700);\n background-color: var(--nile-colors-white-base);\n border-radius: 4px;\n transition: var(--nile-transition-duration-default border-color),\n var(--nile-transition-duration-default) background-color,\n var(--nile-transition-duration-default) color,\n var(--nile-transition-duration-default box-shadow);\n }\n\n .checkbox__input {\n position: absolute;\n opacity: 0;\n padding: 0;\n margin: 0;\n pointer-events: none;\n }\n\n /* svg {\n display:none !important;\n } */\n\n /* Hover */\n .checkbox:not(.checkbox--checked):not(.checkbox--disabled)\n .checkbox__control:hover {\n background: var(--nile-colors-primary-100);\n border: 1px solid var(--nile-colors-primary-600);\n border-radius: 4px;\n }\n\n /* Focus */\n .checkbox:not(.checkbox--checked):not(.checkbox--disabled)\n .checkbox__input:focus-visible\n ~ .checkbox__control {\n outline: solid 3px hsl(198.6 88.7% 48.4% / 40%);\n outline-offset: 1px;\n }\n\n /* Checked/indeterminate */\n .checkbox--checked .checkbox__control,\n .checkbox--indeterminate .checkbox__control {\n border-color: var(--nile-colors-primary-600);\n background-color: var(--nile-colors-primary-600);\n }\n\n /* Checked/indeterminate + hover */\n .checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,\n .checkbox.checkbox--indeterminate:not(.checkbox--disabled)\n .checkbox__control:hover {\n background: var(--nile-colors-primary-900);\n border: 1px solid var(--nile-colors-primary-900);\n }\n\n /* Checked/indeterminate + focus */\n .checkbox.checkbox--checked:not(.checkbox--disabled)\n .checkbox__input:focus-visible\n ~ .checkbox__control,\n .checkbox.checkbox--indeterminate:not(.checkbox--disabled)\n .checkbox__input:focus-visible\n ~ .checkbox__control {\n outline: solid 3px hsl(198.6 88.7% 48.4% / 40%);\n outline-offset: 1px;\n }\n\n /* Disabled */\n .checkbox--disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .checkbox__label {\n display: inline-block;\n line-height: 14px;\n font-size: 14px;\n margin-inline-start: 0.5em;\n user-select: none;\n margin-top: 2px;\n color: var(--nile-colors-dark-900);\n font-family: Colfax-regular;\n font-style: normal;\n font-weight: 400;\n letter-spacing: 0.2px;\n }\n\n :host([required]) .checkbox__label::after {\n content: '*';\n margin-inline-start: -2px;\n }\n\n .checkbox__checked-icon {\n --nile-svg-stroke: white;\n }\n\n .checkbox__indeterminate-icon {\n --nile-svg-stroke: white;\n }\n\n .checkbox__icon {\n float: right;\n cursor: pointer;\n }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"gXAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import{i as e}from"../index-cd2f9c12.esm.js";const o=e`
|
|
2
|
-
|
|
2
|
+
:host {
|
|
3
3
|
display: inline-block;
|
|
4
4
|
}
|
|
5
5
|
|
|
@@ -29,8 +29,10 @@ import{i as e}from"../index-cd2f9c12.esm.js";const o=e`
|
|
|
29
29
|
border: solid 1px var(--nile-colors-neutral-700);
|
|
30
30
|
background-color: var(--nile-colors-white-base);
|
|
31
31
|
border-radius: 4px;
|
|
32
|
-
transition: var(--nile-transition-duration-default border-color),
|
|
33
|
-
|
|
32
|
+
transition: var(--nile-transition-duration-default border-color),
|
|
33
|
+
var(--nile-transition-duration-default) background-color,
|
|
34
|
+
var(--nile-transition-duration-default) color,
|
|
35
|
+
var(--nile-transition-duration-default box-shadow);
|
|
34
36
|
}
|
|
35
37
|
|
|
36
38
|
.checkbox__input {
|
|
@@ -41,20 +43,22 @@ import{i as e}from"../index-cd2f9c12.esm.js";const o=e`
|
|
|
41
43
|
pointer-events: none;
|
|
42
44
|
}
|
|
43
45
|
|
|
44
|
-
|
|
45
46
|
/* svg {
|
|
46
47
|
display:none !important;
|
|
47
48
|
} */
|
|
48
49
|
|
|
49
50
|
/* Hover */
|
|
50
|
-
.checkbox:not(.checkbox--checked):not(.checkbox--disabled)
|
|
51
|
+
.checkbox:not(.checkbox--checked):not(.checkbox--disabled)
|
|
52
|
+
.checkbox__control:hover {
|
|
51
53
|
background: var(--nile-colors-primary-100);
|
|
52
54
|
border: 1px solid var(--nile-colors-primary-600);
|
|
53
55
|
border-radius: 4px;
|
|
54
56
|
}
|
|
55
57
|
|
|
56
58
|
/* Focus */
|
|
57
|
-
.checkbox:not(.checkbox--checked):not(.checkbox--disabled)
|
|
59
|
+
.checkbox:not(.checkbox--checked):not(.checkbox--disabled)
|
|
60
|
+
.checkbox__input:focus-visible
|
|
61
|
+
~ .checkbox__control {
|
|
58
62
|
outline: solid 3px hsl(198.6 88.7% 48.4% / 40%);
|
|
59
63
|
outline-offset: 1px;
|
|
60
64
|
}
|
|
@@ -68,14 +72,19 @@ import{i as e}from"../index-cd2f9c12.esm.js";const o=e`
|
|
|
68
72
|
|
|
69
73
|
/* Checked/indeterminate + hover */
|
|
70
74
|
.checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,
|
|
71
|
-
.checkbox.checkbox--indeterminate:not(.checkbox--disabled)
|
|
75
|
+
.checkbox.checkbox--indeterminate:not(.checkbox--disabled)
|
|
76
|
+
.checkbox__control:hover {
|
|
72
77
|
background: var(--nile-colors-primary-900);
|
|
73
78
|
border: 1px solid var(--nile-colors-primary-900);
|
|
74
79
|
}
|
|
75
80
|
|
|
76
81
|
/* Checked/indeterminate + focus */
|
|
77
|
-
.checkbox.checkbox--checked:not(.checkbox--disabled)
|
|
78
|
-
|
|
82
|
+
.checkbox.checkbox--checked:not(.checkbox--disabled)
|
|
83
|
+
.checkbox__input:focus-visible
|
|
84
|
+
~ .checkbox__control,
|
|
85
|
+
.checkbox.checkbox--indeterminate:not(.checkbox--disabled)
|
|
86
|
+
.checkbox__input:focus-visible
|
|
87
|
+
~ .checkbox__control {
|
|
79
88
|
outline: solid 3px hsl(198.6 88.7% 48.4% / 40%);
|
|
80
89
|
outline-offset: 1px;
|
|
81
90
|
}
|
|
@@ -102,10 +111,19 @@ import{i as e}from"../index-cd2f9c12.esm.js";const o=e`
|
|
|
102
111
|
|
|
103
112
|
:host([required]) .checkbox__label::after {
|
|
104
113
|
content: '*';
|
|
105
|
-
margin-inline-start: -2px
|
|
114
|
+
margin-inline-start: -2px;
|
|
106
115
|
}
|
|
107
116
|
|
|
108
|
-
|
|
117
|
+
.checkbox__checked-icon {
|
|
109
118
|
--nile-svg-stroke: white;
|
|
110
119
|
}
|
|
120
|
+
|
|
121
|
+
.checkbox__indeterminate-icon {
|
|
122
|
+
--nile-svg-stroke: white;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.checkbox__icon {
|
|
126
|
+
float: right;
|
|
127
|
+
cursor: pointer;
|
|
128
|
+
}
|
|
111
129
|
`;export{o as s};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{__decorate as e}from"tslib";import{x as
|
|
1
|
+
import{__decorate as e}from"tslib";import{x as i}from"../index-cd2f9c12.esm.js";import{query as t,state as s,customElement as o}from"lit/decorators.js";import{s as c}from"./nile-checkbox.css.esm.js";import{classMap as h}from"lit/directives/class-map.js";import{d as l}from"../internal/default-value.esm.js";import{ifDefined as r}from"lit/directives/if-defined.js";import{live as n}from"lit/directives/live.js";import{w as a}from"../internal/watch.esm.js";import{N as d}from"../internal/nile-element.esm.js";import{n as m}from"../property-09139d3c.esm.js";import"lit";let p=class extends d{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.showHelpText=!1,this.errorMessage="",this.form="",this.required=!1}toggleHelpText(){this.showHelpText=!this.showHelpText}handleClick(){this.checked=!this.checked,this.indeterminate=!1,this.dispatchEvent(new CustomEvent("valueChange",{composed:!0,bubbles:!0,detail:{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()}render(){const e=!!this.helpText,t=!!this.errorMessage;return i`
|
|
2
2
|
<label
|
|
3
3
|
part="base"
|
|
4
4
|
class=${h({checkbox:!0,"checkbox--checked":this.checked,"checkbox--disabled":this.disabled,"checkbox--focused":this.hasFocus,"checkbox--indeterminate":this.indeterminate,"checkbox--medium":"medium"===this.size})}
|
|
@@ -8,7 +8,7 @@ import{__decorate as e}from"tslib";import{x as t}from"../index-cd2f9c12.esm.js";
|
|
|
8
8
|
type="checkbox"
|
|
9
9
|
title=${this.title}
|
|
10
10
|
name=${this.name}
|
|
11
|
-
value=${
|
|
11
|
+
value=${r(this.value)}
|
|
12
12
|
.indeterminate=${n(this.indeterminate)}
|
|
13
13
|
.checked=${n(this.checked)}
|
|
14
14
|
.disabled=${this.disabled}
|
|
@@ -24,7 +24,7 @@ import{__decorate as e}from"tslib";import{x as t}from"../index-cd2f9c12.esm.js";
|
|
|
24
24
|
part="control${this.checked?" control--checked":""}${this.indeterminate?" control--indeterminate":""}"
|
|
25
25
|
class="checkbox__control"
|
|
26
26
|
>
|
|
27
|
-
${this.checked?
|
|
27
|
+
${this.checked?i`
|
|
28
28
|
<nile-icon
|
|
29
29
|
part="checked-icon"
|
|
30
30
|
class="checkbox__checked-icon"
|
|
@@ -34,7 +34,7 @@ import{__decorate as e}from"tslib";import{x as t}from"../index-cd2f9c12.esm.js";
|
|
|
34
34
|
size="12"
|
|
35
35
|
></nile-icon>
|
|
36
36
|
`:""}
|
|
37
|
-
${!this.checked&&this.indeterminate?
|
|
37
|
+
${!this.checked&&this.indeterminate?i`
|
|
38
38
|
<nile-icon
|
|
39
39
|
part="indeterminate-icon"
|
|
40
40
|
class="checkbox__indeterminate-icon"
|
|
@@ -52,13 +52,13 @@ import{__decorate as e}from"tslib";import{x as t}from"../index-cd2f9c12.esm.js";
|
|
|
52
52
|
</div>
|
|
53
53
|
</label>
|
|
54
54
|
|
|
55
|
-
${e?
|
|
56
|
-
<nile-form-help-text>${this.helpText}</nile-form-help-text>
|
|
57
|
-
`:""}
|
|
55
|
+
${e?i` <nile-icon name="question" @click=${this.toggleHelpText} class="checkbox__icon"></nile-icon> `:""}
|
|
58
56
|
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
57
|
+
${e&&this.showHelpText?i` <nile-form-help-text>${this.helpText}</nile-form-help-text> `:""}
|
|
58
|
+
|
|
59
|
+
${t?i`
|
|
60
|
+
<nile-form-error-message
|
|
61
|
+
>${this.errorMessage}</nile-form-error-message
|
|
62
|
+
>
|
|
63
|
+
`:""}
|
|
64
|
+
`}};p.styles=c,e([t('input[type="checkbox"]')],p.prototype,"input",void 0),e([s()],p.prototype,"hasFocus",void 0),e([m()],p.prototype,"title",void 0),e([m()],p.prototype,"name",void 0),e([m()],p.prototype,"value",void 0),e([m({reflect:!0})],p.prototype,"size",void 0),e([m({type:Boolean,reflect:!0})],p.prototype,"disabled",void 0),e([m({type:Boolean,reflect:!0})],p.prototype,"checked",void 0),e([m({type:String,reflect:!0})],p.prototype,"label",void 0),e([m({type:Boolean,reflect:!0})],p.prototype,"indeterminate",void 0),e([l("checked")],p.prototype,"defaultChecked",void 0),e([m({attribute:"help-text"})],p.prototype,"helpText",void 0),e([m({type:Boolean})],p.prototype,"showHelpText",void 0),e([m({attribute:"error-message"})],p.prototype,"errorMessage",void 0),e([m({reflect:!0})],p.prototype,"form",void 0),e([m({type:Boolean,reflect:!0})],p.prototype,"required",void 0),e([a(["checked","indeterminate"],{waitUntilFirstUpdate:!0})],p.prototype,"handleStateChange",null),p=e([o("nile-checkbox")],p);export{p as N};
|
|
@@ -9,7 +9,7 @@ import { css } from 'lit-element';
|
|
|
9
9
|
* Checkbox CSS
|
|
10
10
|
*/
|
|
11
11
|
export const styles = css `
|
|
12
|
-
|
|
12
|
+
:host {
|
|
13
13
|
display: inline-block;
|
|
14
14
|
}
|
|
15
15
|
|
|
@@ -39,8 +39,10 @@ export const styles = css `
|
|
|
39
39
|
border: solid 1px var(--nile-colors-neutral-700);
|
|
40
40
|
background-color: var(--nile-colors-white-base);
|
|
41
41
|
border-radius: 4px;
|
|
42
|
-
transition: var(--nile-transition-duration-default border-color),
|
|
43
|
-
|
|
42
|
+
transition: var(--nile-transition-duration-default border-color),
|
|
43
|
+
var(--nile-transition-duration-default) background-color,
|
|
44
|
+
var(--nile-transition-duration-default) color,
|
|
45
|
+
var(--nile-transition-duration-default box-shadow);
|
|
44
46
|
}
|
|
45
47
|
|
|
46
48
|
.checkbox__input {
|
|
@@ -51,20 +53,22 @@ export const styles = css `
|
|
|
51
53
|
pointer-events: none;
|
|
52
54
|
}
|
|
53
55
|
|
|
54
|
-
|
|
55
56
|
/* svg {
|
|
56
57
|
display:none !important;
|
|
57
58
|
} */
|
|
58
59
|
|
|
59
60
|
/* Hover */
|
|
60
|
-
.checkbox:not(.checkbox--checked):not(.checkbox--disabled)
|
|
61
|
+
.checkbox:not(.checkbox--checked):not(.checkbox--disabled)
|
|
62
|
+
.checkbox__control:hover {
|
|
61
63
|
background: var(--nile-colors-primary-100);
|
|
62
64
|
border: 1px solid var(--nile-colors-primary-600);
|
|
63
65
|
border-radius: 4px;
|
|
64
66
|
}
|
|
65
67
|
|
|
66
68
|
/* Focus */
|
|
67
|
-
.checkbox:not(.checkbox--checked):not(.checkbox--disabled)
|
|
69
|
+
.checkbox:not(.checkbox--checked):not(.checkbox--disabled)
|
|
70
|
+
.checkbox__input:focus-visible
|
|
71
|
+
~ .checkbox__control {
|
|
68
72
|
outline: solid 3px hsl(198.6 88.7% 48.4% / 40%);
|
|
69
73
|
outline-offset: 1px;
|
|
70
74
|
}
|
|
@@ -78,14 +82,19 @@ export const styles = css `
|
|
|
78
82
|
|
|
79
83
|
/* Checked/indeterminate + hover */
|
|
80
84
|
.checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,
|
|
81
|
-
.checkbox.checkbox--indeterminate:not(.checkbox--disabled)
|
|
85
|
+
.checkbox.checkbox--indeterminate:not(.checkbox--disabled)
|
|
86
|
+
.checkbox__control:hover {
|
|
82
87
|
background: var(--nile-colors-primary-900);
|
|
83
88
|
border: 1px solid var(--nile-colors-primary-900);
|
|
84
89
|
}
|
|
85
90
|
|
|
86
91
|
/* Checked/indeterminate + focus */
|
|
87
|
-
.checkbox.checkbox--checked:not(.checkbox--disabled)
|
|
88
|
-
|
|
92
|
+
.checkbox.checkbox--checked:not(.checkbox--disabled)
|
|
93
|
+
.checkbox__input:focus-visible
|
|
94
|
+
~ .checkbox__control,
|
|
95
|
+
.checkbox.checkbox--indeterminate:not(.checkbox--disabled)
|
|
96
|
+
.checkbox__input:focus-visible
|
|
97
|
+
~ .checkbox__control {
|
|
89
98
|
outline: solid 3px hsl(198.6 88.7% 48.4% / 40%);
|
|
90
99
|
outline-offset: 1px;
|
|
91
100
|
}
|
|
@@ -112,12 +121,21 @@ export const styles = css `
|
|
|
112
121
|
|
|
113
122
|
:host([required]) .checkbox__label::after {
|
|
114
123
|
content: '*';
|
|
115
|
-
margin-inline-start: -2px
|
|
124
|
+
margin-inline-start: -2px;
|
|
116
125
|
}
|
|
117
126
|
|
|
118
|
-
|
|
127
|
+
.checkbox__checked-icon {
|
|
119
128
|
--nile-svg-stroke: white;
|
|
120
129
|
}
|
|
130
|
+
|
|
131
|
+
.checkbox__indeterminate-icon {
|
|
132
|
+
--nile-svg-stroke: white;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.checkbox__icon {
|
|
136
|
+
float: right;
|
|
137
|
+
cursor: pointer;
|
|
138
|
+
}
|
|
121
139
|
`;
|
|
122
140
|
export default [styles];
|
|
123
141
|
//# sourceMappingURL=nile-checkbox.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-checkbox.css.js","sourceRoot":"","sources":["../../../src/nile-checkbox/nile-checkbox.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"nile-checkbox.css.js","sourceRoot":"","sources":["../../../src/nile-checkbox/nile-checkbox.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgIxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,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 { css } from 'lit-element';\n\n/**\n * Checkbox CSS\n */\nexport const styles = css`\n :host {\n display: inline-block;\n }\n\n .checkbox {\n position: relative;\n display: inline-flex;\n align-items: top;\n font-weight: 400;\n color: var(--nile-colors-dark-900);\n vertical-align: middle;\n cursor: pointer;\n }\n\n .checkbox--medium {\n --toggle-size: var(--nile-type-scale-3);\n font-size: var(--nile-type-scale-3);\n }\n\n .checkbox__control {\n flex: 0 0 auto;\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--nile-type-scale-3);\n height: var(--nile-type-scale-3);\n border: solid 1px var(--nile-colors-neutral-700);\n background-color: var(--nile-colors-white-base);\n border-radius: 4px;\n transition: var(--nile-transition-duration-default border-color),\n var(--nile-transition-duration-default) background-color,\n var(--nile-transition-duration-default) color,\n var(--nile-transition-duration-default box-shadow);\n }\n\n .checkbox__input {\n position: absolute;\n opacity: 0;\n padding: 0;\n margin: 0;\n pointer-events: none;\n }\n\n /* svg {\n display:none !important;\n } */\n\n /* Hover */\n .checkbox:not(.checkbox--checked):not(.checkbox--disabled)\n .checkbox__control:hover {\n background: var(--nile-colors-primary-100);\n border: 1px solid var(--nile-colors-primary-600);\n border-radius: 4px;\n }\n\n /* Focus */\n .checkbox:not(.checkbox--checked):not(.checkbox--disabled)\n .checkbox__input:focus-visible\n ~ .checkbox__control {\n outline: solid 3px hsl(198.6 88.7% 48.4% / 40%);\n outline-offset: 1px;\n }\n\n /* Checked/indeterminate */\n .checkbox--checked .checkbox__control,\n .checkbox--indeterminate .checkbox__control {\n border-color: var(--nile-colors-primary-600);\n background-color: var(--nile-colors-primary-600);\n }\n\n /* Checked/indeterminate + hover */\n .checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,\n .checkbox.checkbox--indeterminate:not(.checkbox--disabled)\n .checkbox__control:hover {\n background: var(--nile-colors-primary-900);\n border: 1px solid var(--nile-colors-primary-900);\n }\n\n /* Checked/indeterminate + focus */\n .checkbox.checkbox--checked:not(.checkbox--disabled)\n .checkbox__input:focus-visible\n ~ .checkbox__control,\n .checkbox.checkbox--indeterminate:not(.checkbox--disabled)\n .checkbox__input:focus-visible\n ~ .checkbox__control {\n outline: solid 3px hsl(198.6 88.7% 48.4% / 40%);\n outline-offset: 1px;\n }\n\n /* Disabled */\n .checkbox--disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .checkbox__label {\n display: inline-block;\n line-height: 14px;\n font-size: 14px;\n margin-inline-start: 0.5em;\n user-select: none;\n margin-top: 2px;\n color: var(--nile-colors-dark-900);\n font-family: Colfax-regular;\n font-style: normal;\n font-weight: 400;\n letter-spacing: 0.2px;\n }\n\n :host([required]) .checkbox__label::after {\n content: '*';\n margin-inline-start: -2px;\n }\n\n .checkbox__checked-icon {\n --nile-svg-stroke: white;\n }\n\n .checkbox__indeterminate-icon {\n --nile-svg-stroke: white;\n }\n\n .checkbox__icon {\n float: right;\n cursor: pointer;\n }\n`;\n\nexport default [styles];\n"]}
|
|
@@ -60,6 +60,7 @@ export declare class NileCheckbox extends NileElement {
|
|
|
60
60
|
/** The default value of the form control. Primarily used for resetting the form control. */
|
|
61
61
|
defaultChecked: boolean;
|
|
62
62
|
helpText: string;
|
|
63
|
+
showHelpText: boolean;
|
|
63
64
|
errorMessage: string;
|
|
64
65
|
/**
|
|
65
66
|
* By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
|
|
@@ -69,6 +70,7 @@ export declare class NileCheckbox extends NileElement {
|
|
|
69
70
|
form: string;
|
|
70
71
|
/** Makes the checkbox a required field. */
|
|
71
72
|
required: boolean;
|
|
73
|
+
private toggleHelpText;
|
|
72
74
|
private handleClick;
|
|
73
75
|
private handleBlur;
|
|
74
76
|
private handleInput;
|