@nuralyui/card 0.0.9 → 0.0.11
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/bundle.js +69 -1
- package/card.component.d.ts +1 -1
- package/card.component.js.map +1 -1
- package/card.style.js.map +1 -1
- package/card.types.js.map +1 -1
- package/index.js.map +1 -1
- package/package.json +1 -1
- package/react.js.map +1 -1
package/bundle.js
CHANGED
|
@@ -1 +1,69 @@
|
|
|
1
|
-
import{css as r,LitElement as a,html as o}from"lit";import{property as d,customElement as
|
|
1
|
+
import{css as r,LitElement as a,html as o}from"lit";import{property as d,customElement as c}from"lit/decorators.js";import{classMap as n}from"lit/directives/class-map.js";import{NuralyUIBaseMixin as l}from"@nuralyui/common/mixins";const e=r`
|
|
2
|
+
:host {
|
|
3
|
+
display: block;
|
|
4
|
+
color: var(--nuraly-color-text);
|
|
5
|
+
background-color: var(--nuraly-color-background);
|
|
6
|
+
font-family: var(--nuraly-card-font-family);
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.card {
|
|
10
|
+
background-color: var(--nuraly-card-background-color);
|
|
11
|
+
border-radius: var(--nuraly-card-border-radius);
|
|
12
|
+
border: var(--nuraly-card-border);
|
|
13
|
+
overflow: hidden;
|
|
14
|
+
transition: var(--nuraly-card-transition);
|
|
15
|
+
box-shadow: var(--nuraly-card-shadow);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.card:hover {
|
|
19
|
+
cursor: var(--nuraly-card-cursor);
|
|
20
|
+
box-shadow: var(--nuraly-card-hover-shadow);
|
|
21
|
+
background-color: var(--nuraly-card-hover-background-color);
|
|
22
|
+
border-color: var(--nuraly-card-hover-border-color);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.card__header {
|
|
26
|
+
font-weight: var(--nuraly-card-header-font-weight);
|
|
27
|
+
border-bottom: var(--nuraly-card-header-border-bottom);
|
|
28
|
+
padding: var(--nuraly-card-padding);
|
|
29
|
+
background-color: var(--nuraly-card-header-background-color);
|
|
30
|
+
font-size: var(--nuraly-card-font-size);
|
|
31
|
+
color: var(--nuraly-card-header-color);
|
|
32
|
+
line-height: var(--nuraly-card-line-height);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.card__content {
|
|
36
|
+
padding: var(--nuraly-card-padding);
|
|
37
|
+
color: var(--nuraly-card-content-color);
|
|
38
|
+
font-size: var(--nuraly-card-font-size);
|
|
39
|
+
line-height: var(--nuraly-card-line-height);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
/* Size variants */
|
|
43
|
+
.card--small .card__header,
|
|
44
|
+
.card--small .card__content {
|
|
45
|
+
padding: var(--nuraly-card-small-padding);
|
|
46
|
+
font-size: var(--nuraly-card-small-font-size);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.card--large .card__header,
|
|
50
|
+
.card--large .card__content {
|
|
51
|
+
padding: var(--nuraly-card-large-padding);
|
|
52
|
+
font-size: var(--nuraly-card-large-font-size);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
/* Focus styles for accessibility */
|
|
56
|
+
.card:focus-within {
|
|
57
|
+
outline: var(--nuraly-card-focus-outline);
|
|
58
|
+
outline-offset: var(--nuraly-card-focus-offset);
|
|
59
|
+
}
|
|
60
|
+
`;var t=function(r,a,o,d){for(var c,n=arguments.length,l=n<3?a:null===d?d=Object.getOwnPropertyDescriptor(a,o):d,e=r.length-1;e>=0;e--)(c=r[e])&&(l=(n<3?c(l):n>3?c(a,o,l):c(a,o))||l);return n>3&&l&&Object.defineProperty(a,o,l),l};let i=class extends(l(a)){constructor(){super(...arguments),this.header="",this.size="default"}render(){return o`
|
|
61
|
+
<div
|
|
62
|
+
class="card ${n({"card--small":"small"===this.size,"card--large":"large"===this.size})}"
|
|
63
|
+
>
|
|
64
|
+
${this.header?o`<div class="card__header">${this.header}</div>`:""}
|
|
65
|
+
<div class="card__content">
|
|
66
|
+
<slot name="content"></slot>
|
|
67
|
+
</div>
|
|
68
|
+
</div>
|
|
69
|
+
`}};i.styles=e,t([d({type:String})],i.prototype,"header",void 0),t([d({type:String})],i.prototype,"size",void 0),i=t([c("nr-card")],i);export{i as NrCardElement};
|
package/card.component.d.ts
CHANGED
|
@@ -24,7 +24,7 @@ export declare class NrCardElement extends NrCardElement_base {
|
|
|
24
24
|
* Size variant of the card
|
|
25
25
|
*/
|
|
26
26
|
size: CardSize;
|
|
27
|
-
render(): import("lit").TemplateResult<1>;
|
|
27
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
28
28
|
}
|
|
29
29
|
export {};
|
|
30
30
|
//# sourceMappingURL=card.component.d.ts.map
|
package/card.component.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"card.component.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"card.component.js","sourceRoot":"","sources":["../../../../src/components/card/card.component.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEzC,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAE5D;;;;;;;;;;;;GAYG;AAEH,IAAa,aAAa,GAA1B,MAAa,aAAc,SAAQ,iBAAiB,CAAC,UAAU,CAAC;IAAhE;;QAGE;;WAEG;QACyB,WAAM,GAAG,EAAE,CAAC;QAExC;;WAEG;QACyB,SAAI,oCAAoB;IAiBtD,CAAC;IAfU,MAAM;QACb,OAAO,IAAI,CAAA;;sBAEO,QAAQ,CAAC;YACrB,aAAa,EAAE,IAAI,CAAC,IAAI,iCAAmB;YAC3C,aAAa,EAAE,IAAI,CAAC,IAAI,iCAAmB;SAC5C,CAAC;;UAEA,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA,6BAA6B,IAAI,CAAC,MAAM,QAAQ,CAAC,CAAC,CAAC,EAAE;;;;;KAK5E,CAAC;IACJ,CAAC;CACF,CAAA;AA3BiB,oBAAM,GAAG,MAAO,CAAA;AAKJ;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAa;AAKZ;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAAyB;AAXzC,aAAa;IADzB,aAAa,CAAC,SAAS,CAAC;GACZ,aAAa,CA4BzB;SA5BY,aAAa","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './card.style.js';\nimport { CardSize } from './card.types.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\n\n/**\n * Card component for displaying content in a structured container\n * \n * @element nr-card\n * @slot content - Content to be displayed in the card body\n * \n * @example\n * ```html\n * <nr-card header=\"Card Title\" size=\"medium\">\n * <div slot=\"content\">Card content goes here</div>\n * </nr-card>\n * ```\n */\n@customElement('nr-card')\nexport class NrCardElement extends NuralyUIBaseMixin(LitElement) {\n static override styles = styles;\n\n /**\n * Header text displayed at the top of the card\n */\n @property({ type: String }) header = '';\n\n /**\n * Size variant of the card\n */\n @property({ type: String }) size = CardSize.Default;\n\n override render() {\n return html`\n <div\n class=\"card ${classMap({\n 'card--small': this.size === CardSize.Small,\n 'card--large': this.size === CardSize.Large\n })}\"\n >\n ${this.header ? html`<div class=\"card__header\">${this.header}</div>` : ''}\n <div class=\"card__content\">\n <slot name=\"content\"></slot>\n </div>\n </div>\n `;\n }\n}\n"]}
|
package/card.style.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"card.style.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"card.style.js","sourceRoot":"","sources":["../../../../src/components/card/card.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2DxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n :host {\n display: block;\n color: var(--nuraly-color-text);\n background-color: var(--nuraly-color-background);\n font-family: var(--nuraly-card-font-family);\n }\n\n .card {\n background-color: var(--nuraly-card-background-color);\n border-radius: var(--nuraly-card-border-radius);\n border: var(--nuraly-card-border);\n overflow: hidden;\n transition: var(--nuraly-card-transition);\n box-shadow: var(--nuraly-card-shadow);\n }\n\n .card:hover {\n cursor: var(--nuraly-card-cursor);\n box-shadow: var(--nuraly-card-hover-shadow);\n background-color: var(--nuraly-card-hover-background-color);\n border-color: var(--nuraly-card-hover-border-color);\n }\n\n .card__header {\n font-weight: var(--nuraly-card-header-font-weight);\n border-bottom: var(--nuraly-card-header-border-bottom);\n padding: var(--nuraly-card-padding);\n background-color: var(--nuraly-card-header-background-color);\n font-size: var(--nuraly-card-font-size);\n color: var(--nuraly-card-header-color);\n line-height: var(--nuraly-card-line-height);\n }\n\n .card__content {\n padding: var(--nuraly-card-padding);\n color: var(--nuraly-card-content-color);\n font-size: var(--nuraly-card-font-size);\n line-height: var(--nuraly-card-line-height);\n }\n\n /* Size variants */\n .card--small .card__header,\n .card--small .card__content {\n padding: var(--nuraly-card-small-padding);\n font-size: var(--nuraly-card-small-font-size);\n }\n\n .card--large .card__header,\n .card--large .card__content {\n padding: var(--nuraly-card-large-padding);\n font-size: var(--nuraly-card-large-font-size);\n }\n\n /* Focus styles for accessibility */\n .card:focus-within {\n outline: var(--nuraly-card-focus-outline);\n outline-offset: var(--nuraly-card-focus-offset);\n }\n`;\n"]}
|
package/card.types.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"card.types.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"card.types.js","sourceRoot":"","sources":["../../../../src/components/card/card.types.ts"],"names":[],"mappings":"","sourcesContent":["/**\n * Card size variants\n */\nexport const enum CardSize {\n Small = 'small',\n Default = 'default',\n Large = 'large',\n}\n\n/**\n * Card configuration interface\n */\nexport interface CardConfig {\n header?: string;\n size?: CardSize;\n clickable?: boolean;\n}\n"]}
|
package/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/card/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC","sourcesContent":["export * from './card.component.js';\nexport * from './card.types.js';\n"]}
|
package/package.json
CHANGED
package/react.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"react.js","sourceRoot":"","sources":["
|
|
1
|
+
{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../../src/components/card/react.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEpD,MAAM,CAAC,MAAM,MAAM,GAAG,eAAe,CAAC;IACpC,OAAO,EAAE,SAAS;IAClB,YAAY,EAAE,aAAa;IAC3B,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACN,KAAK,EAAE,OAAO;KACf;CACF,CAAC,CAAC","sourcesContent":["import { createComponent } from '@lit-labs/react';\nimport * as React from 'react';\nimport { NrCardElement } from './card.component.js';\n\nexport const NrCard = createComponent({\n tagName: 'nr-card',\n elementClass: NrCardElement,\n react: React,\n events: {\n click: 'click',\n },\n});\n"]}
|