@politiet/sheriff-web-components 0.1.2 → 0.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/react-wrappers/SDSButtonWrapper.d.ts +5 -0
- package/dist/react-wrappers/SDSButtonWrapper.d.ts.map +1 -0
- package/dist/react-wrappers/SDSButtonWrapper.js +12 -0
- package/dist/react-wrappers/SDSButtonWrapper.js.map +1 -0
- package/dist/react-wrappers/SDSNavCardWrapper.d.ts +3 -0
- package/dist/react-wrappers/SDSNavCardWrapper.d.ts.map +1 -0
- package/dist/react-wrappers/SDSNavCardWrapper.js +10 -0
- package/dist/react-wrappers/SDSNavCardWrapper.js.map +1 -0
- package/dist/sds-button/sds-button.d.ts +1 -0
- package/dist/sds-button/sds-button.d.ts.map +1 -1
- package/dist/sds-button/sds-button.js +11 -0
- package/dist/sds-button/sds-button.js.map +1 -1
- package/dist/sds-nav-card/sds-nav-card.styles.d.ts.map +1 -1
- package/dist/sds-nav-card/sds-nav-card.styles.js +0 -1
- package/dist/sds-nav-card/sds-nav-card.styles.js.map +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SDSButtonWrapper.d.ts","sourceRoot":"","sources":["../../src/react-wrappers/SDSButtonWrapper.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAErD,eAAO,MAAM,gBAAgB;;EAO3B,CAAC"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { createComponent } from '@lit/react';
|
|
3
|
+
import { SDSButton } from '../sds-button/sds-button';
|
|
4
|
+
export const SDSButtonWrapper = createComponent({
|
|
5
|
+
tagName: 'sds-button',
|
|
6
|
+
elementClass: SDSButton,
|
|
7
|
+
react: React,
|
|
8
|
+
events: {
|
|
9
|
+
onClick: 'click',
|
|
10
|
+
},
|
|
11
|
+
});
|
|
12
|
+
//# sourceMappingURL=SDSButtonWrapper.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SDSButtonWrapper.js","sourceRoot":"","sources":["../../src/react-wrappers/SDSButtonWrapper.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAErD,MAAM,CAAC,MAAM,gBAAgB,GAAG,eAAe,CAAC;IAC/C,OAAO,EAAE,YAAY;IACrB,YAAY,EAAE,SAAS;IACvB,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACP,OAAO,EAAE,OAAO;KAChB;CACD,CAAC,CAAC","sourcesContent":["import React from 'react';\nimport { createComponent } from '@lit/react';\nimport { SDSButton } from '../sds-button/sds-button';\n\nexport const SDSButtonWrapper = createComponent({\n\ttagName: 'sds-button',\n\telementClass: SDSButton,\n\treact: React,\n\tevents: {\n\t\tonClick: 'click',\n\t},\n});\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SDSNavCardWrapper.d.ts","sourceRoot":"","sources":["../../src/react-wrappers/SDSNavCardWrapper.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAE1D,eAAO,MAAM,iBAAiB,wDAK5B,CAAC"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { createComponent } from '@lit/react';
|
|
3
|
+
import { SDSNavCard } from '../sds-nav-card/sds-nav-card';
|
|
4
|
+
export const SDSNavCardWrapper = createComponent({
|
|
5
|
+
tagName: 'sds-nav-card',
|
|
6
|
+
elementClass: SDSNavCard,
|
|
7
|
+
react: React,
|
|
8
|
+
events: {},
|
|
9
|
+
});
|
|
10
|
+
//# sourceMappingURL=SDSNavCardWrapper.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SDSNavCardWrapper.js","sourceRoot":"","sources":["../../src/react-wrappers/SDSNavCardWrapper.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAE1D,MAAM,CAAC,MAAM,iBAAiB,GAAG,eAAe,CAAC;IAChD,OAAO,EAAE,cAAc;IACvB,YAAY,EAAE,UAAU;IACxB,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE,EAAE;CACV,CAAC,CAAC","sourcesContent":["import React from 'react';\nimport { createComponent } from '@lit/react';\nimport { SDSNavCard } from '../sds-nav-card/sds-nav-card';\n\nexport const SDSNavCardWrapper = createComponent({\n\ttagName: 'sds-nav-card',\n\telementClass: SDSNavCard,\n\treact: React,\n\tevents: {},\n});\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-button.d.ts","sourceRoot":"","sources":["../../src/sds-button/sds-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC,KAAK,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AAChD,KAAK,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;AAC1D,KAAK,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE/C,qBACa,SAAU,SAAQ,UAAU;IAExC,OAAgB,MAAM,4BAAY;IAIlC,IAAI,EAAG,MAAM,CAAC;IAGd,IAAI,EAAE,UAAU,CAAY;IAG5B,OAAO,EAAE,aAAa,CAAa;IAGnC,IAAI,EAAE,UAAU,CAAW;IAG3B,QAAQ,EAAE,OAAO,CAAS;
|
|
1
|
+
{"version":3,"file":"sds-button.d.ts","sourceRoot":"","sources":["../../src/sds-button/sds-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC,KAAK,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AAChD,KAAK,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;AAC1D,KAAK,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE/C,qBACa,SAAU,SAAQ,UAAU;IAExC,OAAgB,MAAM,4BAAY;IAIlC,IAAI,EAAG,MAAM,CAAC;IAGd,IAAI,EAAE,UAAU,CAAY;IAG5B,OAAO,EAAE,aAAa,CAAa;IAGnC,IAAI,EAAE,UAAU,CAAW;IAG3B,QAAQ,EAAE,OAAO,CAAS;IAE1B,OAAO,CAAC,QAAQ,CAAC,YAAY,CAY3B;IAEO,MAAM;CAqBf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,YAAY,EAAE,SAAS,CAAC;KACxB;CACD"}
|
|
@@ -15,6 +15,16 @@ let SDSButton = class SDSButton extends LitElement {
|
|
|
15
15
|
this.variant = 'primary';
|
|
16
16
|
this.size = 'large';
|
|
17
17
|
this.disabled = false;
|
|
18
|
+
this._handleClick = (event) => {
|
|
19
|
+
event.preventDefault();
|
|
20
|
+
event.stopImmediatePropagation();
|
|
21
|
+
if (!this.disabled) {
|
|
22
|
+
this.dispatchEvent(new CustomEvent('click', {
|
|
23
|
+
bubbles: true,
|
|
24
|
+
composed: true,
|
|
25
|
+
}));
|
|
26
|
+
}
|
|
27
|
+
};
|
|
18
28
|
}
|
|
19
29
|
render() {
|
|
20
30
|
const buttonClasses = {
|
|
@@ -30,6 +40,7 @@ let SDSButton = class SDSButton extends LitElement {
|
|
|
30
40
|
type="${this.type}"
|
|
31
41
|
name="${this.name}"
|
|
32
42
|
?disabled="${this.disabled}"
|
|
43
|
+
@click="${this._handleClick}"
|
|
33
44
|
>
|
|
34
45
|
<slot></slot>
|
|
35
46
|
</button>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-button.js","sourceRoot":"","sources":["../../src/sds-button/sds-button.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAOtC,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QASN,SAAI,GAAe,QAAQ,CAAC;QAG5B,YAAO,GAAkB,SAAS,CAAC;QAGnC,SAAI,GAAe,OAAO,CAAC;QAG3B,aAAQ,GAAY,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"sds-button.js","sourceRoot":"","sources":["../../src/sds-button/sds-button.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAOtC,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QASN,SAAI,GAAe,QAAQ,CAAC;QAG5B,YAAO,GAAkB,SAAS,CAAC;QAGnC,SAAI,GAAe,OAAO,CAAC;QAG3B,aAAQ,GAAY,KAAK,CAAC;QAET,iBAAY,GAAG,CAAC,KAAiB,EAAE,EAAE;YACrD,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,wBAAwB,EAAE,CAAC;YAEjC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACpB,IAAI,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,OAAO,EAAE;oBACxB,OAAO,EAAE,IAAI;oBACb,QAAQ,EAAE,IAAI;iBACd,CAAC,CACF,CAAC;YACH,CAAC;QACF,CAAC,CAAC;IAuBH,CAAC;IArBS,MAAM;QACd,MAAM,aAAa,GAAG;YACrB,YAAY,EAAE,IAAI;YAClB,uBAAuB,EAAE,IAAI,CAAC,OAAO,KAAK,WAAW;YACrD,sBAAsB,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU;YACnD,oBAAoB,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;YAC5C,mBAAmB,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;SAC1C,CAAC;QAEF,OAAO,IAAI,CAAA;;aAEA,QAAQ,CAAC,aAAa,CAAC;YACxB,IAAI,CAAC,IAAI;YACT,IAAI,CAAC,IAAI;iBACJ,IAAI,CAAC,QAAQ;cAChB,IAAI,CAAC,YAAY;;;;GAI5B,CAAC;IACH,CAAC;;AArDD,UAAU;AACM,gBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAIlC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCACb;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCACC;AAG5B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CACQ;AAGnC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCACA;AAG3B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2CACF;AAlBd,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAuDrB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './sds-button.styles';\n\ntype ButtonType = 'button' | 'submit' | 'reset';\ntype ButtonVariant = 'primary' | 'secondary' | 'tertiary';\ntype ButtonSize = 'large' | 'medium' | 'small';\n\n@customElement('sds-button')\nexport class SDSButton extends LitElement {\n\t// Styling\n\tstatic override styles = [styles];\n\n\t// Reactive Props\n\t@property({ type: String })\n\tname!: string;\n\n\t@property({ type: String })\n\ttype: ButtonType = 'button';\n\n\t@property({ type: String })\n\tvariant: ButtonVariant = 'primary';\n\n\t@property({ type: String })\n\tsize: ButtonSize = 'large';\n\n\t@property({ type: Boolean })\n\tdisabled: boolean = false;\n\n\tprivate readonly _handleClick = (event: MouseEvent) => {\n\t\tevent.preventDefault();\n\t\tevent.stopImmediatePropagation();\n\n\t\tif (!this.disabled) {\n\t\t\tthis.dispatchEvent(\n\t\t\t\tnew CustomEvent('click', {\n\t\t\t\t\tbubbles: true,\n\t\t\t\t\tcomposed: true,\n\t\t\t\t})\n\t\t\t);\n\t\t}\n\t};\n\n\toverride render() {\n\t\tconst buttonClasses = {\n\t\t\t'sds-button': true,\n\t\t\t'sds-button--secondary': this.variant === 'secondary',\n\t\t\t'sds-button--tertiary': this.variant === 'tertiary',\n\t\t\t'sds-button--medium': this.size === 'medium',\n\t\t\t'sds-button--small': this.size === 'small',\n\t\t};\n\n\t\treturn html`\n\t\t\t<button\n\t\t\t\tclass=\"${classMap(buttonClasses)}\"\n\t\t\t\ttype=\"${this.type}\"\n\t\t\t\tname=\"${this.name}\"\n\t\t\t\t?disabled=\"${this.disabled}\"\n\t\t\t\t@click=\"${this._handleClick}\"\n\t\t\t>\n\t\t\t\t<slot></slot>\n\t\t\t</button>\n\t\t`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-button': SDSButton;\n\t}\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-nav-card.styles.d.ts","sourceRoot":"","sources":["../../src/sds-nav-card/sds-nav-card.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"sds-nav-card.styles.d.ts","sourceRoot":"","sources":["../../src/sds-nav-card/sds-nav-card.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA0JlB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-nav-card.styles.js","sourceRoot":"","sources":["../../src/sds-nav-card/sds-nav-card.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"sds-nav-card.styles.js","sourceRoot":"","sources":["../../src/sds-nav-card/sds-nav-card.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0JxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t.sds-nav-card {\n\t\tcolor: var(--sds-color-semantic-text-default);\n\t\tbackground-color: var(\n\t\t\t--sds-color-global-lightblue-100\n\t\t); // TODO: Global variable used, should be replaced by a more spesific one\n\n\t\tfont-size: var(--sds-typography-base-font-size);\n\t\tline-height: var(--sds-typography-base-line-height);\n\t\tfont-weight: var(--sds-typography-base-font-weight);\n\t\tfont-family: var(--sds-typography-font-family);\n\n\t\tdisplay: flex;\n\t\tmin-height: 10.25rem;\n\t\theight: 100%;\n\t\twidth: 100%;\n\t\tmax-width: 50rem;\n\n\t\tbox-sizing: border-box;\n\t\tpadding: var(--sds-spacing-7) var(--sds-spacing-9) var(--sds-spacing-8);\n\t\tgap: var(--sds-spacing-5);\n\t\ttext-align: left;\n\n\t\tborder-radius: var(--sds-radius-card);\n\t\tborder: 1px solid transparent;\n\n\t\tcursor: pointer;\n\n\t\t& p {\n\t\t\tpadding: 0;\n\t\t\tmargin: 0;\n\t\t\thyphens: auto;\n\t\t}\n\n\t\t&:link {\n\t\t\ttext-decoration: none;\n\t\t}\n\n\t\t&:hover {\n\t\t\tbackground-color: var(\n\t\t\t\t--sds-color-global-lightblue-300\n\t\t\t); // TODO: Global variable used, should be replaced by a more spesific one\n\n\t\t\t.sds-nav-card__heading {\n\t\t\t\ttext-decoration: none;\n\t\t\t}\n\t\t}\n\n\t\t&:active,\n\t\t&:focus:active {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-selected);\n\t\t\tcolor: var(--sds-color-semantic-text-on-action);\n\n\t\t\t.sds-nav-card__heading {\n\t\t\t\ttext-decoration: underline;\n\t\t\t\ttext-decoration-thickness: 0.075rem;\n\t\t\t}\n\n\t\t\t::slotted(*) {\n\t\t\t\tstroke: var(--sds-color-semantic-icon-on-action);\n\t\t\t}\n\t\t}\n\n\t\t&:focus {\n\t\t\tborder: 1px solid var(--sds-color-semantic-border-focus);\n\t\t\tbackground: var(\n\t\t\t\t--sds-color-global-lightblue-100\n\t\t\t); // TODO: Global variable used, should be replaced by a more spesific one\n\t\t}\n\n\t\t&:disabled {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-disabled);\n\t\t\tpointer-events: none;\n\t\t}\n\t}\n\n\t.sds-nav-card--hasIcon {\n\t\tpadding: var(--sds-spacing-7) var(--sds-spacing-7) var(--sds-spacing-8);\n\t}\n\n\t.sds-nav-card__content {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\twidth: 100%;\n\t\tgap: var(--sds-spacing-3);\n\t}\n\n\t.sds-nav-card__text {\n\t\tdisplay: -webkit-box;\n\t\t-webkit-line-clamp: 3;\n\t\t-webkit-box-orient: vertical;\n\t\toverflow: hidden;\n\t}\n\n\t::slotted(*) {\n\t\theight: 4.5rem;\n\t\tmin-width: 4.5rem;\n\t\twidth: 4.5rem;\n\t\talign-self: center;\n\t\tstroke: var(\n\t\t\t--sds-color-global-black\n\t\t); // TODO: Global variable used, should be replaced by a more spesific one\n\t}\n\n\t.sds-nav-card__heading {\n\t\tfont-weight: 600;\n\t\tfont-size: 1.5rem;\n\t\tmargin: 0;\n\t\ttext-decoration: underline;\n\t\ttext-decoration-thickness: 0.075rem;\n\t\ttext-underline-offset: 0.146rem;\n\t}\n\n\t.sds-nav-card--medium {\n\t\tmin-height: 7rem;\n\n\t\t.sds-nav-card__text {\n\t\t\tdisplay: -webkit-box;\n\t\t\tdisplay: flex;\n\n\t\t\t-webkit-line-clamp: 1;\n\t\t\t-webkit-box-orient: vertical;\n\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t}\n\n\t\t::slotted(*) {\n\t\t\theight: 3rem;\n\t\t\tmin-width: 3rem;\n\t\t\twidth: 3rem;\n\t\t}\n\t}\n\n\t.sds-nav-card--small {\n\t\tmin-height: 4.5rem;\n\t\tpadding: var(--sds-spacing-5) var(--sds-spacing-8) var(--sds-spacing-6);\n\n\t\t.sds-nav-card--hasIcon {\n\t\t\tpadding: var(--sds-spacing-5) var(--sds-spacing-7)\n\t\t\t\tvar(--sds-spacing-6);\n\t\t}\n\n\t\t.sds-nav-card__content {\n\t\t\tgap: 0;\n\t\t\talign-self: center;\n\t\t}\n\n\t\t::slotted(*) {\n\t\t\theight: 2.5rem;\n\t\t\tmin-width: 2.5rem;\n\t\t\twidth: 2.5rem;\n\t\t}\n\t}\n`;\n"]}
|