@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
|
@@ -3353,7 +3353,7 @@ const IconMakeFindable = () => (index.h("svg", { role: "presentation", xmlns: "h
|
|
|
3353
3353
|
const IconSuccess = () => (index.h("svg", { role: "presentation", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor" }, index.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" })));
|
|
3354
3354
|
PosMakeFindable.style = PosMakeFindableStyle0;
|
|
3355
3355
|
|
|
3356
|
-
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
|
|
3356
|
+
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";
|
|
3357
3357
|
const PosNavigationStyle0 = posNavigationCss;
|
|
3358
3358
|
|
|
3359
3359
|
const PosNavigation = class {
|
|
@@ -3470,7 +3470,7 @@ const PosNavigation = class {
|
|
|
3470
3470
|
}
|
|
3471
3471
|
}
|
|
3472
3472
|
render() {
|
|
3473
|
-
return (index.h("nav", { key: 'f09437fdd0bdfc5912af62658f1f32ab54c439c8' }, index.h("search", { key: 'fa09fec64bacfe1460a1fad256e509a480dd6a01' }, index.h("pos-navigation-bar", { key: '8dcd35cad5858da049ae942152f3cebe884aa761', searchIndexReady: this.searchIndex !== undefined, current: this.resource }), index.h("dialog", { key: '3ad61d48a6c5fcd0b010950c702e9488a9fd5160', ref: el => (this.dialogRef = el) }, index.h("form", { key: '1c23af28daf15f635d4c36002ca6fe153e33b48e', method: "dialog", onSubmit: () => this.onSubmit() }, index.h("input", { key: '
|
|
3473
|
+
return (index.h("nav", { key: 'f09437fdd0bdfc5912af62658f1f32ab54c439c8' }, index.h("search", { key: 'fa09fec64bacfe1460a1fad256e509a480dd6a01' }, index.h("pos-navigation-bar", { key: '8dcd35cad5858da049ae942152f3cebe884aa761', searchIndexReady: this.searchIndex !== undefined, current: this.resource }), index.h("dialog", { key: '3ad61d48a6c5fcd0b010950c702e9488a9fd5160', ref: el => (this.dialogRef = el) }, index.h("form", { key: '1c23af28daf15f635d4c36002ca6fe153e33b48e', method: "dialog", onSubmit: () => this.onSubmit() }, index.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 ? (index.h("div", { class: "suggestions" }, index.h("ol", { id: "suggestions-list", role: "listbox", "aria-label": "Search results" }, this.suggestions.map((it, index$1) => (index.h("li", { id: `option-${index$1}`, role: "option", "aria-selected": index$1 === this.selectedIndex ? 'true' : 'false' }, index.h("pos-rich-link", { uri: it.ref }))))))) : null)))));
|
|
3474
3474
|
}
|
|
3475
3475
|
static get watchers() { return {
|
|
3476
3476
|
"uri": ["updateResource"],
|
|
@@ -3479,7 +3479,7 @@ const PosNavigation = class {
|
|
|
3479
3479
|
};
|
|
3480
3480
|
PosNavigation.style = PosNavigationStyle0;
|
|
3481
3481
|
|
|
3482
|
-
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";
|
|
3482
|
+
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";
|
|
3483
3483
|
const PosNavigationBarStyle0 = posNavigationBarCss;
|
|
3484
3484
|
|
|
3485
3485
|
const PosNavigationBar = class {
|
|
@@ -3498,7 +3498,10 @@ const PosNavigationBar = class {
|
|
|
3498
3498
|
}
|
|
3499
3499
|
render() {
|
|
3500
3500
|
const ariaLabel = this.current ? `${this.current.label()} (Click to search or enter URI)` : 'Search or enter URI';
|
|
3501
|
-
return (index.h("section", { key: '79ac5c5dc2d6c2d44e852f9671d0895a29fb62a6', class: "current" }, this.current && this.searchIndexReady && index.h("pos-make-findable", { key: 'be92d99ead125c1a29520639da6dfd6e28007d85', uri: this.current.uri }), index.h("button", { key: '4ecdd49e46614f604c36ef760422d54f99ab00f1', "aria-label": ariaLabel, onClick: () => this.onClick() }, this.current ? this.current.label() : 'Search or enter URI')));
|
|
3501
|
+
return (index.h("section", { key: '79ac5c5dc2d6c2d44e852f9671d0895a29fb62a6', class: "current" }, this.current && this.searchIndexReady && index.h("pos-make-findable", { key: 'be92d99ead125c1a29520639da6dfd6e28007d85', uri: this.current.uri }), index.h("button", { key: '4ecdd49e46614f604c36ef760422d54f99ab00f1', "aria-label": ariaLabel, onClick: () => this.onClick() }, index.h("div", { key: '002c4138be9b798cecec90de50f7500cffd89df7' }, this.current ? this.current.label() : 'Search or enter URI'), this.icon())));
|
|
3502
|
+
}
|
|
3503
|
+
icon() {
|
|
3504
|
+
return (index.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" }, index.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" })));
|
|
3502
3505
|
}
|
|
3503
3506
|
};
|
|
3504
3507
|
PosNavigationBar.style = PosNavigationBarStyle0;
|
|
@@ -3524,7 +3527,7 @@ const PosNewThingForm = class {
|
|
|
3524
3527
|
PodOsAware.subscribePodOs(this);
|
|
3525
3528
|
}
|
|
3526
3529
|
render() {
|
|
3527
|
-
return (index.h("form", { key: '
|
|
3530
|
+
return (index.h("form", { key: 'b1fb16121ecdbed1a3f19df9f9acd1cbc70f91f1', method: "dialog", onSubmit: e => this.handleSubmit(e) }, index.h("label", { key: '87397db04178def97089013afb85287bfc3fe679', htmlFor: "type" }, "Type"), index.h("pos-select-term", { key: 'dcc4829c2af46d899617f1ee1e8b3b3fd0a8ebf3', id: "type", placeholder: "", value: this.selectedTypeUri, "onPod-os:term-selected": e => this.onTermSelected(e) }), index.h("label", { key: 'a9ae3917bce29016bf2923b11a9c278a2e54afe4', htmlFor: "name" }, "Name"), index.h("input", { key: '3638043dac61fdda67a28f95c0ab9991a3a36979', id: "name", type: "text", value: this.name, onInput: e => this.handleChange(e) }), this.newUri ? (index.h("div", { id: "new-uri", title: "This will be the URI of the new thing" }, this.newUri)) : null, index.h("input", { key: '2bcec9f76f2b2f45abadf395b826938d6dcc67ab', id: "create", type: "submit", value: "Create", disabled: !this.canSubmit })));
|
|
3528
3531
|
}
|
|
3529
3532
|
handleChange(event) {
|
|
3530
3533
|
this.name = event.target.value;
|
|
@@ -3663,10 +3666,10 @@ const PosRichLink = class {
|
|
|
3663
3666
|
this.linkEmitter = index.createEvent(this, "pod-os:link", 7);
|
|
3664
3667
|
}
|
|
3665
3668
|
render() {
|
|
3666
|
-
return (index.h("pos-resource", { key: '
|
|
3669
|
+
return (index.h("pos-resource", { key: '73845f265bf6ce6b9245c3b1a98c169ee110b650', lazy: true, uri: this.uri }, index.h("p", { key: '5d2698dd9cf27cb8b81cd679196f1b65eb8b45f8', class: "content" }, index.h("a", { key: '26973e0fa9966c07b0568a1893aef2d35f51744a', href: this.uri, onClick: e => {
|
|
3667
3670
|
e.preventDefault();
|
|
3668
3671
|
this.linkEmitter.emit(this.uri);
|
|
3669
|
-
} }, index.h("pos-label", { key: '
|
|
3672
|
+
} }, index.h("pos-label", { key: 'f0cfb727e32f5e3c760bd06e8c3031639959ff2c' })), index.h("span", { key: '93bfbe0f64ceceac6f600a39827aa3387460de1f', class: "url" }, new URL(this.uri).host), index.h("pos-description", { key: '28a1a9afeb21720c3fe87ff5a4ad004173508a53' }))));
|
|
3670
3673
|
}
|
|
3671
3674
|
};
|
|
3672
3675
|
PosRichLink.style = PosRichLinkStyle0;
|
|
@@ -3997,7 +4000,7 @@ const PosRouter = class {
|
|
|
3997
4000
|
this.routeChanged.emit(this.uri);
|
|
3998
4001
|
}
|
|
3999
4002
|
render() {
|
|
4000
|
-
return index.h("slot", { key: '
|
|
4003
|
+
return index.h("slot", { key: '8b09de3dbbd253665cd541b9f264b0dcdc774354' });
|
|
4001
4004
|
}
|
|
4002
4005
|
};
|
|
4003
4006
|
PosRouter.style = PosRouterStyle0;
|
|
@@ -4027,7 +4030,7 @@ const PosSelectTerm = class {
|
|
|
4027
4030
|
this.termSelected.emit({ uri: event.target.value });
|
|
4028
4031
|
}
|
|
4029
4032
|
render() {
|
|
4030
|
-
return (index.h(index.Host, { key: '
|
|
4033
|
+
return (index.h(index.Host, { key: '88196bb6125fb061a14058eb4b8c5ece2a479316' }, index.h("input", { key: '839d513d12de456412da84c6de912ecb0df1d36f', part: "input", list: "terms", placeholder: this.placeholder, value: this.value, onChange: ev => this.handleChange(ev) }), index.h("datalist", { key: '3b62eb3eba017b4f092f20385c3cd79f7ab3c977', part: "terms", id: "terms" }, this.terms.map(term => (index.h("option", { value: term.uri }, term.shorthand))))));
|
|
4031
4034
|
}
|
|
4032
4035
|
static get delegatesFocus() { return true; }
|
|
4033
4036
|
static get watchers() { return {
|