@aquera/nile-elements 0.1.49-beta-1.1 → 0.1.49-beta-1.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/README.md CHANGED
@@ -79,6 +79,9 @@ To run a local development server that serves the basic demo located in `demo/in
79
79
 
80
80
  In this section, you can find the updates for each release of `nile-elements`. It's a good practice to maintain detailed release notes to help users and developers understand what changes have been made from one version to another and how these changes might affect their projects.
81
81
 
82
+ #### Version 0.1.49-beta-1.3
83
+ - Nile Tokenization: Admin UI defect fixes
84
+
82
85
  #### Version 0.1.49-beta-1.1
83
86
  - Fixes: Fixed bugs in Form group and Font-Weight
84
87
 
package/dist/index.js CHANGED
@@ -4329,7 +4329,7 @@ const Ze=e=>e??B;function Ve(e,M){const t={waitUntilFirstUpdate:!1,...M};return(
4329
4329
  align-items: center;
4330
4330
  font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));
4331
4331
  font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));
4332
- line-height: var(--nile-line-height-large, var(--ng-line-height-text-md));
4332
+ line-height: var(--nile-line-height-1-8, var(--ng-line-height-text-md));
4333
4333
  letter-spacing: normal;
4334
4334
  color: var(--nile-color-dark-1, var(--ng-colors-text-primary-900));
4335
4335
  padding: var(--nile-spacing-sm, var(--ng-spacing-md)) var(--nile-spacing-none, var(--ng-spacing-md));
@@ -4391,11 +4391,11 @@ const Ze=e=>e??B;function Ve(e,M){const t={waitUntilFirstUpdate:!1,...M};return(
4391
4391
  }
4392
4392
 
4393
4393
  .option__prefix::slotted(*) {
4394
- margin-inline-end: var(--nile-spacing-md, var(--ng-spacing-md));
4394
+ margin-inline-end: var(--nile-font-size-rem-xsmall, var(--ng-spacing-md));
4395
4395
  }
4396
4396
 
4397
4397
  .option__suffix::slotted(*) {
4398
- margin-inline-start: var(--nile-spacing-md, var(--ng-spacing-md));
4398
+ margin-inline-start: var(--nile-font-size-rem-xsmall, var(--ng-spacing-md));
4399
4399
  }
4400
4400
 
4401
4401
  :host(:not([aria-selected='true'])) .option .option__suffix{
@@ -7904,11 +7904,20 @@ class tn{constructor(e){this._element=null;const M=e??window;this._node=M,e&&(th
7904
7904
  box-shadow: var(--ng-shadow-sm);
7905
7905
  }
7906
7906
 
7907
+
7908
+ .card--disabled {
7909
+ pointer-events: none;
7910
+ opacity: 0.5;
7911
+ }
7912
+
7913
+ .card--disabled .card__footer {
7914
+ pointer-events: none;
7915
+ }
7907
7916
 
7908
- `;let DL=class extends Pe{constructor(){super(...arguments),this.hasSlotController=new ve(this,"footer"),this.active=!1}render(){return R`
7917
+ `;let DL=class extends Pe{constructor(){super(...arguments),this.hasSlotController=new ve(this,"footer"),this.active=!1,this.disabled=!1}render(){return R`
7909
7918
  <div
7910
7919
  part="base"
7911
- class=${Le({card:!0,"card--has-footer":this.hasSlotController.test("footer"),"card--active":this.active})}
7920
+ class=${Le({card:!0,"card--has-footer":this.hasSlotController.test("footer"),"card--active":this.active,"card--disabled":this.disabled})}
7912
7921
  >
7913
7922
  <div class="body__wrapper" part="body__wrapper"
7914
7923
  class=${Le({body__wrapper:!0,body__wrapper_nf:!this.hasSlotController.test("footer")})}
@@ -7924,7 +7933,7 @@ class tn{constructor(e){this._element=null;const M=e??window;this._node=M,e&&(th
7924
7933
  class="card__footer"
7925
7934
  ></slot>
7926
7935
  </div>
7927
- `}};DL.styles=lL,e([ue({type:Boolean,reflect:!0})],DL.prototype,"active",void 0),DL=e([ge("nile-card")],DL);const uL=o`
7936
+ `}};DL.styles=lL,e([ue({type:Boolean,reflect:!0})],DL.prototype,"active",void 0),e([ue({type:Boolean,reflect:!0})],DL.prototype,"disabled",void 0),DL=e([ge("nile-card")],DL);const uL=o`
7928
7937
  :host {
7929
7938
  box-sizing: border-box;
7930
7939
  -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
@@ -1,2 +1,2 @@
1
- function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o;}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o;},_typeof(o);}System.register(["tslib","lit","lit/decorators.js","./nile-card.css.cjs.js","lit/directives/class-map.js","../internal/slot.cjs.js","../internal/nile-element.cjs.js"],function(_export,_context){"use strict";var r,s,t,o,e,a,i,d,_templateObject,l;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}function _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function");}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o);}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e;}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+"";}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.");}return("string"===r?String:Number)(t);}function _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e));}function _possibleConstructorReturn(t,e){if(e&&("object"==_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(t);}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e;}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t;})();}function _getPrototypeOf(t){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t);},_getPrototypeOf(t);}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&_setPrototypeOf(t,e);}function _setPrototypeOf(t,e){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t;},_setPrototypeOf(t,e);}return{setters:[function(_tslib){r=_tslib.__decorate;},function(_lit){s=_lit.html;},function(_litDecoratorsJs){t=_litDecoratorsJs.property;o=_litDecoratorsJs.customElement;},function(_nileCardCssCjsJs){e=_nileCardCssCjsJs.s;},function(_litDirectivesClassMapJs){a=_litDirectivesClassMapJs.classMap;},function(_internalSlotCjsJs){i=_internalSlotCjsJs.H;},function(_internalNileElementCjsJs){d=_internalNileElementCjsJs.N;}],execute:function execute(){_export("N",l=/*#__PURE__*/function(_d){function l(){var _this;_classCallCheck(this,l);_this=_callSuper(this,l,arguments),_this.hasSlotController=new i(_assertThisInitialized(_this),"footer"),_this.active=!1;return _this;}_inherits(l,_d);return _createClass(l,[{key:"render",value:function render(){return s(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n <div\n part=\"base\"\n class=","\n >\n <div class=\"body__wrapper\" part=\"body__wrapper\"\n class=","\n >\n <slot name=\"header\" part=\"header\" class=\"card__header\"></slot>\n <slot part=\"body\" class=\"card__body\"></slot>\n </div>\n\n <slot\n name=\"footer\"\n part=\"footer\"\n ?hidden=\"","\"\n class=\"card__footer\"\n ></slot>\n </div>\n "])),a({card:!0,"card--has-footer":this.hasSlotController.test("footer"),"card--active":this.active}),a({body__wrapper:!0,body__wrapper_nf:!this.hasSlotController.test("footer")}),!this.hasSlotController.test("footer"));}}]);}(d));l.styles=e,r([t({type:Boolean,reflect:!0})],l.prototype,"active",void 0),_export("N",l=r([o("nile-card")],l));}};});
1
+ function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o;}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o;},_typeof(o);}System.register(["tslib","lit","lit/decorators.js","./nile-card.css.cjs.js","lit/directives/class-map.js","../internal/slot.cjs.js","../internal/nile-element.cjs.js"],function(_export,_context){"use strict";var r,s,t,e,o,a,i,d,_templateObject,l;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}function _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function");}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o);}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e;}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+"";}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.");}return("string"===r?String:Number)(t);}function _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e));}function _possibleConstructorReturn(t,e){if(e&&("object"==_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(t);}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e;}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t;})();}function _getPrototypeOf(t){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t);},_getPrototypeOf(t);}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&_setPrototypeOf(t,e);}function _setPrototypeOf(t,e){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t;},_setPrototypeOf(t,e);}return{setters:[function(_tslib){r=_tslib.__decorate;},function(_lit){s=_lit.html;},function(_litDecoratorsJs){t=_litDecoratorsJs.property;e=_litDecoratorsJs.customElement;},function(_nileCardCssCjsJs){o=_nileCardCssCjsJs.s;},function(_litDirectivesClassMapJs){a=_litDirectivesClassMapJs.classMap;},function(_internalSlotCjsJs){i=_internalSlotCjsJs.H;},function(_internalNileElementCjsJs){d=_internalNileElementCjsJs.N;}],execute:function execute(){_export("N",l=/*#__PURE__*/function(_d){function l(){var _this;_classCallCheck(this,l);_this=_callSuper(this,l,arguments),_this.hasSlotController=new i(_assertThisInitialized(_this),"footer"),_this.active=!1,_this.disabled=!1;return _this;}_inherits(l,_d);return _createClass(l,[{key:"render",value:function render(){return s(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n <div\n part=\"base\"\n class=","\n >\n <div class=\"body__wrapper\" part=\"body__wrapper\"\n class=","\n >\n <slot name=\"header\" part=\"header\" class=\"card__header\"></slot>\n <slot part=\"body\" class=\"card__body\"></slot>\n </div>\n\n <slot\n name=\"footer\"\n part=\"footer\"\n ?hidden=\"","\"\n class=\"card__footer\"\n ></slot>\n </div>\n "])),a({card:!0,"card--has-footer":this.hasSlotController.test("footer"),"card--active":this.active,"card--disabled":this.disabled}),a({body__wrapper:!0,body__wrapper_nf:!this.hasSlotController.test("footer")}),!this.hasSlotController.test("footer"));}}]);}(d));l.styles=o,r([t({type:Boolean,reflect:!0})],l.prototype,"active",void 0),r([t({type:Boolean,reflect:!0})],l.prototype,"disabled",void 0),_export("N",l=r([e("nile-card")],l));}};});
2
2
  //# sourceMappingURL=nile-card.cjs.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"nile-card.cjs.js","sources":["../../../src/nile-card/nile-card.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n LitElement,\n html,\n CSSResultArray,\n TemplateResult,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-card.css';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { HasSlotController } from '../internal/slot';\nimport NileElements from '../internal/nile-element';\nimport { CSSResultGroup } from 'lit';\n\n/**\n * Nile icon component.\n *\n * @tag nile-card\n *\n */\n@customElement('nile-card')\nexport class NileCard extends NileElements {\n static styles: CSSResultGroup = styles;\n\n private readonly hasSlotController = new HasSlotController(this, 'footer');\n\n @property({ type: Boolean, reflect: true })active = false;\n\n render() {\n return html`\n <div\n part=\"base\"\n class=${classMap({\n card: true,\n 'card--has-footer': this.hasSlotController.test('footer'),\n 'card--active': this.active,\n })}\n >\n <div class=\"body__wrapper\" part=\"body__wrapper\"\n class=${classMap({\n 'body__wrapper':true,\n 'body__wrapper_nf': !this.hasSlotController.test('footer')\n })}\n >\n <slot name=\"header\" part=\"header\" class=\"card__header\"></slot>\n <slot part=\"body\" class=\"card__body\"></slot>\n </div>\n\n <slot\n name=\"footer\"\n part=\"footer\"\n ?hidden=\"${!this.hasSlotController.test('footer')}\"\n class=\"card__footer\"\n ></slot>\n </div>\n `;\n }\n}\n\nexport default NileCard;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-card': NileCard;\n }\n}\n"],"names":["NileCard","_d","l","this","hasSlotController","HasSlotController","active","_this","_inherits","_createClass","key","value","render","html","_templateObject","_taggedTemplateLiteral","classMap","card","test","body__wrapper","body__wrapper_nf","NileElements","styles","__decorate","property","type","Boolean","reflect","prototype","customElement"],"mappings":"gzGA2BaA,CAAN,uBAAAC,EAAA,EAAA,SAAAC,EAAA,uEAGYC,KAAAA,CAAiBC,iBAAAA,CAAG,GAAIC,CAAAA,CAAkBF,CAAAA,sBAAAA,CAAAA,KAAAA,EAAM,QAEtBA,CAAAA,CAAAA,KAAAA,CAAMG,QAAG,CA+BrD,QAAAC,KAAA,EA7BCC,SAAA,CAAAN,CAAA,CAAAD,EAAA,SAAAQ,YAAA,CAAAP,CAAA,GAAAQ,GAAA,UAAAC,KAAA,UAAAC,MAAAA,CAAAA,CAAAA,CACE,MAAOC,CAAAA,CAAI,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA,weAGCC,CAAS,CAAA,CACfC,MAAM,CACN,CAAA,kBAAA,CAAoBd,KAAKC,iBAAkBc,CAAAA,IAAAA,CAAK,QAChD,CAAA,CAAA,cAAA,CAAgBf,IAAKG,CAAAA,MAAAA,CAAAA,CAAAA,CAIfU,CAAAA,CAAS,CACfG,aAAgB,CAAA,CAAA,CAAA,CAChBC,gBAAqBjB,CAAAA,CAAAA,IAAAA,CAAKC,kBAAkBc,IAAK,CAAA,QAAA,CAAA,CAAA,CAAA,CAUrCf,CAAAA,IAAAA,CAAKC,kBAAkBc,IAAK,CAAA,QAAA,CAAA,EAK/C,CAlCMlB,MADqBqB,CAAvB,GACErB,CAAAA,CAAMsB,OAAmBA,CAIWC,CAAAA,CAAAA,CAAA,CAA1CC,CAAS,CAAA,CAAEC,KAAMC,OAASC,CAAAA,OAAAA,CAAAA,CAAS,KAAsB3B,CAAA4B,CAAAA,SAAAA,CAAA,aAAA,EAL/C5B,CAAAA,CAAAA,OAAAA,KAAAA,CAAAA,CAAQuB,EAAA,CADpBM,CAAAA,CAAc,cACF7B"}
1
+ {"version":3,"file":"nile-card.cjs.js","sources":["../../../src/nile-card/nile-card.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n LitElement,\n html,\n CSSResultArray,\n TemplateResult,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-card.css';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { HasSlotController } from '../internal/slot';\nimport NileElements from '../internal/nile-element';\nimport { CSSResultGroup } from 'lit';\n\n/**\n * Nile icon component.\n *\n * @tag nile-card\n *\n */\n@customElement('nile-card')\nexport class NileCard extends NileElements {\n static styles: CSSResultGroup = styles;\n\n private readonly hasSlotController = new HasSlotController(this, 'footer');\n\n @property({ type: Boolean, reflect: true })active = false;\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n render() {\n return html`\n <div\n part=\"base\"\n class=${classMap({\n card: true,\n 'card--has-footer': this.hasSlotController.test('footer'),\n 'card--active': this.active,\n 'card--disabled': this.disabled,\n })}\n >\n <div class=\"body__wrapper\" part=\"body__wrapper\"\n class=${classMap({\n 'body__wrapper':true,\n 'body__wrapper_nf': !this.hasSlotController.test('footer')\n })}\n >\n <slot name=\"header\" part=\"header\" class=\"card__header\"></slot>\n <slot part=\"body\" class=\"card__body\"></slot>\n </div>\n\n <slot\n name=\"footer\"\n part=\"footer\"\n ?hidden=\"${!this.hasSlotController.test('footer')}\"\n class=\"card__footer\"\n ></slot>\n </div>\n `;\n }\n}\n\nexport default NileCard;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-card': NileCard;\n }\n}\n"],"names":["NileCard","l","this","hasSlotController","HasSlotController","active","disabled","_this","_inherits","_d","_createClass","key","value","render","html","_templateObject","_taggedTemplateLiteral","classMap","card","test","body__wrapper","body__wrapper_nf","NileElements","styles","__decorate","property","type","Boolean","reflect","prototype","_export","customElement"],"mappings":"gzGA2BaA,CAAAA,uBAAAA,EAAAA,EAAN,SAAAC,EAAA,uEAGYC,KAAAA,CAAiBC,iBAAAA,CAAG,GAAIC,CAAAA,CAAAA,CAAAA,sBAAAA,CAAAA,KAAAA,EAAwB,QAEtBF,CAAAA,CAAAA,KAAAA,CAAMG,MAAG,CAAA,CAAA,CAAA,CACRH,KAAAA,CAAQI,QAAG,CAAA,CAAA,CAgCxD,QAAAC,KAAA,EA9BCC,SAAA,CAAAP,CAAA,CAAAQ,EAAA,SAAAC,YAAA,CAAAT,CAAA,GAAAU,GAAA,UAAAC,KAAA,UAAAC,MAAAA,CAAAA,CAAAA,CACE,MAAOC,CAAAA,CAAI,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA,weAGCC,CAAAA,CAAS,CACfC,IAAAA,CAAAA,CAAM,CACN,CAAA,kBAAA,CAAoBhB,IAAKC,CAAAA,iBAAAA,CAAkBgB,IAAK,CAAA,QAAA,CAAA,CAChD,cAAgBjB,CAAAA,IAAAA,CAAKG,MACrB,CAAA,gBAAA,CAAkBH,IAAKI,CAAAA,QAAAA,CAAAA,CAAAA,CAIjBW,CAAAA,CAAS,CACfG,aAAgB,CAAA,CAAA,CAAA,CAChBC,gBAAqBnB,CAAAA,CAAAA,IAAAA,CAAKC,kBAAkBgB,IAAK,CAAA,QAAA,CAAA,CAAA,CAAA,CAUrCjB,CAAAA,IAAAA,CAAKC,kBAAkBgB,IAAK,CAAA,QAAA,CAAA,EAK/C,CAAA,MArC2BG,CAAvB,GACEtB,CAAMuB,CAAAA,MAAAA,CAAmBA,CAIWC,CAAAA,CAAAA,CAAA,CAA1CC,CAAS,CAAA,CAAEC,IAAMC,CAAAA,OAAAA,CAASC,OAAS,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAsB5B,CAAA6B,CAAAA,SAAAA,CAAA,aAAA,EACdL,CAAAA,CAAAA,CAAAA,CAAA,CAA3CC,CAAAA,CAAS,CAAEC,IAAAA,CAAMC,OAASC,CAAAA,OAAAA,CAAAA,CAAS,KAAyB5B,CAAA6B,CAAAA,SAAAA,CAAA,UAAA,CAAA,IAAA,EAAA,CAAA,CAAAC,OAAA,KANlD9B,CAAQwB,CAAAA,CAAAA,CAAA,CADpBO,CAAAA,CAAc,cACF/B"}
@@ -1,2 +1,2 @@
1
- System.register(["lit"],function(_export,_context){"use strict";var r,_templateObject,o;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){r=_lit.css;}],execute:function execute(){_export("s",o=r(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n :host {\n box-sizing: border-box;\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n :host *,\n :host *::before,\n :host *::after {\n box-sizing: inherit;\n }\n\n [hidden] {\n display: none !important;\n }\n\n :host {\n --border-color: var(--nile-card-color-border, var(--ng-colors-border-secondary));\n --border-radius: var(--nile-radius-radius-xl, var(--ng-radius-xl));\n --padding: var(--nile-spacing-xl, var(--ng-spacing-xl));\n display: inline-block;\n }\n\n .card {\n display: flex;\n flex-direction: column;\n justify-items: stretch;\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n outline: solid var(--nile-outline-0-5px) var(--border-color);\n border: solid var(--ng-outline-1px) var(--border-color);\n border-radius: var(--border-radius);\n min-width: 273px;\n max-width: 350px;\n overflow: hidden;\n box-shadow: var(--nile-box-shadow-none, var(--ng-shadow-xs));\n }\n\n .body__wrapper {\n display: flex;\n flex-direction: column;\n gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n padding: var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n }\n\n .body__wrapper_nf {\n padding: var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n }\n .card__header {\n display: block;\n }\n\n .card__body {\n display: block;\n }\n\n .card__footer {\n margin-top: var(--nile-spacing-lg, var(--ng-spacing-lg));\n display: block;\n box-sizing: border-box;\n align-content: center;\n align-items: center;\n padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));\n border-top: 1px solid var(--nile-colors-white-base , var(--ng-colors-border-secondary));\n height: 40px;\n }\n\n \n.card:active {\n border: var(--ng-border-width-2) var(--ng-border-style-solid) var(--ng-colors-border-brand);\n background: var(--ng-colors-bg-brand-primary);\n box-shadow: var(--ng-shadow-xs);\n} \n\n \n.card:active .card__footer {\n background: var(--ng-colors-bg-brand-primary);\n box-shadow: var(--ng-shadow-xs);\n}\n\n\n.card:not(.card--has-footer) .card__footer {\n display: none;\n }\n\n.card--active {\n border: var(--ng-border-width-2) var(--ng-border-style-solid) var(--ng-colors-border-brand);\n background: var(--ng-colors-bg-brand-primary);\n box-shadow: var(--ng-shadow-xs);\n}\n\n.card--active .card__footer {\n background: var(--ng-colors-bg-brand-primary);\n box-shadow: var(--ng-shadow-xs);\n}\n\n \n.card:not(.card--active):not(:active):hover {\n box-shadow: var(--nile-box-shadow-7, var(--ng-shadow-sm));\n outline: solid 1px var(--border-color);\n background-color: var(--ng-colors-bg-primary-hover);\n}\n\n.card:not(.card--active):not(:active):hover .card__footer {\n background-color: var(--ng-colors-bg-primary-hover);\n box-shadow: var(--ng-shadow-sm);\n}\n\n\n"]))));}};});
1
+ System.register(["lit"],function(_export,_context){"use strict";var r,_templateObject,o;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){r=_lit.css;}],execute:function execute(){_export("s",o=r(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n :host {\n box-sizing: border-box;\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n :host *,\n :host *::before,\n :host *::after {\n box-sizing: inherit;\n }\n\n [hidden] {\n display: none !important;\n }\n\n :host {\n --border-color: var(--nile-card-color-border, var(--ng-colors-border-secondary));\n --border-radius: var(--nile-radius-radius-xl, var(--ng-radius-xl));\n --padding: var(--nile-spacing-xl, var(--ng-spacing-xl));\n display: inline-block;\n }\n\n .card {\n display: flex;\n flex-direction: column;\n justify-items: stretch;\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n outline: solid var(--nile-outline-0-5px) var(--border-color);\n border: solid var(--ng-outline-1px) var(--border-color);\n border-radius: var(--border-radius);\n min-width: 273px;\n max-width: 350px;\n overflow: hidden;\n box-shadow: var(--nile-box-shadow-none, var(--ng-shadow-xs));\n }\n\n .body__wrapper {\n display: flex;\n flex-direction: column;\n gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n padding: var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n }\n\n .body__wrapper_nf {\n padding: var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n }\n .card__header {\n display: block;\n }\n\n .card__body {\n display: block;\n }\n\n .card__footer {\n margin-top: var(--nile-spacing-lg, var(--ng-spacing-lg));\n display: block;\n box-sizing: border-box;\n align-content: center;\n align-items: center;\n padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));\n border-top: 1px solid var(--nile-colors-white-base , var(--ng-colors-border-secondary));\n height: 40px;\n }\n\n \n.card:active {\n border: var(--ng-border-width-2) var(--ng-border-style-solid) var(--ng-colors-border-brand);\n background: var(--ng-colors-bg-brand-primary);\n box-shadow: var(--ng-shadow-xs);\n} \n\n \n.card:active .card__footer {\n background: var(--ng-colors-bg-brand-primary);\n box-shadow: var(--ng-shadow-xs);\n}\n\n\n.card:not(.card--has-footer) .card__footer {\n display: none;\n }\n\n.card--active {\n border: var(--ng-border-width-2) var(--ng-border-style-solid) var(--ng-colors-border-brand);\n background: var(--ng-colors-bg-brand-primary);\n box-shadow: var(--ng-shadow-xs);\n}\n\n.card--active .card__footer {\n background: var(--ng-colors-bg-brand-primary);\n box-shadow: var(--ng-shadow-xs);\n}\n\n \n.card:not(.card--active):not(:active):hover {\n box-shadow: var(--nile-box-shadow-7, var(--ng-shadow-sm));\n outline: solid 1px var(--border-color);\n background-color: var(--ng-colors-bg-primary-hover);\n}\n\n.card:not(.card--active):not(:active):hover .card__footer {\n background-color: var(--ng-colors-bg-primary-hover);\n box-shadow: var(--ng-shadow-sm);\n}\n\n \n.card--disabled {\n pointer-events: none;\n opacity: 0.5;\n}\n\n.card--disabled .card__footer {\n pointer-events: none;\n}\n\n"]))));}};});
2
2
  //# sourceMappingURL=nile-card.css.cjs.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"nile-card.css.cjs.js","sources":["../../../src/nile-card/nile-card.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';\n\n/**\n * Card CSS\n */\nexport const styles = css`\n :host {\n box-sizing: border-box;\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n :host *,\n :host *::before,\n :host *::after {\n box-sizing: inherit;\n }\n\n [hidden] {\n display: none !important;\n }\n\n :host {\n --border-color: var(--nile-card-color-border, var(--ng-colors-border-secondary));\n --border-radius: var(--nile-radius-radius-xl, var(--ng-radius-xl));\n --padding: var(--nile-spacing-xl, var(--ng-spacing-xl));\n display: inline-block;\n }\n\n .card {\n display: flex;\n flex-direction: column;\n justify-items: stretch;\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n outline: solid var(--nile-outline-0-5px) var(--border-color);\n border: solid var(--ng-outline-1px) var(--border-color);\n border-radius: var(--border-radius);\n min-width: 273px;\n max-width: 350px;\n overflow: hidden;\n box-shadow: var(--nile-box-shadow-none, var(--ng-shadow-xs));\n }\n\n .body__wrapper {\n display: flex;\n flex-direction: column;\n gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n padding: var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n }\n\n .body__wrapper_nf {\n padding: var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n }\n .card__header {\n display: block;\n }\n\n .card__body {\n display: block;\n }\n\n .card__footer {\n margin-top: var(--nile-spacing-lg, var(--ng-spacing-lg));\n display: block;\n box-sizing: border-box;\n align-content: center;\n align-items: center;\n padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));\n border-top: 1px solid var(--nile-colors-white-base , var(--ng-colors-border-secondary));\n height: 40px;\n }\n\n \n.card:active {\n border: var(--ng-border-width-2) var(--ng-border-style-solid) var(--ng-colors-border-brand);\n background: var(--ng-colors-bg-brand-primary);\n box-shadow: var(--ng-shadow-xs);\n} \n\n \n.card:active .card__footer {\n background: var(--ng-colors-bg-brand-primary);\n box-shadow: var(--ng-shadow-xs);\n}\n\n\n.card:not(.card--has-footer) .card__footer {\n display: none;\n }\n\n.card--active {\n border: var(--ng-border-width-2) var(--ng-border-style-solid) var(--ng-colors-border-brand);\n background: var(--ng-colors-bg-brand-primary);\n box-shadow: var(--ng-shadow-xs);\n}\n\n.card--active .card__footer {\n background: var(--ng-colors-bg-brand-primary);\n box-shadow: var(--ng-shadow-xs);\n}\n\n \n.card:not(.card--active):not(:active):hover {\n box-shadow: var(--nile-box-shadow-7, var(--ng-shadow-sm));\n outline: solid 1px var(--border-color);\n background-color: var(--ng-colors-bg-primary-hover);\n}\n\n.card:not(.card--active):not(:active):hover .card__footer {\n background-color: var(--ng-colors-bg-primary-hover);\n box-shadow: var(--ng-shadow-sm);\n}\n\n\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
1
+ {"version":3,"file":"nile-card.css.cjs.js","sources":["../../../src/nile-card/nile-card.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';\n\n/**\n * Card CSS\n */\nexport const styles = css`\n :host {\n box-sizing: border-box;\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n :host *,\n :host *::before,\n :host *::after {\n box-sizing: inherit;\n }\n\n [hidden] {\n display: none !important;\n }\n\n :host {\n --border-color: var(--nile-card-color-border, var(--ng-colors-border-secondary));\n --border-radius: var(--nile-radius-radius-xl, var(--ng-radius-xl));\n --padding: var(--nile-spacing-xl, var(--ng-spacing-xl));\n display: inline-block;\n }\n\n .card {\n display: flex;\n flex-direction: column;\n justify-items: stretch;\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n outline: solid var(--nile-outline-0-5px) var(--border-color);\n border: solid var(--ng-outline-1px) var(--border-color);\n border-radius: var(--border-radius);\n min-width: 273px;\n max-width: 350px;\n overflow: hidden;\n box-shadow: var(--nile-box-shadow-none, var(--ng-shadow-xs));\n }\n\n .body__wrapper {\n display: flex;\n flex-direction: column;\n gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n padding: var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n }\n\n .body__wrapper_nf {\n padding: var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n }\n .card__header {\n display: block;\n }\n\n .card__body {\n display: block;\n }\n\n .card__footer {\n margin-top: var(--nile-spacing-lg, var(--ng-spacing-lg));\n display: block;\n box-sizing: border-box;\n align-content: center;\n align-items: center;\n padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));\n border-top: 1px solid var(--nile-colors-white-base , var(--ng-colors-border-secondary));\n height: 40px;\n }\n\n \n.card:active {\n border: var(--ng-border-width-2) var(--ng-border-style-solid) var(--ng-colors-border-brand);\n background: var(--ng-colors-bg-brand-primary);\n box-shadow: var(--ng-shadow-xs);\n} \n\n \n.card:active .card__footer {\n background: var(--ng-colors-bg-brand-primary);\n box-shadow: var(--ng-shadow-xs);\n}\n\n\n.card:not(.card--has-footer) .card__footer {\n display: none;\n }\n\n.card--active {\n border: var(--ng-border-width-2) var(--ng-border-style-solid) var(--ng-colors-border-brand);\n background: var(--ng-colors-bg-brand-primary);\n box-shadow: var(--ng-shadow-xs);\n}\n\n.card--active .card__footer {\n background: var(--ng-colors-bg-brand-primary);\n box-shadow: var(--ng-shadow-xs);\n}\n\n \n.card:not(.card--active):not(:active):hover {\n box-shadow: var(--nile-box-shadow-7, var(--ng-shadow-sm));\n outline: solid 1px var(--border-color);\n background-color: var(--ng-colors-bg-primary-hover);\n}\n\n.card:not(.card--active):not(:active):hover .card__footer {\n background-color: var(--ng-colors-bg-primary-hover);\n box-shadow: var(--ng-shadow-sm);\n}\n\n \n.card--disabled {\n pointer-events: none;\n opacity: 0.5;\n}\n\n.card--disabled .card__footer {\n pointer-events: none;\n}\n\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
@@ -108,5 +108,14 @@ import{css as r}from"lit";const o=r`
108
108
  box-shadow: var(--ng-shadow-sm);
109
109
  }
110
110
 
111
+
112
+ .card--disabled {
113
+ pointer-events: none;
114
+ opacity: 0.5;
115
+ }
116
+
117
+ .card--disabled .card__footer {
118
+ pointer-events: none;
119
+ }
111
120
 
112
121
  `;export{o as s};
@@ -1,7 +1,7 @@
1
- import{__decorate as r}from"tslib";import{html as s}from"lit";import{property as t,customElement as e}from"lit/decorators.js";import{s as o}from"./nile-card.css.esm.js";import{classMap as a}from"lit/directives/class-map.js";import{H as i}from"../internal/slot.esm.js";import{N as d}from"../internal/nile-element.esm.js";let l=class extends d{constructor(){super(...arguments),this.hasSlotController=new i(this,"footer"),this.active=!1}render(){return s`
1
+ import{__decorate as r}from"tslib";import{html as e}from"lit";import{property as s,customElement as t}from"lit/decorators.js";import{s as o}from"./nile-card.css.esm.js";import{classMap as a}from"lit/directives/class-map.js";import{H as i}from"../internal/slot.esm.js";import{N as d}from"../internal/nile-element.esm.js";let l=class extends d{constructor(){super(...arguments),this.hasSlotController=new i(this,"footer"),this.active=!1,this.disabled=!1}render(){return e`
2
2
  <div
3
3
  part="base"
4
- class=${a({card:!0,"card--has-footer":this.hasSlotController.test("footer"),"card--active":this.active})}
4
+ class=${a({card:!0,"card--has-footer":this.hasSlotController.test("footer"),"card--active":this.active,"card--disabled":this.disabled})}
5
5
  >
6
6
  <div class="body__wrapper" part="body__wrapper"
7
7
  class=${a({body__wrapper:!0,body__wrapper_nf:!this.hasSlotController.test("footer")})}
@@ -17,4 +17,4 @@ import{__decorate as r}from"tslib";import{html as s}from"lit";import{property as
17
17
  class="card__footer"
18
18
  ></slot>
19
19
  </div>
20
- `}};l.styles=o,r([t({type:Boolean,reflect:!0})],l.prototype,"active",void 0),l=r([e("nile-card")],l);export{l as N};
20
+ `}};l.styles=o,r([s({type:Boolean,reflect:!0})],l.prototype,"active",void 0),r([s({type:Boolean,reflect:!0})],l.prototype,"disabled",void 0),l=r([t("nile-card")],l);export{l as N};
@@ -1,2 +1,2 @@
1
- System.register(["lit"],function(_export,_context){"use strict";var n,_templateObject,i;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){n=_lit.css;}],execute:function execute(){_export("s",i=n(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n :host {\n display: block;\n user-select: none;\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n :host(:focus) {\n outline: none;\n }\n\n .option {\n position: relative;\n display: flex;\n align-items: center;\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));\n line-height: var(--nile-line-height-large, var(--ng-line-height-text-md));\n letter-spacing: normal;\n color: var(--nile-color-dark-1, var(--ng-colors-text-primary-900));\n padding: var(--nile-spacing-sm, var(--ng-spacing-md)) var(--nile-spacing-none, var(--ng-spacing-md));\n transition: 150ms fill;\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n cursor: pointer;\n margin-bottom: var(--nile-spacing-none, var(--ng-spacing-xxs) )\n }\n\n .option--single-select {\n padding: var(--nile-spacing-9px, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-md));\n }\n\n .option--hover:not(.option--current):not(.option--disabled) {\n background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-active));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n border-radius: var(--nile-radius-none, var(--ng-radius-sm));\n }\n\n .option--current,\n .option--current.option--disabled {\n background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-active));\n color: var(--nile-colors-primary-600, var(--ng-colors-text-primary-900));\n opacity: 1;\n border-radius: var(--nile-radius-none, var(--ng-radius-sm));\n }\n\n .option--disabled {\n outline: none;\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .option__label {\n flex: 1 1 auto;\n display: inline-block;\n line-height: 1.4;\n word-break: break-all;\n }\n\n .option .option__check {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n justify-content: center;\n visibility: hidden;\n padding-inline-end: var(--nile-spacing-xs);\n }\n\n .option--selected .option__check {\n visibility: visible;\n }\n\n .option__prefix,\n .option__suffix {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n }\n\n .option__prefix::slotted(*) {\n margin-inline-end: var(--nile-spacing-md, var(--ng-spacing-md));\n }\n\n .option__suffix::slotted(*) {\n margin-inline-start: var(--nile-spacing-md, var(--ng-spacing-md));\n }\n\n :host(:not([aria-selected='true'])) .option .option__suffix{\n display: var(--nile-display-block, var(--ng-display-none));\n }\n\n .option--checkbox{\n pointer-events: none;\n margin-left: var(--nile-spacing-lg, var(--ng-spacing-lg));\n margin-right: var(--nile-spacing-lg, var(--ng-spacing-lg));\n width:auto;\n display:var(--nile-display-inline-block, var(--ng-display-none));\n }\n\n\n @media (forced-colors: active) {\n :host(:hover:not([aria-disabled='true'])) .option {\n outline: dashed 1px SelectedItem;\n outline-offset: -1px;\n }\n }\n"]))));}};});
1
+ System.register(["lit"],function(_export,_context){"use strict";var n,_templateObject,i;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){n=_lit.css;}],execute:function execute(){_export("s",i=n(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n :host {\n display: block;\n user-select: none;\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n :host(:focus) {\n outline: none;\n }\n\n .option {\n position: relative;\n display: flex;\n align-items: center;\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));\n line-height: var(--nile-line-height-1-8, var(--ng-line-height-text-md));\n letter-spacing: normal;\n color: var(--nile-color-dark-1, var(--ng-colors-text-primary-900));\n padding: var(--nile-spacing-sm, var(--ng-spacing-md)) var(--nile-spacing-none, var(--ng-spacing-md));\n transition: 150ms fill;\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n cursor: pointer;\n margin-bottom: var(--nile-spacing-none, var(--ng-spacing-xxs) )\n }\n\n .option--single-select {\n padding: var(--nile-spacing-9px, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-md));\n }\n\n .option--hover:not(.option--current):not(.option--disabled) {\n background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-active));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n border-radius: var(--nile-radius-none, var(--ng-radius-sm));\n }\n\n .option--current,\n .option--current.option--disabled {\n background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-active));\n color: var(--nile-colors-primary-600, var(--ng-colors-text-primary-900));\n opacity: 1;\n border-radius: var(--nile-radius-none, var(--ng-radius-sm));\n }\n\n .option--disabled {\n outline: none;\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .option__label {\n flex: 1 1 auto;\n display: inline-block;\n line-height: 1.4;\n word-break: break-all;\n }\n\n .option .option__check {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n justify-content: center;\n visibility: hidden;\n padding-inline-end: var(--nile-spacing-xs);\n }\n\n .option--selected .option__check {\n visibility: visible;\n }\n\n .option__prefix,\n .option__suffix {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n }\n\n .option__prefix::slotted(*) {\n margin-inline-end: var(--nile-font-size-rem-xsmall, var(--ng-spacing-md));\n }\n\n .option__suffix::slotted(*) {\n margin-inline-start: var(--nile-font-size-rem-xsmall, var(--ng-spacing-md));\n }\n\n :host(:not([aria-selected='true'])) .option .option__suffix{\n display: var(--nile-display-block, var(--ng-display-none));\n }\n\n .option--checkbox{\n pointer-events: none;\n margin-left: var(--nile-spacing-lg, var(--ng-spacing-lg));\n margin-right: var(--nile-spacing-lg, var(--ng-spacing-lg));\n width:auto;\n display:var(--nile-display-inline-block, var(--ng-display-none));\n }\n\n\n @media (forced-colors: active) {\n :host(:hover:not([aria-disabled='true'])) .option {\n outline: dashed 1px SelectedItem;\n outline-offset: -1px;\n }\n }\n"]))));}};});
2
2
  //# sourceMappingURL=nile-option.css.cjs.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"nile-option.css.cjs.js","sources":["../../../src/nile-option/nile-option.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';\n\n/**\n * Option_2 CSS\n */\nexport const styles = css`\n :host {\n display: block;\n user-select: none;\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n :host(:focus) {\n outline: none;\n }\n\n .option {\n position: relative;\n display: flex;\n align-items: center;\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));\n line-height: var(--nile-line-height-large, var(--ng-line-height-text-md));\n letter-spacing: normal;\n color: var(--nile-color-dark-1, var(--ng-colors-text-primary-900));\n padding: var(--nile-spacing-sm, var(--ng-spacing-md)) var(--nile-spacing-none, var(--ng-spacing-md));\n transition: 150ms fill;\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n cursor: pointer;\n margin-bottom: var(--nile-spacing-none, var(--ng-spacing-xxs) )\n }\n\n .option--single-select {\n padding: var(--nile-spacing-9px, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-md));\n }\n\n .option--hover:not(.option--current):not(.option--disabled) {\n background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-active));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n border-radius: var(--nile-radius-none, var(--ng-radius-sm));\n }\n\n .option--current,\n .option--current.option--disabled {\n background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-active));\n color: var(--nile-colors-primary-600, var(--ng-colors-text-primary-900));\n opacity: 1;\n border-radius: var(--nile-radius-none, var(--ng-radius-sm));\n }\n\n .option--disabled {\n outline: none;\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .option__label {\n flex: 1 1 auto;\n display: inline-block;\n line-height: 1.4;\n word-break: break-all;\n }\n\n .option .option__check {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n justify-content: center;\n visibility: hidden;\n padding-inline-end: var(--nile-spacing-xs);\n }\n\n .option--selected .option__check {\n visibility: visible;\n }\n\n .option__prefix,\n .option__suffix {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n }\n\n .option__prefix::slotted(*) {\n margin-inline-end: var(--nile-spacing-md, var(--ng-spacing-md));\n }\n\n .option__suffix::slotted(*) {\n margin-inline-start: var(--nile-spacing-md, var(--ng-spacing-md));\n }\n\n :host(:not([aria-selected='true'])) .option .option__suffix{\n display: var(--nile-display-block, var(--ng-display-none));\n }\n\n .option--checkbox{\n pointer-events: none;\n margin-left: var(--nile-spacing-lg, var(--ng-spacing-lg));\n margin-right: var(--nile-spacing-lg, var(--ng-spacing-lg));\n width:auto;\n display:var(--nile-display-inline-block, var(--ng-display-none));\n }\n\n\n @media (forced-colors: active) {\n :host(:hover:not([aria-disabled='true'])) .option {\n outline: dashed 1px SelectedItem;\n outline-offset: -1px;\n }\n }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
1
+ {"version":3,"file":"nile-option.css.cjs.js","sources":["../../../src/nile-option/nile-option.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';\n\n/**\n * Option_2 CSS\n */\nexport const styles = css`\n :host {\n display: block;\n user-select: none;\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n :host(:focus) {\n outline: none;\n }\n\n .option {\n position: relative;\n display: flex;\n align-items: center;\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));\n line-height: var(--nile-line-height-1-8, var(--ng-line-height-text-md));\n letter-spacing: normal;\n color: var(--nile-color-dark-1, var(--ng-colors-text-primary-900));\n padding: var(--nile-spacing-sm, var(--ng-spacing-md)) var(--nile-spacing-none, var(--ng-spacing-md));\n transition: 150ms fill;\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n cursor: pointer;\n margin-bottom: var(--nile-spacing-none, var(--ng-spacing-xxs) )\n }\n\n .option--single-select {\n padding: var(--nile-spacing-9px, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-md));\n }\n\n .option--hover:not(.option--current):not(.option--disabled) {\n background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-active));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n border-radius: var(--nile-radius-none, var(--ng-radius-sm));\n }\n\n .option--current,\n .option--current.option--disabled {\n background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-active));\n color: var(--nile-colors-primary-600, var(--ng-colors-text-primary-900));\n opacity: 1;\n border-radius: var(--nile-radius-none, var(--ng-radius-sm));\n }\n\n .option--disabled {\n outline: none;\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .option__label {\n flex: 1 1 auto;\n display: inline-block;\n line-height: 1.4;\n word-break: break-all;\n }\n\n .option .option__check {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n justify-content: center;\n visibility: hidden;\n padding-inline-end: var(--nile-spacing-xs);\n }\n\n .option--selected .option__check {\n visibility: visible;\n }\n\n .option__prefix,\n .option__suffix {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n }\n\n .option__prefix::slotted(*) {\n margin-inline-end: var(--nile-font-size-rem-xsmall, var(--ng-spacing-md));\n }\n\n .option__suffix::slotted(*) {\n margin-inline-start: var(--nile-font-size-rem-xsmall, var(--ng-spacing-md));\n }\n\n :host(:not([aria-selected='true'])) .option .option__suffix{\n display: var(--nile-display-block, var(--ng-display-none));\n }\n\n .option--checkbox{\n pointer-events: none;\n margin-left: var(--nile-spacing-lg, var(--ng-spacing-lg));\n margin-right: var(--nile-spacing-lg, var(--ng-spacing-lg));\n width:auto;\n display:var(--nile-display-inline-block, var(--ng-display-none));\n }\n\n\n @media (forced-colors: active) {\n :host(:hover:not([aria-disabled='true'])) .option {\n outline: dashed 1px SelectedItem;\n outline-offset: -1px;\n }\n }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
@@ -17,7 +17,7 @@ import{css as n}from"lit";const i=n`
17
17
  align-items: center;
18
18
  font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));
19
19
  font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));
20
- line-height: var(--nile-line-height-large, var(--ng-line-height-text-md));
20
+ line-height: var(--nile-line-height-1-8, var(--ng-line-height-text-md));
21
21
  letter-spacing: normal;
22
22
  color: var(--nile-color-dark-1, var(--ng-colors-text-primary-900));
23
23
  padding: var(--nile-spacing-sm, var(--ng-spacing-md)) var(--nile-spacing-none, var(--ng-spacing-md));
@@ -79,11 +79,11 @@ import{css as n}from"lit";const i=n`
79
79
  }
80
80
 
81
81
  .option__prefix::slotted(*) {
82
- margin-inline-end: var(--nile-spacing-md, var(--ng-spacing-md));
82
+ margin-inline-end: var(--nile-font-size-rem-xsmall, var(--ng-spacing-md));
83
83
  }
84
84
 
85
85
  .option__suffix::slotted(*) {
86
- margin-inline-start: var(--nile-spacing-md, var(--ng-spacing-md));
86
+ margin-inline-start: var(--nile-font-size-rem-xsmall, var(--ng-spacing-md));
87
87
  }
88
88
 
89
89
  :host(:not([aria-selected='true'])) .option .option__suffix{
@@ -118,6 +118,15 @@ export const styles = css `
118
118
  box-shadow: var(--ng-shadow-sm);
119
119
  }
120
120
 
121
+
122
+ .card--disabled {
123
+ pointer-events: none;
124
+ opacity: 0.5;
125
+ }
126
+
127
+ .card--disabled .card__footer {
128
+ pointer-events: none;
129
+ }
121
130
 
122
131
  `;
123
132
  export default [styles];
@@ -1 +1 @@
1
- {"version":3,"file":"nile-card.css.js","sourceRoot":"","sources":["../../../src/nile-card/nile-card.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+GxB,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';\n\n/**\n * Card CSS\n */\nexport const styles = css`\n :host {\n box-sizing: border-box;\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n :host *,\n :host *::before,\n :host *::after {\n box-sizing: inherit;\n }\n\n [hidden] {\n display: none !important;\n }\n\n :host {\n --border-color: var(--nile-card-color-border, var(--ng-colors-border-secondary));\n --border-radius: var(--nile-radius-radius-xl, var(--ng-radius-xl));\n --padding: var(--nile-spacing-xl, var(--ng-spacing-xl));\n display: inline-block;\n }\n\n .card {\n display: flex;\n flex-direction: column;\n justify-items: stretch;\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n outline: solid var(--nile-outline-0-5px) var(--border-color);\n border: solid var(--ng-outline-1px) var(--border-color);\n border-radius: var(--border-radius);\n min-width: 273px;\n max-width: 350px;\n overflow: hidden;\n box-shadow: var(--nile-box-shadow-none, var(--ng-shadow-xs));\n }\n\n .body__wrapper {\n display: flex;\n flex-direction: column;\n gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n padding: var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n }\n\n .body__wrapper_nf {\n padding: var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n }\n .card__header {\n display: block;\n }\n\n .card__body {\n display: block;\n }\n\n .card__footer {\n margin-top: var(--nile-spacing-lg, var(--ng-spacing-lg));\n display: block;\n box-sizing: border-box;\n align-content: center;\n align-items: center;\n padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));\n border-top: 1px solid var(--nile-colors-white-base , var(--ng-colors-border-secondary));\n height: 40px;\n }\n\n \n.card:active {\n border: var(--ng-border-width-2) var(--ng-border-style-solid) var(--ng-colors-border-brand);\n background: var(--ng-colors-bg-brand-primary);\n box-shadow: var(--ng-shadow-xs);\n} \n\n \n.card:active .card__footer {\n background: var(--ng-colors-bg-brand-primary);\n box-shadow: var(--ng-shadow-xs);\n}\n\n\n.card:not(.card--has-footer) .card__footer {\n display: none;\n }\n\n.card--active {\n border: var(--ng-border-width-2) var(--ng-border-style-solid) var(--ng-colors-border-brand);\n background: var(--ng-colors-bg-brand-primary);\n box-shadow: var(--ng-shadow-xs);\n}\n\n.card--active .card__footer {\n background: var(--ng-colors-bg-brand-primary);\n box-shadow: var(--ng-shadow-xs);\n}\n\n \n.card:not(.card--active):not(:active):hover {\n box-shadow: var(--nile-box-shadow-7, var(--ng-shadow-sm));\n outline: solid 1px var(--border-color);\n background-color: var(--ng-colors-bg-primary-hover);\n}\n\n.card:not(.card--active):not(:active):hover .card__footer {\n background-color: var(--ng-colors-bg-primary-hover);\n box-shadow: var(--ng-shadow-sm);\n}\n\n\n`;\n\nexport default [styles];\n"]}
1
+ {"version":3,"file":"nile-card.css.js","sourceRoot":"","sources":["../../../src/nile-card/nile-card.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwHxB,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';\n\n/**\n * Card CSS\n */\nexport const styles = css`\n :host {\n box-sizing: border-box;\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n :host *,\n :host *::before,\n :host *::after {\n box-sizing: inherit;\n }\n\n [hidden] {\n display: none !important;\n }\n\n :host {\n --border-color: var(--nile-card-color-border, var(--ng-colors-border-secondary));\n --border-radius: var(--nile-radius-radius-xl, var(--ng-radius-xl));\n --padding: var(--nile-spacing-xl, var(--ng-spacing-xl));\n display: inline-block;\n }\n\n .card {\n display: flex;\n flex-direction: column;\n justify-items: stretch;\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n outline: solid var(--nile-outline-0-5px) var(--border-color);\n border: solid var(--ng-outline-1px) var(--border-color);\n border-radius: var(--border-radius);\n min-width: 273px;\n max-width: 350px;\n overflow: hidden;\n box-shadow: var(--nile-box-shadow-none, var(--ng-shadow-xs));\n }\n\n .body__wrapper {\n display: flex;\n flex-direction: column;\n gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n padding: var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n }\n\n .body__wrapper_nf {\n padding: var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n }\n .card__header {\n display: block;\n }\n\n .card__body {\n display: block;\n }\n\n .card__footer {\n margin-top: var(--nile-spacing-lg, var(--ng-spacing-lg));\n display: block;\n box-sizing: border-box;\n align-content: center;\n align-items: center;\n padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));\n border-top: 1px solid var(--nile-colors-white-base , var(--ng-colors-border-secondary));\n height: 40px;\n }\n\n \n.card:active {\n border: var(--ng-border-width-2) var(--ng-border-style-solid) var(--ng-colors-border-brand);\n background: var(--ng-colors-bg-brand-primary);\n box-shadow: var(--ng-shadow-xs);\n} \n\n \n.card:active .card__footer {\n background: var(--ng-colors-bg-brand-primary);\n box-shadow: var(--ng-shadow-xs);\n}\n\n\n.card:not(.card--has-footer) .card__footer {\n display: none;\n }\n\n.card--active {\n border: var(--ng-border-width-2) var(--ng-border-style-solid) var(--ng-colors-border-brand);\n background: var(--ng-colors-bg-brand-primary);\n box-shadow: var(--ng-shadow-xs);\n}\n\n.card--active .card__footer {\n background: var(--ng-colors-bg-brand-primary);\n box-shadow: var(--ng-shadow-xs);\n}\n\n \n.card:not(.card--active):not(:active):hover {\n box-shadow: var(--nile-box-shadow-7, var(--ng-shadow-sm));\n outline: solid 1px var(--border-color);\n background-color: var(--ng-colors-bg-primary-hover);\n}\n\n.card:not(.card--active):not(:active):hover .card__footer {\n background-color: var(--ng-colors-bg-primary-hover);\n box-shadow: var(--ng-shadow-sm);\n}\n\n \n.card--disabled {\n pointer-events: none;\n opacity: 0.5;\n}\n\n.card--disabled .card__footer {\n pointer-events: none;\n}\n\n`;\n\nexport default [styles];\n"]}
@@ -17,6 +17,7 @@ export declare class NileCard extends NileElements {
17
17
  static styles: CSSResultGroup;
18
18
  private readonly hasSlotController;
19
19
  active: boolean;
20
+ disabled: boolean;
20
21
  render(): TemplateResult<1>;
21
22
  }
22
23
  export default NileCard;
@@ -22,6 +22,7 @@ let NileCard = class NileCard extends NileElements {
22
22
  super(...arguments);
23
23
  this.hasSlotController = new HasSlotController(this, 'footer');
24
24
  this.active = false;
25
+ this.disabled = false;
25
26
  }
26
27
  render() {
27
28
  return html `
@@ -31,6 +32,7 @@ let NileCard = class NileCard extends NileElements {
31
32
  card: true,
32
33
  'card--has-footer': this.hasSlotController.test('footer'),
33
34
  'card--active': this.active,
35
+ 'card--disabled': this.disabled,
34
36
  })}
35
37
  >
36
38
  <div class="body__wrapper" part="body__wrapper"
@@ -57,6 +59,9 @@ NileCard.styles = styles;
57
59
  __decorate([
58
60
  property({ type: Boolean, reflect: true })
59
61
  ], NileCard.prototype, "active", void 0);
62
+ __decorate([
63
+ property({ type: Boolean, reflect: true })
64
+ ], NileCard.prototype, "disabled", void 0);
60
65
  NileCard = __decorate([
61
66
  customElement('nile-card')
62
67
  ], NileCard);
@@ -1 +1 @@
1
- {"version":3,"file":"nile-card.js","sourceRoot":"","sources":["../../../src/nile-card/nile-card.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAEL,IAAI,GAGL,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,YAAY,MAAM,0BAA0B,CAAC;AAGpD;;;;;GAKG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,YAAY;IAAnC;;QAGY,sBAAiB,GAAG,IAAI,iBAAiB,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;QAEhC,WAAM,GAAG,KAAK,CAAC;IA+B5D,CAAC;IA7BC,MAAM;QACJ,OAAO,IAAI,CAAA;;;gBAGC,QAAQ,CAAC;YACf,IAAI,EAAE,IAAI;YACV,kBAAkB,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC;YACzD,cAAc,EAAE,IAAI,CAAC,MAAM;SAC5B,CAAC;;;gBAGM,QAAQ,CAAC;YACf,eAAe,EAAC,IAAI;YACpB,kBAAkB,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC;SAC3D,CAAC;;;;;;;;;qBASW,CAAC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC;;;;KAItD,CAAC;IACJ,CAAC;;AAlCM,eAAM,GAAmB,MAAM,AAAzB,CAA0B;AAII;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAAe;AAL/C,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAoCpB;;AAED,eAAe,QAAQ,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n LitElement,\n html,\n CSSResultArray,\n TemplateResult,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-card.css';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { HasSlotController } from '../internal/slot';\nimport NileElements from '../internal/nile-element';\nimport { CSSResultGroup } from 'lit';\n\n/**\n * Nile icon component.\n *\n * @tag nile-card\n *\n */\n@customElement('nile-card')\nexport class NileCard extends NileElements {\n static styles: CSSResultGroup = styles;\n\n private readonly hasSlotController = new HasSlotController(this, 'footer');\n\n @property({ type: Boolean, reflect: true })active = false;\n\n render() {\n return html`\n <div\n part=\"base\"\n class=${classMap({\n card: true,\n 'card--has-footer': this.hasSlotController.test('footer'),\n 'card--active': this.active,\n })}\n >\n <div class=\"body__wrapper\" part=\"body__wrapper\"\n class=${classMap({\n 'body__wrapper':true,\n 'body__wrapper_nf': !this.hasSlotController.test('footer')\n })}\n >\n <slot name=\"header\" part=\"header\" class=\"card__header\"></slot>\n <slot part=\"body\" class=\"card__body\"></slot>\n </div>\n\n <slot\n name=\"footer\"\n part=\"footer\"\n ?hidden=\"${!this.hasSlotController.test('footer')}\"\n class=\"card__footer\"\n ></slot>\n </div>\n `;\n }\n}\n\nexport default NileCard;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-card': NileCard;\n }\n}\n"]}
1
+ {"version":3,"file":"nile-card.js","sourceRoot":"","sources":["../../../src/nile-card/nile-card.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAEL,IAAI,GAGL,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,YAAY,MAAM,0BAA0B,CAAC;AAGpD;;;;;GAKG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,YAAY;IAAnC;;QAGY,sBAAiB,GAAG,IAAI,iBAAiB,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;QAEhC,WAAM,GAAG,KAAK,CAAC;QACd,aAAQ,GAAG,KAAK,CAAC;IAgC/D,CAAC;IA9BC,MAAM;QACJ,OAAO,IAAI,CAAA;;;gBAGC,QAAQ,CAAC;YACf,IAAI,EAAE,IAAI;YACV,kBAAkB,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC;YACzD,cAAc,EAAE,IAAI,CAAC,MAAM;YAC3B,gBAAgB,EAAE,IAAI,CAAC,QAAQ;SAChC,CAAC;;;gBAGM,QAAQ,CAAC;YACf,eAAe,EAAC,IAAI;YACpB,kBAAkB,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC;SAC3D,CAAC;;;;;;;;;qBASW,CAAC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC;;;;KAItD,CAAC;IACJ,CAAC;;AApCM,eAAM,GAAmB,MAAM,AAAzB,CAA0B;AAII;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAAe;AACd;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAAkB;AANlD,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAsCpB;;AAED,eAAe,QAAQ,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n LitElement,\n html,\n CSSResultArray,\n TemplateResult,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-card.css';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { HasSlotController } from '../internal/slot';\nimport NileElements from '../internal/nile-element';\nimport { CSSResultGroup } from 'lit';\n\n/**\n * Nile icon component.\n *\n * @tag nile-card\n *\n */\n@customElement('nile-card')\nexport class NileCard extends NileElements {\n static styles: CSSResultGroup = styles;\n\n private readonly hasSlotController = new HasSlotController(this, 'footer');\n\n @property({ type: Boolean, reflect: true })active = false;\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n render() {\n return html`\n <div\n part=\"base\"\n class=${classMap({\n card: true,\n 'card--has-footer': this.hasSlotController.test('footer'),\n 'card--active': this.active,\n 'card--disabled': this.disabled,\n })}\n >\n <div class=\"body__wrapper\" part=\"body__wrapper\"\n class=${classMap({\n 'body__wrapper':true,\n 'body__wrapper_nf': !this.hasSlotController.test('footer')\n })}\n >\n <slot name=\"header\" part=\"header\" class=\"card__header\"></slot>\n <slot part=\"body\" class=\"card__body\"></slot>\n </div>\n\n <slot\n name=\"footer\"\n part=\"footer\"\n ?hidden=\"${!this.hasSlotController.test('footer')}\"\n class=\"card__footer\"\n ></slot>\n </div>\n `;\n }\n}\n\nexport default NileCard;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-card': NileCard;\n }\n}\n"]}
@@ -27,7 +27,7 @@ export const styles = css `
27
27
  align-items: center;
28
28
  font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));
29
29
  font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));
30
- line-height: var(--nile-line-height-large, var(--ng-line-height-text-md));
30
+ line-height: var(--nile-line-height-1-8, var(--ng-line-height-text-md));
31
31
  letter-spacing: normal;
32
32
  color: var(--nile-color-dark-1, var(--ng-colors-text-primary-900));
33
33
  padding: var(--nile-spacing-sm, var(--ng-spacing-md)) var(--nile-spacing-none, var(--ng-spacing-md));
@@ -89,11 +89,11 @@ export const styles = css `
89
89
  }
90
90
 
91
91
  .option__prefix::slotted(*) {
92
- margin-inline-end: var(--nile-spacing-md, var(--ng-spacing-md));
92
+ margin-inline-end: var(--nile-font-size-rem-xsmall, var(--ng-spacing-md));
93
93
  }
94
94
 
95
95
  .option__suffix::slotted(*) {
96
- margin-inline-start: var(--nile-spacing-md, var(--ng-spacing-md));
96
+ margin-inline-start: var(--nile-font-size-rem-xsmall, var(--ng-spacing-md));
97
97
  }
98
98
 
99
99
  :host(:not([aria-selected='true'])) .option .option__suffix{
@@ -1 +1 @@
1
- {"version":3,"file":"nile-option.css.js","sourceRoot":"","sources":["../../../src/nile-option/nile-option.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2GxB,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';\n\n/**\n * Option_2 CSS\n */\nexport const styles = css`\n :host {\n display: block;\n user-select: none;\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n :host(:focus) {\n outline: none;\n }\n\n .option {\n position: relative;\n display: flex;\n align-items: center;\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));\n line-height: var(--nile-line-height-large, var(--ng-line-height-text-md));\n letter-spacing: normal;\n color: var(--nile-color-dark-1, var(--ng-colors-text-primary-900));\n padding: var(--nile-spacing-sm, var(--ng-spacing-md)) var(--nile-spacing-none, var(--ng-spacing-md));\n transition: 150ms fill;\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n cursor: pointer;\n margin-bottom: var(--nile-spacing-none, var(--ng-spacing-xxs) )\n }\n\n .option--single-select {\n padding: var(--nile-spacing-9px, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-md));\n }\n\n .option--hover:not(.option--current):not(.option--disabled) {\n background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-active));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n border-radius: var(--nile-radius-none, var(--ng-radius-sm));\n }\n\n .option--current,\n .option--current.option--disabled {\n background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-active));\n color: var(--nile-colors-primary-600, var(--ng-colors-text-primary-900));\n opacity: 1;\n border-radius: var(--nile-radius-none, var(--ng-radius-sm));\n }\n\n .option--disabled {\n outline: none;\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .option__label {\n flex: 1 1 auto;\n display: inline-block;\n line-height: 1.4;\n word-break: break-all;\n }\n\n .option .option__check {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n justify-content: center;\n visibility: hidden;\n padding-inline-end: var(--nile-spacing-xs);\n }\n\n .option--selected .option__check {\n visibility: visible;\n }\n\n .option__prefix,\n .option__suffix {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n }\n\n .option__prefix::slotted(*) {\n margin-inline-end: var(--nile-spacing-md, var(--ng-spacing-md));\n }\n\n .option__suffix::slotted(*) {\n margin-inline-start: var(--nile-spacing-md, var(--ng-spacing-md));\n }\n\n :host(:not([aria-selected='true'])) .option .option__suffix{\n display: var(--nile-display-block, var(--ng-display-none));\n }\n\n .option--checkbox{\n pointer-events: none;\n margin-left: var(--nile-spacing-lg, var(--ng-spacing-lg));\n margin-right: var(--nile-spacing-lg, var(--ng-spacing-lg));\n width:auto;\n display:var(--nile-display-inline-block, var(--ng-display-none));\n }\n\n\n @media (forced-colors: active) {\n :host(:hover:not([aria-disabled='true'])) .option {\n outline: dashed 1px SelectedItem;\n outline-offset: -1px;\n }\n }\n`;\n\nexport default [styles];\n"]}
1
+ {"version":3,"file":"nile-option.css.js","sourceRoot":"","sources":["../../../src/nile-option/nile-option.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2GxB,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';\n\n/**\n * Option_2 CSS\n */\nexport const styles = css`\n :host {\n display: block;\n user-select: none;\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n :host(:focus) {\n outline: none;\n }\n\n .option {\n position: relative;\n display: flex;\n align-items: center;\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));\n line-height: var(--nile-line-height-1-8, var(--ng-line-height-text-md));\n letter-spacing: normal;\n color: var(--nile-color-dark-1, var(--ng-colors-text-primary-900));\n padding: var(--nile-spacing-sm, var(--ng-spacing-md)) var(--nile-spacing-none, var(--ng-spacing-md));\n transition: 150ms fill;\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n cursor: pointer;\n margin-bottom: var(--nile-spacing-none, var(--ng-spacing-xxs) )\n }\n\n .option--single-select {\n padding: var(--nile-spacing-9px, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-md));\n }\n\n .option--hover:not(.option--current):not(.option--disabled) {\n background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-active));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n border-radius: var(--nile-radius-none, var(--ng-radius-sm));\n }\n\n .option--current,\n .option--current.option--disabled {\n background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-active));\n color: var(--nile-colors-primary-600, var(--ng-colors-text-primary-900));\n opacity: 1;\n border-radius: var(--nile-radius-none, var(--ng-radius-sm));\n }\n\n .option--disabled {\n outline: none;\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .option__label {\n flex: 1 1 auto;\n display: inline-block;\n line-height: 1.4;\n word-break: break-all;\n }\n\n .option .option__check {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n justify-content: center;\n visibility: hidden;\n padding-inline-end: var(--nile-spacing-xs);\n }\n\n .option--selected .option__check {\n visibility: visible;\n }\n\n .option__prefix,\n .option__suffix {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n }\n\n .option__prefix::slotted(*) {\n margin-inline-end: var(--nile-font-size-rem-xsmall, var(--ng-spacing-md));\n }\n\n .option__suffix::slotted(*) {\n margin-inline-start: var(--nile-font-size-rem-xsmall, var(--ng-spacing-md));\n }\n\n :host(:not([aria-selected='true'])) .option .option__suffix{\n display: var(--nile-display-block, var(--ng-display-none));\n }\n\n .option--checkbox{\n pointer-events: none;\n margin-left: var(--nile-spacing-lg, var(--ng-spacing-lg));\n margin-right: var(--nile-spacing-lg, var(--ng-spacing-lg));\n width:auto;\n display:var(--nile-display-inline-block, var(--ng-display-none));\n }\n\n\n @media (forced-colors: active) {\n :host(:hover:not([aria-disabled='true'])) .option {\n outline: dashed 1px SelectedItem;\n outline-offset: -1px;\n }\n }\n`;\n\nexport default [styles];\n"]}