@bonprix-ds/bpds-link 0.0.0-stage → 1.0.0
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/constants.js +6 -0
- package/dist/constants.js.map +1 -0
- package/dist/index.js +38 -0
- package/dist/index.js.map +1 -0
- package/dist/link.css +2 -0
- package/package.json +46 -3
- package/README.md +0 -3
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"constants.js","names":["LINK_SMALL","LINK_HIDE_UNDERLINE","LINK_INVERTED"],"sources":["../src/constants.ts"],"sourcesContent":["export const LINK_SMALL = [\"false\", \"true\"] as const;\nexport const LINK_HIDE_UNDERLINE = [\"false\", \"true\"] as const;\nexport const LINK_INVERTED = [\"false\", \"true\"] as const;\n\nexport type LinkSmall = (typeof LINK_SMALL)[number];\nexport type LinkHideUnderline = (typeof LINK_HIDE_UNDERLINE)[number];\nexport type LinkInverted = (typeof LINK_INVERTED)[number];\n\n// This interface is needed to make React pick up our custom element including its props, see `src/jsx.ts` in the React wrapper\nexport interface LinkProps {\n small?: LinkSmall;\n \"hide-underline\"?: LinkHideUnderline;\n inverted?: LinkInverted;\n}\n"],"mappings":";AAAA,IAAaA,IAAa,CAAC,SAAS,MAAM,GAC7BC,IAAsB,CAAC,SAAS,MAAM,GACtCC,IAAgB,CAAC,SAAS,MAAM"}
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { LINK_HIDE_UNDERLINE as e, LINK_INVERTED as t, LINK_SMALL as n } from "./constants.js";
|
|
2
|
+
//#region src/index.ts
|
|
3
|
+
var r = class extends HTMLElement {
|
|
4
|
+
get small() {
|
|
5
|
+
return this.getAttribute("small");
|
|
6
|
+
}
|
|
7
|
+
set small(e) {
|
|
8
|
+
this.setAttribute("small", e ?? "false");
|
|
9
|
+
}
|
|
10
|
+
get hideUnderline() {
|
|
11
|
+
return this.getAttribute("hide-underline");
|
|
12
|
+
}
|
|
13
|
+
set hideUnderline(e) {
|
|
14
|
+
this.setAttribute("hide-underline", e ?? "false");
|
|
15
|
+
}
|
|
16
|
+
get inverted() {
|
|
17
|
+
return this.getAttribute("inverted");
|
|
18
|
+
}
|
|
19
|
+
set inverted(e) {
|
|
20
|
+
this.setAttribute("inverted", e ?? "false");
|
|
21
|
+
}
|
|
22
|
+
connectedCallback() {
|
|
23
|
+
this.hasAttribute("small") || (this.small = "false"), this.hasAttribute("hide-underline") || (this.hideUnderline = "false"), this.hasAttribute("inverted") || (this.inverted = "false");
|
|
24
|
+
}
|
|
25
|
+
focus(e) {
|
|
26
|
+
this.control?.focus(e);
|
|
27
|
+
}
|
|
28
|
+
blur() {
|
|
29
|
+
this.control?.blur();
|
|
30
|
+
}
|
|
31
|
+
get control() {
|
|
32
|
+
return this.querySelector(":scope > :is(a, button)");
|
|
33
|
+
}
|
|
34
|
+
};
|
|
35
|
+
//#endregion
|
|
36
|
+
export { e as LINK_HIDE_UNDERLINE, t as LINK_INVERTED, n as LINK_SMALL, r as Link };
|
|
37
|
+
|
|
38
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","names":["Link","value","options","LINK_HIDE_UNDERLINE","LINK_INVERTED","LINK_SMALL"],"sources":["../src/index.ts"],"sourcesContent":["import \"./link.css\";\nimport type { LinkHideUnderline, LinkInverted, LinkSmall } from \"./constants\";\n\n// The constants live apart from the class so a consumer can read them without evaluating\n// `class Link extends HTMLElement`, which throws in Node. See ./constants.\nexport { LINK_HIDE_UNDERLINE, LINK_INVERTED, LINK_SMALL, type LinkProps } from \"./constants\";\n\nexport class Link extends HTMLElement {\n get small() {\n return this.getAttribute(\"small\") as LinkSmall | null;\n }\n\n set small(value: LinkSmall | null) {\n this.setAttribute(\"small\", value ?? \"false\");\n }\n\n get hideUnderline() {\n return this.getAttribute(\"hide-underline\") as LinkHideUnderline | null;\n }\n\n set hideUnderline(value: LinkHideUnderline | null) {\n this.setAttribute(\"hide-underline\", value ?? \"false\");\n }\n\n get inverted() {\n return this.getAttribute(\"inverted\") as LinkInverted | null;\n }\n\n set inverted(value: LinkInverted | null) {\n this.setAttribute(\"inverted\", value ?? \"false\");\n }\n\n connectedCallback() {\n if (!this.hasAttribute(\"small\")) this.small = \"false\";\n if (!this.hasAttribute(\"hide-underline\")) this.hideUnderline = \"false\";\n if (!this.hasAttribute(\"inverted\")) this.inverted = \"false\";\n }\n\n override focus(options?: FocusOptions) {\n this.control?.focus(options);\n }\n\n override blur() {\n this.control?.blur();\n }\n\n private get control() {\n return this.querySelector<HTMLAnchorElement | HTMLButtonElement>(\":scope > :is(a, button)\");\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"bpds-link\": Link;\n }\n}\n"],"mappings":";;AAOA,IAAaA,IAAb,cAA0B,YAAY;CACpC,IAAI,QAAQ;EACV,OAAO,KAAK,aAAa,OAAO;CAClC;CAEA,IAAI,MAAM,GAAyB;EACjC,KAAK,aAAa,SAASC,KAAS,OAAO;CAC7C;CAEA,IAAI,gBAAgB;EAClB,OAAO,KAAK,aAAa,gBAAgB;CAC3C;CAEA,IAAI,cAAc,GAAiC;EACjD,KAAK,aAAa,kBAAkBA,KAAS,OAAO;CACtD;CAEA,IAAI,WAAW;EACb,OAAO,KAAK,aAAa,UAAU;CACrC;CAEA,IAAI,SAAS,GAA4B;EACvC,KAAK,aAAa,YAAYA,KAAS,OAAO;CAChD;CAEA,oBAAoB;EAGlB,AAFK,KAAK,aAAa,OAAO,MAAG,KAAK,QAAQ,UACzC,KAAK,aAAa,gBAAgB,MAAG,KAAK,gBAAgB,UAC1D,KAAK,aAAa,UAAU,MAAG,KAAK,WAAW;CACtD;CAEA,MAAe,GAAwB;EACrC,KAAK,SAAS,MAAMC,CAAO;CAC7B;CAEA,OAAgB;EACd,KAAK,SAAS,KAAK;CACrB;CAEA,IAAY,UAAU;EACpB,OAAO,KAAK,cAAqD,yBAAyB;CAC5F;AACF"}
|
package/dist/link.css
ADDED
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
bpds-link{--link-color:var(--bpds-color-primary);--link-decoration-line:underline;--link-decoration-thickness:auto;--link-font:var(--bpds-typography-link-large)}bpds-link:not([hidden]){display:contents}bpds-link[small=true]{--link-font:var(--bpds-typography-link-small)}bpds-link[hide-underline=true]{--link-decoration-line:none}bpds-link[inverted=true]{--link-color:var(--bpds-color-primary-inverse)}bpds-link:not([hidden])>:is(a,button):not([hidden]){border-radius:var(--bpds-radius-0-5);color:var(--link-color);cursor:pointer;background:0 0;border:0 solid;align-items:center;padding:0;text-decoration:none;display:inline-flex;position:relative}bpds-link:not([hidden])>:is(a,button):not([hidden]):before{content:" ";white-space:pre;inline-size:0}bpds-link:not([hidden])>:is(a,button):not([hidden])>svg{block-size:var(--bpds-spacing-4);fill:currentColor;inline-size:var(--bpds-spacing-4);flex-shrink:0}bpds-link:not([hidden])>:is(a,button):not([hidden])>span{font:var(--link-font);overflow-wrap:break-word;-webkit-text-decoration-line:var(--link-decoration-line);text-decoration-line:var(--link-decoration-line);text-decoration-thickness:var(--link-decoration-thickness);text-underline-offset:var(--bpds-spacing-0-5)}bpds-link:not([hidden])>:is(a,button):not([hidden])>.sr-only{clip-path:inset(50%);white-space:nowrap;border:0;block-size:.0625rem;inline-size:.0625rem;margin:-.0625rem;padding:0;position:absolute;overflow:hidden}bpds-link:not([hidden])>:is(a,button):not([hidden]):focus-visible{--link-decoration-line:none;outline:var(--bpds-spacing-0-5) solid var(--link-color);outline-offset:var(--bpds-spacing-0-5)}@media (hover:hover) and (pointer:fine){bpds-link:not([hidden])>:is(a,button):not([hidden]):not(:focus-visible)>span:hover{--link-decoration-line:underline;--link-decoration-thickness:var(--bpds-spacing-0-5)}}
|
|
2
|
+
/*$vite$:1*/
|
package/package.json
CHANGED
|
@@ -1,6 +1,49 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bonprix-ds/bpds-link",
|
|
3
|
-
"version": "
|
|
4
|
-
"
|
|
5
|
-
"
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "bpds-link component, implemented as a web component, for the Bonprix Design System.",
|
|
5
|
+
"keywords": [],
|
|
6
|
+
"license": "UNLICENSED",
|
|
7
|
+
"author": "",
|
|
8
|
+
"repository": {
|
|
9
|
+
"type": "git",
|
|
10
|
+
"url": "git+https://github.com/bonprix/design-system.git",
|
|
11
|
+
"directory": "packages/web-components/link"
|
|
12
|
+
},
|
|
13
|
+
"files": [
|
|
14
|
+
"dist",
|
|
15
|
+
"!dist/tsconfig.tsbuildinfo",
|
|
16
|
+
"!dist/vite.config.d.ts",
|
|
17
|
+
"!dist/**/*.test.d.ts"
|
|
18
|
+
],
|
|
19
|
+
"type": "module",
|
|
20
|
+
"sideEffects": [
|
|
21
|
+
"**/*.css"
|
|
22
|
+
],
|
|
23
|
+
"module": "./dist/index.js",
|
|
24
|
+
"types": "./dist/index.d.ts",
|
|
25
|
+
"exports": {
|
|
26
|
+
".": {
|
|
27
|
+
"import": "./dist/index.js",
|
|
28
|
+
"types": "./dist/index.d.ts",
|
|
29
|
+
"default": "./dist/index.js"
|
|
30
|
+
},
|
|
31
|
+
"./constants": {
|
|
32
|
+
"types": "./dist/src/constants.d.ts",
|
|
33
|
+
"import": "./dist/constants.js",
|
|
34
|
+
"default": "./dist/constants.js"
|
|
35
|
+
},
|
|
36
|
+
"./link.css": "./dist/link.css"
|
|
37
|
+
},
|
|
38
|
+
"publishConfig": {
|
|
39
|
+
"access": "public",
|
|
40
|
+
"provenance": true
|
|
41
|
+
},
|
|
42
|
+
"devDependencies": {
|
|
43
|
+
"vite": "8.3.3",
|
|
44
|
+
"@bonprix-ds/vite-config": "0.0.0"
|
|
45
|
+
},
|
|
46
|
+
"scripts": {
|
|
47
|
+
"build": "vite build"
|
|
48
|
+
}
|
|
6
49
|
}
|
package/README.md
DELETED