@fristil/designsystem 0.3.0 → 0.5.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/CHANGELOG.md +121 -0
- package/README.md +22 -9
- package/dist/components/frittstaende/connection-status/connection-status.d.ts +28 -0
- package/dist/components/frittstaende/connection-status/connection-status.d.ts.map +1 -0
- package/dist/components/frittstaende/connection-status/connection-status.js +22 -0
- package/dist/components/frittstaende/connection-status/connection-status.js.map +1 -0
- package/dist/components/frittstaende/connection-status/fs-connection-status.d.ts +54 -0
- package/dist/components/frittstaende/connection-status/fs-connection-status.d.ts.map +1 -0
- package/dist/components/frittstaende/connection-status/fs-connection-status.js +123 -0
- package/dist/components/frittstaende/connection-status/fs-connection-status.js.map +1 -0
- package/dist/components/frittstaende/session-timeout/fs-session-timeout.d.ts +56 -0
- package/dist/components/frittstaende/session-timeout/fs-session-timeout.d.ts.map +1 -0
- package/dist/components/frittstaende/session-timeout/fs-session-timeout.js +179 -0
- package/dist/components/frittstaende/session-timeout/fs-session-timeout.js.map +1 -0
- package/dist/components/frittstaende/session-timeout/session-timeout.d.ts +28 -0
- package/dist/components/frittstaende/session-timeout/session-timeout.d.ts.map +1 -0
- package/dist/components/frittstaende/session-timeout/session-timeout.js +22 -0
- package/dist/components/frittstaende/session-timeout/session-timeout.js.map +1 -0
- package/dist/components/frittstaende/toast/fs-toast.d.ts +16 -22
- package/dist/components/frittstaende/toast/fs-toast.d.ts.map +1 -1
- package/dist/components/frittstaende/toast/fs-toast.js +38 -27
- package/dist/components/frittstaende/toast/fs-toast.js.map +1 -1
- package/dist/components/frittstaende/toast/toast.d.ts +34 -0
- package/dist/components/frittstaende/toast/toast.d.ts.map +1 -0
- package/dist/components/frittstaende/toast/toast.js +26 -0
- package/dist/components/frittstaende/toast/toast.js.map +1 -0
- package/dist/components/ramme/error-summary/error-summary.d.ts +39 -0
- package/dist/components/ramme/error-summary/error-summary.d.ts.map +1 -0
- package/dist/components/ramme/error-summary/error-summary.js +31 -0
- package/dist/components/ramme/error-summary/error-summary.js.map +1 -0
- package/dist/components/ramme/error-summary/fs-error-summary.d.ts +16 -42
- package/dist/components/ramme/error-summary/fs-error-summary.d.ts.map +1 -1
- package/dist/components/ramme/error-summary/fs-error-summary.js +57 -92
- package/dist/components/ramme/error-summary/fs-error-summary.js.map +1 -1
- package/dist/components/ramme/field/field-core.d.ts +31 -0
- package/dist/components/ramme/field/field-core.d.ts.map +1 -1
- package/dist/components/ramme/field/field-core.js +31 -0
- package/dist/components/ramme/field/field-core.js.map +1 -1
- package/dist/components/ramme/field/fs-field.d.ts +38 -40
- package/dist/components/ramme/field/fs-field.d.ts.map +1 -1
- package/dist/components/ramme/field/fs-field.js +127 -54
- package/dist/components/ramme/field/fs-field.js.map +1 -1
- package/dist/components/ramme/popover/fs-popover.d.ts +20 -27
- package/dist/components/ramme/popover/fs-popover.d.ts.map +1 -1
- package/dist/components/ramme/popover/fs-popover.js +68 -54
- package/dist/components/ramme/popover/fs-popover.js.map +1 -1
- package/dist/components/ramme/popover/popover.d.ts +43 -0
- package/dist/components/ramme/popover/popover.d.ts.map +1 -0
- package/dist/components/ramme/popover/popover.js +49 -0
- package/dist/components/ramme/popover/popover.js.map +1 -0
- package/dist/components/ramme/suggestion/fs-suggestion.d.ts +75 -0
- package/dist/components/ramme/suggestion/fs-suggestion.d.ts.map +1 -0
- package/dist/components/ramme/suggestion/fs-suggestion.js +232 -0
- package/dist/components/ramme/suggestion/fs-suggestion.js.map +1 -0
- package/dist/components/ramme/suggestion/suggestion.d.ts +97 -0
- package/dist/components/ramme/suggestion/suggestion.d.ts.map +1 -0
- package/dist/components/ramme/suggestion/suggestion.js +79 -0
- package/dist/components/ramme/suggestion/suggestion.js.map +1 -0
- package/dist/components/ramme/tabs/fs-tabs.d.ts +31 -36
- package/dist/components/ramme/tabs/fs-tabs.d.ts.map +1 -1
- package/dist/components/ramme/tabs/fs-tabs.js +62 -84
- package/dist/components/ramme/tabs/fs-tabs.js.map +1 -1
- package/dist/components/ramme/tabs/tabs.d.ts +50 -0
- package/dist/components/ramme/tabs/tabs.d.ts.map +1 -0
- package/dist/components/ramme/tabs/tabs.js +54 -0
- package/dist/components/ramme/tabs/tabs.js.map +1 -0
- package/dist/fs.d.ts +94 -0
- package/dist/fs.d.ts.map +1 -1
- package/dist/fs.js +42 -0
- package/dist/fs.js.map +1 -1
- package/dist/index.d.ts +10 -3
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +10 -3
- package/dist/index.js.map +1 -1
- package/dist/jsx/react.d.ts +35 -50
- package/dist/jsx/react.d.ts.map +1 -1
- package/dist/react.d.ts +142 -1
- package/dist/react.d.ts.map +1 -1
- package/dist/react.js +71 -2
- package/dist/react.js.map +1 -1
- package/package.json +16 -25
- package/src/components/frittstaende/connection-status/connection-status.css +33 -0
- package/src/components/frittstaende/connection-status/connection-status.ts +41 -0
- package/src/components/frittstaende/connection-status/fs-connection-status.ts +144 -0
- package/src/components/frittstaende/session-timeout/fs-session-timeout.ts +212 -0
- package/src/components/frittstaende/session-timeout/session-timeout.css +43 -0
- package/src/components/frittstaende/session-timeout/session-timeout.ts +42 -0
- package/src/components/frittstaende/toast/fs-toast.ts +39 -30
- package/src/components/frittstaende/toast/toast.ts +45 -0
- package/src/components/ramme/error-summary/error-summary.ts +55 -0
- package/src/components/ramme/error-summary/fs-error-summary.ts +62 -119
- package/src/components/ramme/field/field-core.ts +32 -0
- package/src/components/ramme/field/fs-field.ts +144 -61
- package/src/components/ramme/popover/fs-popover.ts +78 -72
- package/src/components/ramme/popover/popover.ts +79 -0
- package/src/components/ramme/suggestion/fs-suggestion.ts +265 -0
- package/src/components/ramme/suggestion/suggestion.ts +105 -0
- package/src/components/ramme/tabs/fs-tabs.ts +67 -98
- package/src/components/ramme/tabs/tabs.ts +104 -0
- package/dist/components/frittstaende/calendar/fs-calendar.d.ts +0 -52
- package/dist/components/frittstaende/calendar/fs-calendar.d.ts.map +0 -1
- package/dist/components/frittstaende/calendar/fs-calendar.js +0 -462
- package/dist/components/frittstaende/calendar/fs-calendar.js.map +0 -1
- package/dist/components/frittstaende/date-field/fs-date-field.d.ts +0 -110
- package/dist/components/frittstaende/date-field/fs-date-field.d.ts.map +0 -1
- package/dist/components/frittstaende/date-field/fs-date-field.js +0 -264
- package/dist/components/frittstaende/date-field/fs-date-field.js.map +0 -1
- package/dist/components/frittstaende/suggestion/fs-suggestion.d.ts +0 -133
- package/dist/components/frittstaende/suggestion/fs-suggestion.d.ts.map +0 -1
- package/dist/components/frittstaende/suggestion/fs-suggestion.js +0 -280
- package/dist/components/frittstaende/suggestion/fs-suggestion.js.map +0 -1
- package/src/components/frittstaende/calendar/fs-calendar.ts +0 -525
- package/src/components/frittstaende/date-field/date-field.css +0 -54
- package/src/components/frittstaende/date-field/fs-date-field.ts +0 -309
- package/src/components/frittstaende/suggestion/fs-suggestion.ts +0 -333
- /package/src/components/{frittstaende → ramme}/suggestion/suggestion.css +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fs-field.js","sourceRoot":"","sources":["../../../../src/components/ramme/field/fs-field.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"fs-field.js","sourceRoot":"","sources":["../../../../src/components/ramme/field/fs-field.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +1,4 @@
|
|
|
1
|
-
import { LitElement } from "lit";
|
|
2
1
|
export declare const FS_POPOVER_TAG: "fs-popover";
|
|
3
|
-
export declare const POPOVER_CLASS: "fs-popover";
|
|
4
2
|
type Placement = "bottom-start" | "bottom-end" | "top-start" | "top-end";
|
|
5
3
|
/**
|
|
6
4
|
* Et panel som henger under en knapp, og som lukker seg selv.
|
|
@@ -9,48 +7,43 @@ type Placement = "bottom-start" | "bottom-end" | "top-start" | "top-end";
|
|
|
9
7
|
* løser tre ting som ellers krever kode: panelet legger seg over alt annet
|
|
10
8
|
* uten `z-index`, Escape lukker det, og et klikk utenfor lukker det.
|
|
11
9
|
*
|
|
12
|
-
* Det topplaget gjør
|
|
13
|
-
* ennå ikke i alle nettlesere, så posisjonen regnes ut her
|
|
14
|
-
* plass på skjermen.
|
|
10
|
+
* Det topplaget ikke gjør er å plassere panelet. `position-anchor` finnes
|
|
11
|
+
* ennå ikke i alle nettlesere, så posisjonen regnes ut her.
|
|
15
12
|
*
|
|
16
|
-
*
|
|
13
|
+
* Serveren skriver koblingen med `fs.popover()`: `aria-controls` på knappen,
|
|
14
|
+
* klassen og `popover` på panelet. Komponenten setter bare `aria-expanded`,
|
|
15
|
+
* som endrer seg når brukeren klikker, og posisjonen. Begge står i
|
|
16
|
+
* `data-preserve-attr` fra byggeren, ellers river morfingen dem bort.
|
|
17
17
|
*
|
|
18
18
|
* ```html
|
|
19
19
|
* <fs-popover placement="bottom-end">
|
|
20
|
-
* <button slot="trigger" class="fs-button"
|
|
21
|
-
*
|
|
20
|
+
* <button slot="trigger" class="fs-button" aria-controls="meny" aria-expanded="false"
|
|
21
|
+
* data-preserve-attr="aria-expanded">Handlinger</button>
|
|
22
|
+
* <ul id="meny" class="fs-popover" popover="manual" data-preserve-attr="style">…</ul>
|
|
22
23
|
* </fs-popover>
|
|
23
24
|
* ```
|
|
24
25
|
*/
|
|
25
|
-
export declare class FsPopover extends
|
|
26
|
-
static
|
|
27
|
-
open: {
|
|
28
|
-
type: BooleanConstructor;
|
|
29
|
-
reflect: boolean;
|
|
30
|
-
};
|
|
31
|
-
placement: {
|
|
32
|
-
type: StringConstructor;
|
|
33
|
-
};
|
|
34
|
-
};
|
|
35
|
-
/** Om panelet er åpent. Speiles, så CSS kan treffe tilstanden. */
|
|
36
|
-
open: boolean;
|
|
37
|
-
/** Hvilken kant panelet henger fra. Standard: `bottom-start`. */
|
|
38
|
-
placement: Placement;
|
|
26
|
+
export declare class FsPopover extends HTMLElement {
|
|
27
|
+
static observedAttributes: string[];
|
|
39
28
|
private panel?;
|
|
40
29
|
private triggerElement?;
|
|
41
|
-
|
|
42
|
-
|
|
30
|
+
private observer?;
|
|
31
|
+
/** Om panelet er åpent. Speiles, så CSS kan treffe tilstanden. */
|
|
32
|
+
get open(): boolean;
|
|
33
|
+
set open(value: boolean);
|
|
34
|
+
/** Hvilken kant panelet henger fra. Standard: `bottom-start`. */
|
|
35
|
+
get placement(): Placement;
|
|
36
|
+
set placement(value: Placement);
|
|
43
37
|
connectedCallback(): void;
|
|
44
38
|
disconnectedCallback(): void;
|
|
45
|
-
|
|
46
|
-
updated(): void;
|
|
47
|
-
private handleSlotChange;
|
|
39
|
+
attributeChangedCallback(): void;
|
|
48
40
|
private sync;
|
|
49
41
|
private handleTriggerClick;
|
|
50
42
|
private handleOutsideClick;
|
|
51
43
|
private handleKeydown;
|
|
52
44
|
/** Regner ut hvor panelet skal stå, mot knappens plass på skjermen. */
|
|
53
45
|
private reposition;
|
|
46
|
+
private emit;
|
|
54
47
|
/** Åpner panelet. */
|
|
55
48
|
show(): void;
|
|
56
49
|
/** Lukker panelet. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fs-popover.d.ts","sourceRoot":"","sources":["../../../../src/components/ramme/popover/fs-popover.ts"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"file":"fs-popover.d.ts","sourceRoot":"","sources":["../../../../src/components/ramme/popover/fs-popover.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,cAAc,EAAG,YAAqB,CAAA;AAEnD,KAAK,SAAS,GAAG,cAAc,GAAG,YAAY,GAAG,WAAW,GAAG,SAAS,CAAA;AASxE;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBAAa,SAAU,SAAQ,WAAW;IACxC,MAAM,CAAC,kBAAkB,WAAwB;IAEjD,OAAO,CAAC,KAAK,CAAC,CAAa;IAC3B,OAAO,CAAC,cAAc,CAAC,CAAa;IACpC,OAAO,CAAC,QAAQ,CAAC,CAAkB;IAEnC,kEAAkE;IAClE,IAAI,IAAI,IAAI,OAAO,CAElB;IAED,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,EAGtB;IAED,iEAAiE;IACjE,IAAI,SAAS,IAAI,SAAS,CAGzB;IAED,IAAI,SAAS,CAAC,KAAK,EAAE,SAAS,EAE7B;IAED,iBAAiB,IAAI,IAAI;IAQzB,oBAAoB,IAAI,IAAI;IAe5B,wBAAwB,IAAI,IAAI;IAIhC,OAAO,CAAC,IAAI;IAmCZ,OAAO,CAAC,kBAAkB,CAEzB;IAED,OAAO,CAAC,kBAAkB,CAIzB;IAED,OAAO,CAAC,aAAa,CAMpB;IAED,uEAAuE;IACvE,OAAO,CAAC,UAAU,CAyBjB;IAED,OAAO,CAAC,IAAI;IAUZ,qBAAqB;IACrB,IAAI,IAAI,IAAI;IAMZ,sBAAsB;IACtB,IAAI,IAAI,IAAI;IAMZ,0BAA0B;IAC1B,MAAM,IAAI,IAAI;CAIf;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAA;KACxB;CACF;AAED,wBAAgB,eAAe,CAAC,OAAO,eAAiB,GAAG,IAAI,CAI9D"}
|
|
@@ -1,6 +1,10 @@
|
|
|
1
|
-
import { html, LitElement } from "lit";
|
|
2
1
|
export const FS_POPOVER_TAG = "fs-popover";
|
|
3
|
-
|
|
2
|
+
const PLACEMENTS = [
|
|
3
|
+
"bottom-start",
|
|
4
|
+
"bottom-end",
|
|
5
|
+
"top-start",
|
|
6
|
+
"top-end",
|
|
7
|
+
];
|
|
4
8
|
/**
|
|
5
9
|
* Et panel som henger under en knapp, og som lukker seg selv.
|
|
6
10
|
*
|
|
@@ -8,29 +12,25 @@ export const POPOVER_CLASS = "fs-popover";
|
|
|
8
12
|
* løser tre ting som ellers krever kode: panelet legger seg over alt annet
|
|
9
13
|
* uten `z-index`, Escape lukker det, og et klikk utenfor lukker det.
|
|
10
14
|
*
|
|
11
|
-
* Det topplaget gjør
|
|
12
|
-
* ennå ikke i alle nettlesere, så posisjonen regnes ut her
|
|
13
|
-
* plass på skjermen.
|
|
15
|
+
* Det topplaget ikke gjør er å plassere panelet. `position-anchor` finnes
|
|
16
|
+
* ennå ikke i alle nettlesere, så posisjonen regnes ut her.
|
|
14
17
|
*
|
|
15
|
-
*
|
|
18
|
+
* Serveren skriver koblingen med `fs.popover()`: `aria-controls` på knappen,
|
|
19
|
+
* klassen og `popover` på panelet. Komponenten setter bare `aria-expanded`,
|
|
20
|
+
* som endrer seg når brukeren klikker, og posisjonen. Begge står i
|
|
21
|
+
* `data-preserve-attr` fra byggeren, ellers river morfingen dem bort.
|
|
16
22
|
*
|
|
17
23
|
* ```html
|
|
18
24
|
* <fs-popover placement="bottom-end">
|
|
19
|
-
* <button slot="trigger" class="fs-button"
|
|
20
|
-
*
|
|
25
|
+
* <button slot="trigger" class="fs-button" aria-controls="meny" aria-expanded="false"
|
|
26
|
+
* data-preserve-attr="aria-expanded">Handlinger</button>
|
|
27
|
+
* <ul id="meny" class="fs-popover" popover="manual" data-preserve-attr="style">…</ul>
|
|
21
28
|
* </fs-popover>
|
|
22
29
|
* ```
|
|
23
30
|
*/
|
|
24
|
-
export class FsPopover extends
|
|
31
|
+
export class FsPopover extends HTMLElement {
|
|
25
32
|
constructor() {
|
|
26
33
|
super(...arguments);
|
|
27
|
-
/** Om panelet er åpent. Speiles, så CSS kan treffe tilstanden. */
|
|
28
|
-
this.open = false;
|
|
29
|
-
/** Hvilken kant panelet henger fra. Standard: `bottom-start`. */
|
|
30
|
-
this.placement = "bottom-start";
|
|
31
|
-
this.handleSlotChange = () => {
|
|
32
|
-
this.sync();
|
|
33
|
-
};
|
|
34
34
|
this.handleTriggerClick = () => {
|
|
35
35
|
this.toggle();
|
|
36
36
|
};
|
|
@@ -69,48 +69,66 @@ export class FsPopover extends LitElement {
|
|
|
69
69
|
this.panel.style.setProperty("--fs-popover-left", `${Math.round(left)}px`);
|
|
70
70
|
};
|
|
71
71
|
}
|
|
72
|
-
|
|
73
|
-
|
|
72
|
+
/** Om panelet er åpent. Speiles, så CSS kan treffe tilstanden. */
|
|
73
|
+
get open() {
|
|
74
|
+
return this.hasAttribute("open");
|
|
74
75
|
}
|
|
75
|
-
|
|
76
|
-
|
|
76
|
+
set open(value) {
|
|
77
|
+
if (value)
|
|
78
|
+
this.setAttribute("open", "");
|
|
79
|
+
else
|
|
80
|
+
this.removeAttribute("open");
|
|
81
|
+
}
|
|
82
|
+
/** Hvilken kant panelet henger fra. Standard: `bottom-start`. */
|
|
83
|
+
get placement() {
|
|
84
|
+
const value = this.getAttribute("placement");
|
|
85
|
+
return value && PLACEMENTS.includes(value) ? value : "bottom-start";
|
|
86
|
+
}
|
|
87
|
+
set placement(value) {
|
|
88
|
+
this.setAttribute("placement", value);
|
|
77
89
|
}
|
|
78
90
|
connectedCallback() {
|
|
79
|
-
super.connectedCallback();
|
|
80
91
|
window.addEventListener("resize", this.reposition);
|
|
81
92
|
window.addEventListener("scroll", this.reposition, true);
|
|
93
|
+
this.observer = new MutationObserver(() => this.sync());
|
|
94
|
+
this.observer.observe(this, { childList: true });
|
|
95
|
+
this.sync();
|
|
82
96
|
}
|
|
83
97
|
disconnectedCallback() {
|
|
84
98
|
window.removeEventListener("resize", this.reposition);
|
|
85
99
|
window.removeEventListener("scroll", this.reposition, true);
|
|
86
|
-
|
|
100
|
+
document.removeEventListener("click", this.handleOutsideClick, true);
|
|
101
|
+
document.removeEventListener("keydown", this.handleKeydown);
|
|
102
|
+
this.observer?.disconnect();
|
|
103
|
+
this.observer = undefined;
|
|
104
|
+
this.triggerElement?.removeEventListener("click", this.handleTriggerClick);
|
|
105
|
+
// Referansen må nullstilles, ellers ser `sync()` at knappen er den samme
|
|
106
|
+
// når elementet settes inn igjen, og hopper over å feste lytteren på
|
|
107
|
+
// nytt. Da lar panelet seg ikke åpne lenger.
|
|
108
|
+
this.triggerElement = undefined;
|
|
109
|
+
this.panel = undefined;
|
|
87
110
|
}
|
|
88
|
-
|
|
89
|
-
this.
|
|
90
|
-
|
|
91
|
-
updated() {
|
|
92
|
-
this.sync();
|
|
111
|
+
attributeChangedCallback() {
|
|
112
|
+
if (this.isConnected)
|
|
113
|
+
this.sync();
|
|
93
114
|
}
|
|
94
115
|
sync() {
|
|
95
116
|
const trigger = this.querySelector("[slot='trigger']");
|
|
96
117
|
const panel = [...this.children].find((child) => child instanceof HTMLElement &&
|
|
97
|
-
child.getAttribute("slot") !== "trigger"
|
|
98
|
-
child.tagName !== "SLOT");
|
|
118
|
+
child.getAttribute("slot") !== "trigger");
|
|
99
119
|
if (!trigger || !panel)
|
|
100
120
|
return;
|
|
101
|
-
this.triggerElement
|
|
121
|
+
if (this.triggerElement !== trigger) {
|
|
122
|
+
this.triggerElement?.removeEventListener("click", this.handleTriggerClick);
|
|
123
|
+
trigger.addEventListener("click", this.handleTriggerClick);
|
|
124
|
+
this.triggerElement = trigger;
|
|
125
|
+
}
|
|
102
126
|
this.panel = panel;
|
|
103
|
-
|
|
104
|
-
|
|
127
|
+
// Eneste attributtet komponenten eier. Resten skrev serveren.
|
|
128
|
+
const expanded = String(this.open);
|
|
129
|
+
if (trigger.getAttribute("aria-expanded") !== expanded) {
|
|
130
|
+
trigger.setAttribute("aria-expanded", expanded);
|
|
105
131
|
}
|
|
106
|
-
panel.classList.add(POPOVER_CLASS);
|
|
107
|
-
// `manual` og ikke `auto`: vi lukker selv, slik at knappen kan brukes til
|
|
108
|
-
// å lukke igjen uten at nettleseren rekker å lukke først.
|
|
109
|
-
panel.setAttribute("popover", "manual");
|
|
110
|
-
trigger.setAttribute("aria-expanded", String(this.open));
|
|
111
|
-
trigger.setAttribute("aria-controls", panel.id);
|
|
112
|
-
trigger.removeEventListener("click", this.handleTriggerClick);
|
|
113
|
-
trigger.addEventListener("click", this.handleTriggerClick);
|
|
114
132
|
if (this.open) {
|
|
115
133
|
if (!panel.matches(":popover-open"))
|
|
116
134
|
panel.showPopover();
|
|
@@ -125,27 +143,26 @@ export class FsPopover extends LitElement {
|
|
|
125
143
|
document.removeEventListener("keydown", this.handleKeydown);
|
|
126
144
|
}
|
|
127
145
|
}
|
|
146
|
+
emit(open) {
|
|
147
|
+
this.dispatchEvent(new CustomEvent("popover-toggle", {
|
|
148
|
+
detail: { open },
|
|
149
|
+
bubbles: true,
|
|
150
|
+
composed: true,
|
|
151
|
+
}));
|
|
152
|
+
}
|
|
128
153
|
/** Åpner panelet. */
|
|
129
154
|
show() {
|
|
130
155
|
if (this.open)
|
|
131
156
|
return;
|
|
132
157
|
this.open = true;
|
|
133
|
-
this.
|
|
134
|
-
detail: { open: true },
|
|
135
|
-
bubbles: true,
|
|
136
|
-
composed: true,
|
|
137
|
-
}));
|
|
158
|
+
this.emit(true);
|
|
138
159
|
}
|
|
139
160
|
/** Lukker panelet. */
|
|
140
161
|
hide() {
|
|
141
162
|
if (!this.open)
|
|
142
163
|
return;
|
|
143
164
|
this.open = false;
|
|
144
|
-
this.
|
|
145
|
-
detail: { open: false },
|
|
146
|
-
bubbles: true,
|
|
147
|
-
composed: true,
|
|
148
|
-
}));
|
|
165
|
+
this.emit(false);
|
|
149
166
|
}
|
|
150
167
|
/** Åpner eller lukker. */
|
|
151
168
|
toggle() {
|
|
@@ -155,10 +172,7 @@ export class FsPopover extends LitElement {
|
|
|
155
172
|
this.show();
|
|
156
173
|
}
|
|
157
174
|
}
|
|
158
|
-
FsPopover.
|
|
159
|
-
open: { type: Boolean, reflect: true },
|
|
160
|
-
placement: { type: String },
|
|
161
|
-
};
|
|
175
|
+
FsPopover.observedAttributes = ["open", "placement"];
|
|
162
176
|
export function defineFsPopover(tagName = FS_POPOVER_TAG) {
|
|
163
177
|
if (!customElements.get(tagName)) {
|
|
164
178
|
customElements.define(tagName, FsPopover);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fs-popover.js","sourceRoot":"","sources":["../../../../src/components/ramme/popover/fs-popover.ts"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"file":"fs-popover.js","sourceRoot":"","sources":["../../../../src/components/ramme/popover/fs-popover.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
export declare const POPOVER_CLASS: "fs-popover";
|
|
2
|
+
export type PopoverOptions = {
|
|
3
|
+
/** Id på panelet. Kobler knappen til panelet med `aria-controls`. */
|
|
4
|
+
id: string;
|
|
5
|
+
/** Panelet er åpent. Standard: lukket. */
|
|
6
|
+
open?: boolean;
|
|
7
|
+
};
|
|
8
|
+
export type PopoverAttributes = {
|
|
9
|
+
host: {
|
|
10
|
+
open?: "";
|
|
11
|
+
"data-preserve-attr": "open";
|
|
12
|
+
};
|
|
13
|
+
trigger: {
|
|
14
|
+
slot: "trigger";
|
|
15
|
+
"aria-expanded": "true" | "false";
|
|
16
|
+
"aria-controls": string;
|
|
17
|
+
"data-preserve-attr": "aria-expanded";
|
|
18
|
+
};
|
|
19
|
+
panel: {
|
|
20
|
+
class: typeof POPOVER_CLASS;
|
|
21
|
+
id: string;
|
|
22
|
+
popover: "manual";
|
|
23
|
+
"data-preserve-attr": "style";
|
|
24
|
+
};
|
|
25
|
+
};
|
|
26
|
+
/**
|
|
27
|
+
* Attributtene for et sprettoppvindu.
|
|
28
|
+
*
|
|
29
|
+
* Serveren skriver både knappen og panelet med koblingen mellom dem.
|
|
30
|
+
* `<fs-popover>` regner ut posisjonen og lukker ved klikk utenfor.
|
|
31
|
+
*
|
|
32
|
+
* ```ts
|
|
33
|
+
* const boks = fs.popover({ id: "hjelp" })
|
|
34
|
+
* ```
|
|
35
|
+
* ```html
|
|
36
|
+
* <fs-popover>
|
|
37
|
+
* <button {...boks.trigger}>Hva betyr dette?</button>
|
|
38
|
+
* <div {...boks.panel}>Vi bruker fødselsdatoen til å finne riktig sats.</div>
|
|
39
|
+
* </fs-popover>
|
|
40
|
+
* ```
|
|
41
|
+
*/
|
|
42
|
+
export declare const popover: ({ id, open, }: PopoverOptions) => PopoverAttributes;
|
|
43
|
+
//# sourceMappingURL=popover.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../../src/components/ramme/popover/popover.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa,EAAG,YAAqB,CAAA;AAElD,MAAM,MAAM,cAAc,GAAG;IAC3B,qEAAqE;IACrE,EAAE,EAAE,MAAM,CAAA;IACV,0CAA0C;IAC1C,IAAI,CAAC,EAAE,OAAO,CAAA;CACf,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,EAAE;QACJ,IAAI,CAAC,EAAE,EAAE,CAAA;QACT,oBAAoB,EAAE,MAAM,CAAA;KAC7B,CAAA;IACD,OAAO,EAAE;QACP,IAAI,EAAE,SAAS,CAAA;QACf,eAAe,EAAE,MAAM,GAAG,OAAO,CAAA;QACjC,eAAe,EAAE,MAAM,CAAA;QACvB,oBAAoB,EAAE,eAAe,CAAA;KACtC,CAAA;IACD,KAAK,EAAE;QACL,KAAK,EAAE,OAAO,aAAa,CAAA;QAC3B,EAAE,EAAE,MAAM,CAAA;QACV,OAAO,EAAE,QAAQ,CAAA;QACjB,oBAAoB,EAAE,OAAO,CAAA;KAC9B,CAAA;CACF,CAAA;AAED;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,OAAO,GAAI,eAGrB,cAAc,KAAG,iBA6BlB,CAAA"}
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import { attributes } from "../../css/shared.js";
|
|
2
|
+
export const POPOVER_CLASS = "fs-popover";
|
|
3
|
+
/**
|
|
4
|
+
* Attributtene for et sprettoppvindu.
|
|
5
|
+
*
|
|
6
|
+
* Serveren skriver både knappen og panelet med koblingen mellom dem.
|
|
7
|
+
* `<fs-popover>` regner ut posisjonen og lukker ved klikk utenfor.
|
|
8
|
+
*
|
|
9
|
+
* ```ts
|
|
10
|
+
* const boks = fs.popover({ id: "hjelp" })
|
|
11
|
+
* ```
|
|
12
|
+
* ```html
|
|
13
|
+
* <fs-popover>
|
|
14
|
+
* <button {...boks.trigger}>Hva betyr dette?</button>
|
|
15
|
+
* <div {...boks.panel}>Vi bruker fødselsdatoen til å finne riktig sats.</div>
|
|
16
|
+
* </fs-popover>
|
|
17
|
+
* ```
|
|
18
|
+
*/
|
|
19
|
+
export const popover = ({ id, open = false, }) => ({
|
|
20
|
+
// Om panelet er åpent står som `open` på verten, og det er brukerens
|
|
21
|
+
// tilstand, ikke serverens. Uten dette lukker morfingen panelet i det
|
|
22
|
+
// serveren patcher området rundt.
|
|
23
|
+
host: attributes({
|
|
24
|
+
// `open` må stå på verten, ikke bare i knappens aria-expanded. Uten det
|
|
25
|
+
// sa markupen at panelet var åpent mens komponenten mente det var lukket.
|
|
26
|
+
open: open ? "" : undefined,
|
|
27
|
+
"data-preserve-attr": "open",
|
|
28
|
+
}),
|
|
29
|
+
trigger: attributes({
|
|
30
|
+
slot: "trigger",
|
|
31
|
+
"aria-expanded": (open ? "true" : "false"),
|
|
32
|
+
"aria-controls": id,
|
|
33
|
+
// Komponenten endrer aria-expanded når panelet åpnes. Uten dette fjerner
|
|
34
|
+
// Datastars morfing det igjen, siden serverens utgave sier noe annet.
|
|
35
|
+
"data-preserve-attr": "aria-expanded",
|
|
36
|
+
}),
|
|
37
|
+
panel: attributes({
|
|
38
|
+
class: POPOVER_CLASS,
|
|
39
|
+
id,
|
|
40
|
+
// `manual` og ikke `auto`: komponenten lukker selv, slik at knappen kan
|
|
41
|
+
// brukes til å lukke igjen uten at nettleseren rekker å lukke først.
|
|
42
|
+
popover: "manual",
|
|
43
|
+
// Posisjonen regnes ut mot knappens plass på skjermen og settes som
|
|
44
|
+
// `--fs-popover-top` og `--fs-popover-left` i style-attributtet. Uten
|
|
45
|
+
// dette river morfingen posisjonen bort, og panelet hopper til hjørnet.
|
|
46
|
+
"data-preserve-attr": "style",
|
|
47
|
+
}),
|
|
48
|
+
});
|
|
49
|
+
//# sourceMappingURL=popover.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"popover.js","sourceRoot":"","sources":["../../../../src/components/ramme/popover/popover.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AAEhD,MAAM,CAAC,MAAM,aAAa,GAAG,YAAqB,CAAA;AA4BlD;;;;;;;;;;;;;;;GAeG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EACtB,EAAE,EACF,IAAI,GAAG,KAAK,GACG,EAAqB,EAAE,CAAC,CAAC;IACxC,qEAAqE;IACrE,sEAAsE;IACtE,kCAAkC;IAClC,IAAI,EAAE,UAAU,CAAC;QACf,wEAAwE;QACxE,0EAA0E;QAC1E,IAAI,EAAE,IAAI,CAAC,CAAC,CAAE,EAAY,CAAC,CAAC,CAAC,SAAS;QACtC,oBAAoB,EAAE,MAAe;KACtC,CAAC;IACF,OAAO,EAAE,UAAU,CAAC;QAClB,IAAI,EAAE,SAAkB;QACxB,eAAe,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAqB;QAC9D,eAAe,EAAE,EAAE;QACnB,yEAAyE;QACzE,sEAAsE;QACtE,oBAAoB,EAAE,eAAwB;KAC/C,CAAC;IACF,KAAK,EAAE,UAAU,CAAC;QAChB,KAAK,EAAE,aAAa;QACpB,EAAE;QACF,wEAAwE;QACxE,qEAAqE;QACrE,OAAO,EAAE,QAAiB;QAC1B,oEAAoE;QACpE,sEAAsE;QACtE,wEAAwE;QACxE,oBAAoB,EAAE,OAAgB;KACvC,CAAC;CACH,CAAC,CAAA"}
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
export declare const FS_SUGGESTION_TAG: "fs-suggestion";
|
|
2
|
+
/**
|
|
3
|
+
* Tastaturet og filtreringen i et felt med forslagsliste.
|
|
4
|
+
*
|
|
5
|
+
* Serveren skriver feltet og lista med `fs.suggestion()`. Komponenten rendrer
|
|
6
|
+
* ingenting. Den lagde tidligere hele feltet selv, og da fantes det verken
|
|
7
|
+
* ledetekst eller inndatafelt før skriptet hadde kjørt, og ingenting ble med
|
|
8
|
+
* i innsendingen.
|
|
9
|
+
*
|
|
10
|
+
* Det komponenten gjør er det nettleseren ikke gjør: filtrerer alternativene
|
|
11
|
+
* mens brukeren skriver, flytter markeringen med piltastene, og holder
|
|
12
|
+
* `aria-activedescendant` i synk slik at skjermleseren leser opp alternativet
|
|
13
|
+
* uten at fokus forlater feltet.
|
|
14
|
+
*
|
|
15
|
+
* Patcher serveren lista selv, som i en Datastar-app, slår filtreringen seg
|
|
16
|
+
* av: da er det serveren som bestemmer hva som vises.
|
|
17
|
+
*
|
|
18
|
+
* ```html
|
|
19
|
+
* <fs-suggestion>
|
|
20
|
+
* <label class="fs-label" for="kommune">Kommune</label>
|
|
21
|
+
* <div class="fs-suggestion__field">
|
|
22
|
+
* <input class="fs-input" id="kommune" role="combobox" aria-controls="kommune-list"
|
|
23
|
+
* aria-expanded="false" data-preserve-attr="aria-expanded aria-activedescendant">
|
|
24
|
+
* <ul class="fs-suggestion__list" id="kommune-list" role="listbox" hidden
|
|
25
|
+
* data-preserve-attr="hidden">
|
|
26
|
+
* <li class="fs-suggestion__option" id="kommune-option-0" role="option">Bergen</li>
|
|
27
|
+
* </ul>
|
|
28
|
+
* </div>
|
|
29
|
+
* </fs-suggestion>
|
|
30
|
+
* ```
|
|
31
|
+
*/
|
|
32
|
+
export declare class FsSuggestion extends HTMLElement {
|
|
33
|
+
static observedAttributes: string[];
|
|
34
|
+
private activeIndex;
|
|
35
|
+
private observer?;
|
|
36
|
+
private control?;
|
|
37
|
+
/** Alternativene som alt har fått lytteren sin. */
|
|
38
|
+
private readonly bundne;
|
|
39
|
+
/** Sant mens komponenten selv sender hendelser, så den ikke svarer seg selv. */
|
|
40
|
+
private choosing;
|
|
41
|
+
connectedCallback(): void;
|
|
42
|
+
disconnectedCallback(): void;
|
|
43
|
+
/** Slår av filtreringen på klienten. Da er det serveren som bestemmer. */
|
|
44
|
+
get serverFiltered(): boolean;
|
|
45
|
+
private get listElement();
|
|
46
|
+
private get options();
|
|
47
|
+
/** Alternativene som er synlige nå. */
|
|
48
|
+
private get visible();
|
|
49
|
+
private unbind;
|
|
50
|
+
private bind;
|
|
51
|
+
private setOpen;
|
|
52
|
+
private filter;
|
|
53
|
+
/**
|
|
54
|
+
* Melder antall treff.
|
|
55
|
+
*
|
|
56
|
+
* Uten dette får den som ikke ser skjermen ingen beskjed om at lista
|
|
57
|
+
* snevret seg inn mens hun skrev. Teksten er klientgenerert, så elementet
|
|
58
|
+
* har `data-ignore-morph` fra byggeren.
|
|
59
|
+
*/
|
|
60
|
+
private announce;
|
|
61
|
+
private markActive;
|
|
62
|
+
private choose;
|
|
63
|
+
private handleInput;
|
|
64
|
+
private handleFocus;
|
|
65
|
+
private handleKeydown;
|
|
66
|
+
private handleOptionMouseDown;
|
|
67
|
+
private handleOutsideClick;
|
|
68
|
+
}
|
|
69
|
+
declare global {
|
|
70
|
+
interface HTMLElementTagNameMap {
|
|
71
|
+
"fs-suggestion": FsSuggestion;
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
export declare function defineFsSuggestion(tagName?: "fs-suggestion"): void;
|
|
75
|
+
//# sourceMappingURL=fs-suggestion.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"fs-suggestion.d.ts","sourceRoot":"","sources":["../../../../src/components/ramme/suggestion/fs-suggestion.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,iBAAiB,EAAG,eAAwB,CAAA;AAEzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,qBAAa,YAAa,SAAQ,WAAW;IAC3C,MAAM,CAAC,kBAAkB,WAAsB;IAE/C,OAAO,CAAC,WAAW,CAAK;IACxB,OAAO,CAAC,QAAQ,CAAC,CAAkB;IACnC,OAAO,CAAC,OAAO,CAAC,CAAkB;IAClC,mDAAmD;IACnD,OAAO,CAAC,QAAQ,CAAC,MAAM,CAA6B;IACpD,gFAAgF;IAChF,OAAO,CAAC,QAAQ,CAAQ;IAExB,iBAAiB,IAAI,IAAI;IAOzB,oBAAoB,IAAI,IAAI;IAO5B,0EAA0E;IAC1E,IAAI,cAAc,IAAI,OAAO,CAE5B;IAED,OAAO,KAAK,WAAW,GAEtB;IAED,OAAO,KAAK,OAAO,GAIlB;IAED,uCAAuC;IACvC,OAAO,KAAK,OAAO,GAElB;IAED,OAAO,CAAC,MAAM;IASd,OAAO,CAAC,IAAI;IAuBZ,OAAO,CAAC,OAAO;IAgBf,OAAO,CAAC,MAAM;IAgBd;;;;;;OAMG;IACH,OAAO,CAAC,QAAQ;IAUhB,OAAO,CAAC,UAAU;IAmBlB,OAAO,CAAC,MAAM;IAyBd,OAAO,CAAC,WAAW,CAIlB;IAED,OAAO,CAAC,WAAW,CAGlB;IAED,OAAO,CAAC,aAAa,CAqBpB;IAED,OAAO,CAAC,qBAAqB,CAK5B;IAED,OAAO,CAAC,kBAAkB,CAGzB;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAA;KAC9B;CACF;AAED,wBAAgB,kBAAkB,CAAC,OAAO,kBAAoB,GAAG,IAAI,CAIpE"}
|