@pod-os/elements 0.26.1-rc.6fb2bdc.0 → 0.26.1-rc.7957889.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/cjs/ion-icon_31.cjs.entry.js +12 -9
- package/dist/cjs/ion-icon_31.cjs.entry.js.map +1 -1
- package/dist/collection/components/pos-navigation/bar/pos-navigation-bar.css +10 -0
- package/dist/collection/components/pos-navigation/bar/pos-navigation-bar.js +4 -1
- package/dist/collection/components/pos-navigation/bar/pos-navigation-bar.js.map +1 -1
- package/dist/collection/components/pos-navigation/pos-navigation.css +1 -1
- package/dist/collection/components/pos-navigation/pos-navigation.js +1 -1
- package/dist/collection/components/pos-navigation/pos-navigation.js.map +1 -1
- package/dist/collection/components/pos-new-thing-form/pos-new-thing-form.js +1 -1
- package/dist/collection/components/pos-rich-link/pos-rich-link.js +2 -2
- package/dist/collection/components/pos-router/pos-router.js +1 -1
- package/dist/collection/components/pos-select-term/pos-select-term.js +1 -1
- package/dist/components/pos-navigation-bar2.js +5 -2
- package/dist/components/pos-navigation-bar2.js.map +1 -1
- package/dist/components/pos-navigation2.js +2 -2
- package/dist/components/pos-navigation2.js.map +1 -1
- package/dist/components/pos-new-thing-form2.js +1 -1
- package/dist/components/pos-rich-link2.js +2 -2
- package/dist/components/pos-router2.js +1 -1
- package/dist/components/pos-select-term2.js +1 -1
- package/dist/elements/elements.esm.js +1 -1
- package/dist/elements/{p-7c14c1f9.entry.js → p-35c98859.entry.js} +3 -3
- package/dist/elements/{p-7c14c1f9.entry.js.map → p-35c98859.entry.js.map} +1 -1
- package/dist/esm/ion-icon_31.entry.js +12 -9
- package/dist/esm/ion-icon_31.entry.js.map +1 -1
- package/dist/types/components/pos-navigation/bar/pos-navigation-bar.d.ts +1 -0
- package/package.json +1 -1
|
@@ -3349,7 +3349,7 @@ const IconMakeFindable = () => (h("svg", { role: "presentation", xmlns: "http://
|
|
|
3349
3349
|
const IconSuccess = () => (h("svg", { role: "presentation", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M10.125 2.25h-4.5c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125v-9M10.125 2.25h.375a9 9 0 0 1 9 9v.375M10.125 2.25A3.375 3.375 0 0 1 13.5 5.625v1.5c0 .621.504 1.125 1.125 1.125h1.5a3.375 3.375 0 0 1 3.375 3.375M9 15l2.25 2.25L15 12" })));
|
|
3350
3350
|
PosMakeFindable.style = PosMakeFindableStyle0;
|
|
3351
3351
|
|
|
3352
|
-
const posNavigationCss = ":host {\n --pos-navigation-bar-height: var(--size-10);\n}\n\nsearch {\n position: relative;\n}\n\n.suggestions ol {\n border: 1px solid var(--pos-border-color);\n display: flex;\n flex-direction: column;\n margin: 0;\n padding: 0;\n list-style-type: none;\n}\n\n.suggestions {\n width: 100%;\n overflow-y: auto;\n max-height: 90dvh;\n li {\n padding: 1rem;\n background-color: var(--pos-background-color);\n pos-rich-link {\n --background-color: inherit;\n }\n
|
|
3352
|
+
const posNavigationCss = ":host {\n --pos-navigation-bar-height: var(--size-10);\n}\n\nsearch {\n position: relative;\n}\n\n.suggestions ol {\n border: 1px solid var(--pos-border-color);\n display: flex;\n flex-direction: column;\n margin: 0;\n padding: 0;\n list-style-type: none;\n}\n\n.suggestions {\n width: 100%;\n overflow-y: auto;\n max-height: 90dvh;\n li {\n padding: 1rem;\n background-color: var(--pos-background-color);\n pos-rich-link {\n --background-color: inherit;\n }\n &[aria-selected='true'] {\n background-color: var(--pos-primary-color);\n &:hover {\n background-color: var(--pos-primary-color);\n }\n }\n &:hover {\n background-color: var(--pos-border-color);\n }\n }\n}\n\n.suggestions li.selected pos-rich-link {\n --label-color: white;\n --description-color: var(--pos-border-color);\n --uri-color: var(--pos-subtle-text-color);\n}\n\ndialog {\n position: absolute;\n margin-top: calc(-1 * var(--pos-navigation-bar-height));\n padding: 0;\n width: 100%;\n max-width: 100%;\n min-width: 100%;\n overflow: hidden;\n max-height: 100dvh;\n background-color: var(--pos-background-color);\n color: var(--pos-normal-text-color);\n border: var(--pos-border-color);\n border-radius: var(--radius-md);\n box-shadow: var(--shadow-md);\n form {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n align-items: center;\n input {\n display: flex;\n font-size: var(--scale-1);\n height: var(--pos-navigation-bar-height);\n border-top-left-radius: var(--radius-md);\n border-top-right-radius: var(--radius-md);\n padding-left: var(--size-2);\n width: 100%;\n border: none;\n outline: none;\n color: var(--pos-normal-text-color);\n background-color: var(--pos-input-background-color);\n box-sizing: border-box;\n }\n }\n}\n\ndialog[open] {\n display: flex;\n z-index: var(--layer-top);\n animation: slideIn 100ms ease-out;\n}\n\n@media (max-width: 640px) {\n search {\n position: unset;\n }\n dialog {\n margin-top: var(--size-1);\n top: 0;\n width: 95dvw;\n max-width: unset;\n min-width: unset;\n form {\n input {\n height: var(--size-12);\n font-size: var(--scale-fluid-3);\n }\n }\n }\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n";
|
|
3353
3353
|
const PosNavigationStyle0 = posNavigationCss;
|
|
3354
3354
|
|
|
3355
3355
|
const PosNavigation = class {
|
|
@@ -3466,7 +3466,7 @@ const PosNavigation = class {
|
|
|
3466
3466
|
}
|
|
3467
3467
|
}
|
|
3468
3468
|
render() {
|
|
3469
|
-
return (h("nav", { key: 'f09437fdd0bdfc5912af62658f1f32ab54c439c8' }, h("search", { key: 'fa09fec64bacfe1460a1fad256e509a480dd6a01' }, h("pos-navigation-bar", { key: '8dcd35cad5858da049ae942152f3cebe884aa761', searchIndexReady: this.searchIndex !== undefined, current: this.resource }), h("dialog", { key: '3ad61d48a6c5fcd0b010950c702e9488a9fd5160', ref: el => (this.dialogRef = el) }, h("form", { key: '1c23af28daf15f635d4c36002ca6fe153e33b48e', method: "dialog", onSubmit: () => this.onSubmit() }, h("input", { key: '
|
|
3469
|
+
return (h("nav", { key: 'f09437fdd0bdfc5912af62658f1f32ab54c439c8' }, h("search", { key: 'fa09fec64bacfe1460a1fad256e509a480dd6a01' }, h("pos-navigation-bar", { key: '8dcd35cad5858da049ae942152f3cebe884aa761', searchIndexReady: this.searchIndex !== undefined, current: this.resource }), h("dialog", { key: '3ad61d48a6c5fcd0b010950c702e9488a9fd5160', ref: el => (this.dialogRef = el) }, h("form", { key: '1c23af28daf15f635d4c36002ca6fe153e33b48e', method: "dialog", onSubmit: () => this.onSubmit() }, h("input", { key: 'b94910b19d32dbb091790f0ebbf59f5838e8d5ea', ref: el => (this.inputRef = el), enterkeyhint: "search", "aria-label": "Search or enter URI", placeholder: "Search or enter URI", value: this.uri, onChange: e => this.onChange(e), onInput: e => this.onChange(e), role: "combobox", "aria-autocomplete": "list", "aria-expanded": this.suggestions.length > 0, "aria-controls": "suggestions-list", "aria-activedescendant": this.selectedIndex >= 0 ? `option-${this.selectedIndex}` : null }), this.suggestions.length > 0 ? (h("div", { class: "suggestions" }, h("ol", { id: "suggestions-list", role: "listbox", "aria-label": "Search results" }, this.suggestions.map((it, index) => (h("li", { id: `option-${index}`, role: "option", "aria-selected": index === this.selectedIndex ? 'true' : 'false' }, h("pos-rich-link", { uri: it.ref }))))))) : null)))));
|
|
3470
3470
|
}
|
|
3471
3471
|
static get watchers() { return {
|
|
3472
3472
|
"uri": ["updateResource"],
|
|
@@ -3475,7 +3475,7 @@ const PosNavigation = class {
|
|
|
3475
3475
|
};
|
|
3476
3476
|
PosNavigation.style = PosNavigationStyle0;
|
|
3477
3477
|
|
|
3478
|
-
const posNavigationBarCss = "section.current {\n display: flex;\n height: var(--pos-navigation-bar-height);\n flex-grow: 1;\n gap: 0;\n background-color: var(--pos-input-background-color);\n border-radius: var(--radius-md);\n width: 100%;\n &:focus-within {\n outline: var(--pos-input-focus-outline);\n }\n}\n\nsection.current button {\n cursor: pointer;\n font-size: var(--scale-1);\n flex-grow: 1;\n background: none;\n color: var(--pos-normal-text-color);\n outline: none;\n border: none;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n &:focus {\n text-decoration: underline;\n }\n}\n";
|
|
3478
|
+
const posNavigationBarCss = "section.current {\n display: flex;\n height: var(--pos-navigation-bar-height);\n flex-grow: 1;\n gap: 0;\n background-color: var(--pos-input-background-color);\n border-radius: var(--radius-md);\n width: 100%;\n &:focus-within {\n outline: var(--pos-input-focus-outline);\n }\n}\n\nsection.current button {\n cursor: pointer;\n font-size: var(--scale-1);\n display: flex;\n align-items: center;\n justify-content: center;\n flex-grow: 1;\n background: none;\n color: var(--pos-normal-text-color);\n outline: none;\n border: none;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n &:focus {\n text-decoration: underline;\n }\n :first-child {\n flex-grow: 1;\n }\n svg {\n width: var(--size-6);\n color: var(--pos-subtle-text-color);\n }\n}\n";
|
|
3479
3479
|
const PosNavigationBarStyle0 = posNavigationBarCss;
|
|
3480
3480
|
|
|
3481
3481
|
const PosNavigationBar = class {
|
|
@@ -3494,7 +3494,10 @@ const PosNavigationBar = class {
|
|
|
3494
3494
|
}
|
|
3495
3495
|
render() {
|
|
3496
3496
|
const ariaLabel = this.current ? `${this.current.label()} (Click to search or enter URI)` : 'Search or enter URI';
|
|
3497
|
-
return (h("section", { key: '79ac5c5dc2d6c2d44e852f9671d0895a29fb62a6', class: "current" }, this.current && this.searchIndexReady && h("pos-make-findable", { key: 'be92d99ead125c1a29520639da6dfd6e28007d85', uri: this.current.uri }), h("button", { key: '4ecdd49e46614f604c36ef760422d54f99ab00f1', "aria-label": ariaLabel, onClick: () => this.onClick() }, this.current ? this.current.label() : 'Search or enter URI')));
|
|
3497
|
+
return (h("section", { key: '79ac5c5dc2d6c2d44e852f9671d0895a29fb62a6', class: "current" }, this.current && this.searchIndexReady && h("pos-make-findable", { key: 'be92d99ead125c1a29520639da6dfd6e28007d85', uri: this.current.uri }), h("button", { key: '4ecdd49e46614f604c36ef760422d54f99ab00f1', "aria-label": ariaLabel, onClick: () => this.onClick() }, h("div", { key: '002c4138be9b798cecec90de50f7500cffd89df7' }, this.current ? this.current.label() : 'Search or enter URI'), this.icon())));
|
|
3498
|
+
}
|
|
3499
|
+
icon() {
|
|
3500
|
+
return (h("svg", { "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" })));
|
|
3498
3501
|
}
|
|
3499
3502
|
};
|
|
3500
3503
|
PosNavigationBar.style = PosNavigationBarStyle0;
|
|
@@ -3520,7 +3523,7 @@ const PosNewThingForm = class {
|
|
|
3520
3523
|
subscribePodOs(this);
|
|
3521
3524
|
}
|
|
3522
3525
|
render() {
|
|
3523
|
-
return (h("form", { key: '
|
|
3526
|
+
return (h("form", { key: 'b1fb16121ecdbed1a3f19df9f9acd1cbc70f91f1', method: "dialog", onSubmit: e => this.handleSubmit(e) }, h("label", { key: '87397db04178def97089013afb85287bfc3fe679', htmlFor: "type" }, "Type"), h("pos-select-term", { key: 'dcc4829c2af46d899617f1ee1e8b3b3fd0a8ebf3', id: "type", placeholder: "", value: this.selectedTypeUri, "onPod-os:term-selected": e => this.onTermSelected(e) }), h("label", { key: 'a9ae3917bce29016bf2923b11a9c278a2e54afe4', htmlFor: "name" }, "Name"), h("input", { key: '3638043dac61fdda67a28f95c0ab9991a3a36979', id: "name", type: "text", value: this.name, onInput: e => this.handleChange(e) }), this.newUri ? (h("div", { id: "new-uri", title: "This will be the URI of the new thing" }, this.newUri)) : null, h("input", { key: '2bcec9f76f2b2f45abadf395b826938d6dcc67ab', id: "create", type: "submit", value: "Create", disabled: !this.canSubmit })));
|
|
3524
3527
|
}
|
|
3525
3528
|
handleChange(event) {
|
|
3526
3529
|
this.name = event.target.value;
|
|
@@ -3659,10 +3662,10 @@ const PosRichLink = class {
|
|
|
3659
3662
|
this.linkEmitter = createEvent(this, "pod-os:link", 7);
|
|
3660
3663
|
}
|
|
3661
3664
|
render() {
|
|
3662
|
-
return (h("pos-resource", { key: '
|
|
3665
|
+
return (h("pos-resource", { key: '73845f265bf6ce6b9245c3b1a98c169ee110b650', lazy: true, uri: this.uri }, h("p", { key: '5d2698dd9cf27cb8b81cd679196f1b65eb8b45f8', class: "content" }, h("a", { key: '26973e0fa9966c07b0568a1893aef2d35f51744a', href: this.uri, onClick: e => {
|
|
3663
3666
|
e.preventDefault();
|
|
3664
3667
|
this.linkEmitter.emit(this.uri);
|
|
3665
|
-
} }, h("pos-label", { key: '
|
|
3668
|
+
} }, h("pos-label", { key: 'f0cfb727e32f5e3c760bd06e8c3031639959ff2c' })), h("span", { key: '93bfbe0f64ceceac6f600a39827aa3387460de1f', class: "url" }, new URL(this.uri).host), h("pos-description", { key: '28a1a9afeb21720c3fe87ff5a4ad004173508a53' }))));
|
|
3666
3669
|
}
|
|
3667
3670
|
};
|
|
3668
3671
|
PosRichLink.style = PosRichLinkStyle0;
|
|
@@ -3993,7 +3996,7 @@ const PosRouter = class {
|
|
|
3993
3996
|
this.routeChanged.emit(this.uri);
|
|
3994
3997
|
}
|
|
3995
3998
|
render() {
|
|
3996
|
-
return h("slot", { key: '
|
|
3999
|
+
return h("slot", { key: '8b09de3dbbd253665cd541b9f264b0dcdc774354' });
|
|
3997
4000
|
}
|
|
3998
4001
|
};
|
|
3999
4002
|
PosRouter.style = PosRouterStyle0;
|
|
@@ -4023,7 +4026,7 @@ const PosSelectTerm = class {
|
|
|
4023
4026
|
this.termSelected.emit({ uri: event.target.value });
|
|
4024
4027
|
}
|
|
4025
4028
|
render() {
|
|
4026
|
-
return (h(Host, { key: '
|
|
4029
|
+
return (h(Host, { key: '88196bb6125fb061a14058eb4b8c5ece2a479316' }, h("input", { key: '839d513d12de456412da84c6de912ecb0df1d36f', part: "input", list: "terms", placeholder: this.placeholder, value: this.value, onChange: ev => this.handleChange(ev) }), h("datalist", { key: '3b62eb3eba017b4f092f20385c3cd79f7ab3c977', part: "terms", id: "terms" }, this.terms.map(term => (h("option", { value: term.uri }, term.shorthand))))));
|
|
4027
4030
|
}
|
|
4028
4031
|
static get delegatesFocus() { return true; }
|
|
4029
4032
|
static get watchers() { return {
|