@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 +3 -0
- package/dist/index.js +15 -6
- package/dist/nile-card/nile-card.cjs.js +1 -1
- package/dist/nile-card/nile-card.cjs.js.map +1 -1
- package/dist/nile-card/nile-card.css.cjs.js +1 -1
- package/dist/nile-card/nile-card.css.cjs.js.map +1 -1
- package/dist/nile-card/nile-card.css.esm.js +9 -0
- package/dist/nile-card/nile-card.esm.js +3 -3
- package/dist/nile-option/nile-option.css.cjs.js +1 -1
- package/dist/nile-option/nile-option.css.cjs.js.map +1 -1
- package/dist/nile-option/nile-option.css.esm.js +3 -3
- package/dist/src/nile-card/nile-card.css.js +9 -0
- package/dist/src/nile-card/nile-card.css.js.map +1 -1
- package/dist/src/nile-card/nile-card.d.ts +1 -0
- package/dist/src/nile-card/nile-card.js +5 -0
- package/dist/src/nile-card/nile-card.js.map +1 -1
- package/dist/src/nile-option/nile-option.css.js +3 -3
- package/dist/src/nile-option/nile-option.css.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/nile-card/nile-card.css.ts +9 -0
- package/src/nile-card/nile-card.ts +2 -0
- package/src/nile-option/nile-option.css.ts +3 -3
- package/vscode-html-custom-data.json +6 -1
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-
|
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-
|
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-
|
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,
|
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","
|
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
|
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([
|
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-
|
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-
|
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-
|
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-
|
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-
|
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
|
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"]}
|
@@ -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;
|
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-
|
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-
|
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-
|
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-
|
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"]}
|