@aquera/nile-elements 0.0.4-2 → 0.0.4-4
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 +30 -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 +40 -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 +30 -11
- package/dist/nile-checkbox/nile-checkbox.esm.js +13 -13
- package/dist/src/nile-checkbox/nile-checkbox.css.js +30 -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 +30 -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,8 +1377,9 @@ 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
|
+
width: 100%;
|
|
1382
1383
|
}
|
|
1383
1384
|
|
|
1384
1385
|
.checkbox {
|
|
@@ -1407,8 +1408,10 @@ const YM=Symbol.for(""),bM=M=>{if((null==M?void 0:M.r)===YM)return null==M?void
|
|
|
1407
1408
|
border: solid 1px var(--nile-colors-neutral-700);
|
|
1408
1409
|
background-color: var(--nile-colors-white-base);
|
|
1409
1410
|
border-radius: 4px;
|
|
1410
|
-
transition: var(--nile-transition-duration-default border-color),
|
|
1411
|
-
|
|
1411
|
+
transition: var(--nile-transition-duration-default border-color),
|
|
1412
|
+
var(--nile-transition-duration-default) background-color,
|
|
1413
|
+
var(--nile-transition-duration-default) color,
|
|
1414
|
+
var(--nile-transition-duration-default box-shadow);
|
|
1412
1415
|
}
|
|
1413
1416
|
|
|
1414
1417
|
.checkbox__input {
|
|
@@ -1419,20 +1422,22 @@ const YM=Symbol.for(""),bM=M=>{if((null==M?void 0:M.r)===YM)return null==M?void
|
|
|
1419
1422
|
pointer-events: none;
|
|
1420
1423
|
}
|
|
1421
1424
|
|
|
1422
|
-
|
|
1423
1425
|
/* svg {
|
|
1424
1426
|
display:none !important;
|
|
1425
1427
|
} */
|
|
1426
1428
|
|
|
1427
1429
|
/* Hover */
|
|
1428
|
-
.checkbox:not(.checkbox--checked):not(.checkbox--disabled)
|
|
1430
|
+
.checkbox:not(.checkbox--checked):not(.checkbox--disabled)
|
|
1431
|
+
.checkbox__control:hover {
|
|
1429
1432
|
background: var(--nile-colors-primary-100);
|
|
1430
1433
|
border: 1px solid var(--nile-colors-primary-600);
|
|
1431
1434
|
border-radius: 4px;
|
|
1432
1435
|
}
|
|
1433
1436
|
|
|
1434
1437
|
/* Focus */
|
|
1435
|
-
.checkbox:not(.checkbox--checked):not(.checkbox--disabled)
|
|
1438
|
+
.checkbox:not(.checkbox--checked):not(.checkbox--disabled)
|
|
1439
|
+
.checkbox__input:focus-visible
|
|
1440
|
+
~ .checkbox__control {
|
|
1436
1441
|
outline: solid 3px hsl(198.6 88.7% 48.4% / 40%);
|
|
1437
1442
|
outline-offset: 1px;
|
|
1438
1443
|
}
|
|
@@ -1446,14 +1451,19 @@ const YM=Symbol.for(""),bM=M=>{if((null==M?void 0:M.r)===YM)return null==M?void
|
|
|
1446
1451
|
|
|
1447
1452
|
/* Checked/indeterminate + hover */
|
|
1448
1453
|
.checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,
|
|
1449
|
-
.checkbox.checkbox--indeterminate:not(.checkbox--disabled)
|
|
1454
|
+
.checkbox.checkbox--indeterminate:not(.checkbox--disabled)
|
|
1455
|
+
.checkbox__control:hover {
|
|
1450
1456
|
background: var(--nile-colors-primary-900);
|
|
1451
1457
|
border: 1px solid var(--nile-colors-primary-900);
|
|
1452
1458
|
}
|
|
1453
1459
|
|
|
1454
1460
|
/* Checked/indeterminate + focus */
|
|
1455
|
-
.checkbox.checkbox--checked:not(.checkbox--disabled)
|
|
1456
|
-
|
|
1461
|
+
.checkbox.checkbox--checked:not(.checkbox--disabled)
|
|
1462
|
+
.checkbox__input:focus-visible
|
|
1463
|
+
~ .checkbox__control,
|
|
1464
|
+
.checkbox.checkbox--indeterminate:not(.checkbox--disabled)
|
|
1465
|
+
.checkbox__input:focus-visible
|
|
1466
|
+
~ .checkbox__control {
|
|
1457
1467
|
outline: solid 3px hsl(198.6 88.7% 48.4% / 40%);
|
|
1458
1468
|
outline-offset: 1px;
|
|
1459
1469
|
}
|
|
@@ -1480,13 +1490,22 @@ const YM=Symbol.for(""),bM=M=>{if((null==M?void 0:M.r)===YM)return null==M?void
|
|
|
1480
1490
|
|
|
1481
1491
|
:host([required]) .checkbox__label::after {
|
|
1482
1492
|
content: '*';
|
|
1483
|
-
margin-inline-start: -2px
|
|
1493
|
+
margin-inline-start: -2px;
|
|
1484
1494
|
}
|
|
1485
1495
|
|
|
1486
|
-
|
|
1496
|
+
.checkbox__checked-icon {
|
|
1487
1497
|
--nile-svg-stroke: white;
|
|
1488
1498
|
}
|
|
1489
|
-
|
|
1499
|
+
|
|
1500
|
+
.checkbox__indeterminate-icon {
|
|
1501
|
+
--nile-svg-stroke: white;
|
|
1502
|
+
}
|
|
1503
|
+
|
|
1504
|
+
.checkbox__icon {
|
|
1505
|
+
float: right;
|
|
1506
|
+
cursor: pointer;
|
|
1507
|
+
}
|
|
1508
|
+
`;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
1509
|
<label
|
|
1491
1510
|
part="base"
|
|
1492
1511
|
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 +1559,16 @@ const YM=Symbol.for(""),bM=M=>{if((null==M?void 0:M.r)===YM)return null==M?void
|
|
|
1540
1559
|
</div>
|
|
1541
1560
|
</label>
|
|
1542
1561
|
|
|
1543
|
-
${M?V`
|
|
1544
|
-
<nile-form-help-text>${this.helpText}</nile-form-help-text>
|
|
1545
|
-
`:""}
|
|
1562
|
+
${M?V` <nile-icon name="question" @click=${this.toggleHelpText} class="checkbox__icon"></nile-icon> `:""}
|
|
1546
1563
|
|
|
1547
|
-
|
|
1548
|
-
|
|
1549
|
-
|
|
1550
|
-
|
|
1551
|
-
|
|
1552
|
-
|
|
1564
|
+
${M&&this.showHelpText?V` <nile-form-help-text>${this.helpText}</nile-form-help-text> `:""}
|
|
1565
|
+
|
|
1566
|
+
${N?V`
|
|
1567
|
+
<nile-form-error-message
|
|
1568
|
+
>${this.errorMessage}</nile-form-error-message
|
|
1569
|
+
>
|
|
1570
|
+
`:""}
|
|
1571
|
+
`}},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
1572
|
|
|
1554
1573
|
|
|
1555
1574
|
: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 width: 100%;\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 width: 100%;\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,6 +1,7 @@
|
|
|
1
1
|
import{i as e}from"../index-cd2f9c12.esm.js";const o=e`
|
|
2
|
-
|
|
2
|
+
:host {
|
|
3
3
|
display: inline-block;
|
|
4
|
+
width: 100%;
|
|
4
5
|
}
|
|
5
6
|
|
|
6
7
|
.checkbox {
|
|
@@ -29,8 +30,10 @@ import{i as e}from"../index-cd2f9c12.esm.js";const o=e`
|
|
|
29
30
|
border: solid 1px var(--nile-colors-neutral-700);
|
|
30
31
|
background-color: var(--nile-colors-white-base);
|
|
31
32
|
border-radius: 4px;
|
|
32
|
-
transition: var(--nile-transition-duration-default border-color),
|
|
33
|
-
|
|
33
|
+
transition: var(--nile-transition-duration-default border-color),
|
|
34
|
+
var(--nile-transition-duration-default) background-color,
|
|
35
|
+
var(--nile-transition-duration-default) color,
|
|
36
|
+
var(--nile-transition-duration-default box-shadow);
|
|
34
37
|
}
|
|
35
38
|
|
|
36
39
|
.checkbox__input {
|
|
@@ -41,20 +44,22 @@ import{i as e}from"../index-cd2f9c12.esm.js";const o=e`
|
|
|
41
44
|
pointer-events: none;
|
|
42
45
|
}
|
|
43
46
|
|
|
44
|
-
|
|
45
47
|
/* svg {
|
|
46
48
|
display:none !important;
|
|
47
49
|
} */
|
|
48
50
|
|
|
49
51
|
/* Hover */
|
|
50
|
-
.checkbox:not(.checkbox--checked):not(.checkbox--disabled)
|
|
52
|
+
.checkbox:not(.checkbox--checked):not(.checkbox--disabled)
|
|
53
|
+
.checkbox__control:hover {
|
|
51
54
|
background: var(--nile-colors-primary-100);
|
|
52
55
|
border: 1px solid var(--nile-colors-primary-600);
|
|
53
56
|
border-radius: 4px;
|
|
54
57
|
}
|
|
55
58
|
|
|
56
59
|
/* Focus */
|
|
57
|
-
.checkbox:not(.checkbox--checked):not(.checkbox--disabled)
|
|
60
|
+
.checkbox:not(.checkbox--checked):not(.checkbox--disabled)
|
|
61
|
+
.checkbox__input:focus-visible
|
|
62
|
+
~ .checkbox__control {
|
|
58
63
|
outline: solid 3px hsl(198.6 88.7% 48.4% / 40%);
|
|
59
64
|
outline-offset: 1px;
|
|
60
65
|
}
|
|
@@ -68,14 +73,19 @@ import{i as e}from"../index-cd2f9c12.esm.js";const o=e`
|
|
|
68
73
|
|
|
69
74
|
/* Checked/indeterminate + hover */
|
|
70
75
|
.checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,
|
|
71
|
-
.checkbox.checkbox--indeterminate:not(.checkbox--disabled)
|
|
76
|
+
.checkbox.checkbox--indeterminate:not(.checkbox--disabled)
|
|
77
|
+
.checkbox__control:hover {
|
|
72
78
|
background: var(--nile-colors-primary-900);
|
|
73
79
|
border: 1px solid var(--nile-colors-primary-900);
|
|
74
80
|
}
|
|
75
81
|
|
|
76
82
|
/* Checked/indeterminate + focus */
|
|
77
|
-
.checkbox.checkbox--checked:not(.checkbox--disabled)
|
|
78
|
-
|
|
83
|
+
.checkbox.checkbox--checked:not(.checkbox--disabled)
|
|
84
|
+
.checkbox__input:focus-visible
|
|
85
|
+
~ .checkbox__control,
|
|
86
|
+
.checkbox.checkbox--indeterminate:not(.checkbox--disabled)
|
|
87
|
+
.checkbox__input:focus-visible
|
|
88
|
+
~ .checkbox__control {
|
|
79
89
|
outline: solid 3px hsl(198.6 88.7% 48.4% / 40%);
|
|
80
90
|
outline-offset: 1px;
|
|
81
91
|
}
|
|
@@ -102,10 +112,19 @@ import{i as e}from"../index-cd2f9c12.esm.js";const o=e`
|
|
|
102
112
|
|
|
103
113
|
:host([required]) .checkbox__label::after {
|
|
104
114
|
content: '*';
|
|
105
|
-
margin-inline-start: -2px
|
|
115
|
+
margin-inline-start: -2px;
|
|
106
116
|
}
|
|
107
117
|
|
|
108
|
-
|
|
118
|
+
.checkbox__checked-icon {
|
|
109
119
|
--nile-svg-stroke: white;
|
|
110
120
|
}
|
|
121
|
+
|
|
122
|
+
.checkbox__indeterminate-icon {
|
|
123
|
+
--nile-svg-stroke: white;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.checkbox__icon {
|
|
127
|
+
float: right;
|
|
128
|
+
cursor: pointer;
|
|
129
|
+
}
|
|
111
130
|
`;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,8 +9,9 @@ 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
|
+
width: 100%;
|
|
14
15
|
}
|
|
15
16
|
|
|
16
17
|
.checkbox {
|
|
@@ -39,8 +40,10 @@ export const styles = css `
|
|
|
39
40
|
border: solid 1px var(--nile-colors-neutral-700);
|
|
40
41
|
background-color: var(--nile-colors-white-base);
|
|
41
42
|
border-radius: 4px;
|
|
42
|
-
transition: var(--nile-transition-duration-default border-color),
|
|
43
|
-
|
|
43
|
+
transition: var(--nile-transition-duration-default border-color),
|
|
44
|
+
var(--nile-transition-duration-default) background-color,
|
|
45
|
+
var(--nile-transition-duration-default) color,
|
|
46
|
+
var(--nile-transition-duration-default box-shadow);
|
|
44
47
|
}
|
|
45
48
|
|
|
46
49
|
.checkbox__input {
|
|
@@ -51,20 +54,22 @@ export const styles = css `
|
|
|
51
54
|
pointer-events: none;
|
|
52
55
|
}
|
|
53
56
|
|
|
54
|
-
|
|
55
57
|
/* svg {
|
|
56
58
|
display:none !important;
|
|
57
59
|
} */
|
|
58
60
|
|
|
59
61
|
/* Hover */
|
|
60
|
-
.checkbox:not(.checkbox--checked):not(.checkbox--disabled)
|
|
62
|
+
.checkbox:not(.checkbox--checked):not(.checkbox--disabled)
|
|
63
|
+
.checkbox__control:hover {
|
|
61
64
|
background: var(--nile-colors-primary-100);
|
|
62
65
|
border: 1px solid var(--nile-colors-primary-600);
|
|
63
66
|
border-radius: 4px;
|
|
64
67
|
}
|
|
65
68
|
|
|
66
69
|
/* Focus */
|
|
67
|
-
.checkbox:not(.checkbox--checked):not(.checkbox--disabled)
|
|
70
|
+
.checkbox:not(.checkbox--checked):not(.checkbox--disabled)
|
|
71
|
+
.checkbox__input:focus-visible
|
|
72
|
+
~ .checkbox__control {
|
|
68
73
|
outline: solid 3px hsl(198.6 88.7% 48.4% / 40%);
|
|
69
74
|
outline-offset: 1px;
|
|
70
75
|
}
|
|
@@ -78,14 +83,19 @@ export const styles = css `
|
|
|
78
83
|
|
|
79
84
|
/* Checked/indeterminate + hover */
|
|
80
85
|
.checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,
|
|
81
|
-
.checkbox.checkbox--indeterminate:not(.checkbox--disabled)
|
|
86
|
+
.checkbox.checkbox--indeterminate:not(.checkbox--disabled)
|
|
87
|
+
.checkbox__control:hover {
|
|
82
88
|
background: var(--nile-colors-primary-900);
|
|
83
89
|
border: 1px solid var(--nile-colors-primary-900);
|
|
84
90
|
}
|
|
85
91
|
|
|
86
92
|
/* Checked/indeterminate + focus */
|
|
87
|
-
.checkbox.checkbox--checked:not(.checkbox--disabled)
|
|
88
|
-
|
|
93
|
+
.checkbox.checkbox--checked:not(.checkbox--disabled)
|
|
94
|
+
.checkbox__input:focus-visible
|
|
95
|
+
~ .checkbox__control,
|
|
96
|
+
.checkbox.checkbox--indeterminate:not(.checkbox--disabled)
|
|
97
|
+
.checkbox__input:focus-visible
|
|
98
|
+
~ .checkbox__control {
|
|
89
99
|
outline: solid 3px hsl(198.6 88.7% 48.4% / 40%);
|
|
90
100
|
outline-offset: 1px;
|
|
91
101
|
}
|
|
@@ -112,12 +122,21 @@ export const styles = css `
|
|
|
112
122
|
|
|
113
123
|
:host([required]) .checkbox__label::after {
|
|
114
124
|
content: '*';
|
|
115
|
-
margin-inline-start: -2px
|
|
125
|
+
margin-inline-start: -2px;
|
|
116
126
|
}
|
|
117
127
|
|
|
118
|
-
|
|
128
|
+
.checkbox__checked-icon {
|
|
119
129
|
--nile-svg-stroke: white;
|
|
120
130
|
}
|
|
131
|
+
|
|
132
|
+
.checkbox__indeterminate-icon {
|
|
133
|
+
--nile-svg-stroke: white;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.checkbox__icon {
|
|
137
|
+
float: right;
|
|
138
|
+
cursor: pointer;
|
|
139
|
+
}
|
|
121
140
|
`;
|
|
122
141
|
export default [styles];
|
|
123
142
|
//# 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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiIxB,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 width: 100%;\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;
|