@pod-os/elements 0.25.2 → 0.25.3-rc.3de9abd.0

package/dist/cjs/pos-relations_2.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"pos-relations.pos-reverse-relations.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,eAAe,GAAG,o9BAAo9B,CAAC;AAC7+B,2BAAe,eAAe;;MCQjB,YAAY;IALzB;;;QAMW,SAAI,GAAe,EAAE,CAAC;QAS/B,oBAAe,GAAG,CAAC,QAAe;YAChC,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC,SAAS,EAAE,CAAC;SAClC,CAAC;KAmBH;IAzBC,iBAAiB;QACfA,+BAAiB,CAAC,IAAI,CAAC,CAAC;KACzB;IAMD,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,KAC5BC,iBAAK,KAAK,EAAC,kBAAkB,IAC3BA,oBACEA,2BAAe,GAAG,EAAE,EAAE,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE,CAAC,KAAK,GAAI,CAClD,EACLA,iBAAK,KAAK,EAAC,QAAQ,IAChB,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,KACdA,oBACEA,2BAAe,GAAG,EAAE,GAAG,GAAI,CACxB,CACN,CAAC,CACE,CACF,CACP,CAAC,CAAC;QACH,OAAO,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,GAAGA,oBAAK,KAAK,CAAM,GAAG,IAAI,CAAC;KACvD;;;;ACvCH,MAAM,sBAAsB,GAAG,k9BAAk9B,CAAC;AACl/B,kCAAe,sBAAsB;;MCQxB,mBAAmB;IALhC;;;QAMW,SAAI,GAAe,EAAE,CAAC;QAQ/B,oBAAe,GAAG,CAAC,QAAe;YAChC,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC,gBAAgB,EAAE,CAAC;SACzC,CAAC;KAmBH;IAzBC,iBAAiB;QACfD,+BAAiB,CAAC,IAAI,CAAC,CAAC;KACzB;IAMD,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,KAC5BC,iBAAK,KAAK,EAAC,kBAAkB,IAC3BA,oBACEA,2BAAe,GAAG,EAAE,EAAE,CAAC,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,KAAK,KAAK,GAAI,CAC7D,EACLA,iBAAK,KAAK,EAAC,QAAQ,IAChB,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,KACdA,oBACEA,2BAAe,GAAG,EAAE,GAAG,GAAI,CACxB,CACN,CAAC,CACE,CACF,CACP,CAAC,CAAC;QACH,OAAO,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,GAAGA,oBAAK,KAAK,CAAM,GAAG,IAAI,CAAC;KACvD;;;;;;;","names":["subscribeResource","h"],"sources":["src/components/pos-relations/pos-relations.css?tag=pos-relations&encapsulation=shadow","src/components/pos-relations/pos-relations.tsx","src/components/pos-reverse-relations/pos-reverse-relations.css?tag=pos-reverse-relations&encapsulation=shadow","src/components/pos-reverse-relations/pos-reverse-relations.tsx"],"sourcesContent":[":host {\n  --background-base-color: var(--color-grey-200);\n  --background-color-even: hsl(from var(--background-base-color) h s calc(l + 7));\n  --background-color-odd: hsl(from var(--background-base-color) h s calc(l + 10));\n  --border-color: var(--background-base-color);\n}\n\ndd {\n  padding: 0;\n  margin: 0;\n}\n\ndl {\n  display: flex;\n  flex-direction: column;\n  gap: var(--size-1);\n  padding: 0;\n  margin: 0;\n}\n\ndt {\n  margin-bottom: var(--size-1);\n}\n\n.predicate-values:nth-child(odd) {\n  background-color: var(--background-color-odd);\n}\n\n.predicate-values:nth-child(even) {\n  background-color: var(--background-color-even);\n}\n\n.predicate-values {\n  display: flex;\n  flex-direction: column;\n  border: var(--size-px) solid var(--border-color);\n  padding: var(--size-2);\n  gap: var(--size-1);\n\n  .values {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-3);\n  }\n}\n\npos-rich-link {\n  --background-color: inherit;\n}\n","import { Relation, Thing } from '@pod-os/core';\nimport { Component, Event, EventEmitter, h, State } from '@stencil/core';\nimport { ResourceAware, subscribeResource } from '../events/ResourceAware';\n\n@Component({\n  tag: 'pos-relations',\n  shadow: true,\n  styleUrl: 'pos-relations.css',\n})\nexport class PosRelations implements ResourceAware {\n  @State() data: Relation[] = [];\n\n  @Event({ eventName: 'pod-os:resource' })\n  subscribeResource: EventEmitter;\n\n  componentWillLoad() {\n    subscribeResource(this);\n  }\n\n  receiveResource = (resource: Thing) => {\n    this.data = resource.relations();\n  };\n\n  render() {\n    const items = this.data.map(it => (\n      <div class=\"predicate-values\">\n        <dt>\n          <pos-predicate uri={it.predicate} label={it.label} />\n        </dt>\n        <div class=\"values\">\n          {it.uris.map(uri => (\n            <dd>\n              <pos-rich-link uri={uri} />\n            </dd>\n          ))}\n        </div>\n      </div>\n    ));\n    return this.data.length > 0 ? <dl>{items}</dl> : null;\n  }\n}\n",":host {\n  --background-base-color: var(--color-grey-200);\n  --background-color-even: hsl(from var(--background-base-color) h s calc(l + 7));\n  --background-color-odd: hsl(from var(--background-base-color) h s calc(l + 10));\n  --border-color: var(--background-base-color);\n}\n\ndd {\n  padding: 0;\n  margin: 0;\n}\n\ndl {\n  display: flex;\n  flex-direction: column;\n  gap: var(--size-1);\n  padding: 0;\n  margin: 0;\n}\n\ndt {\n  margin-bottom: var(--size-1);\n}\n\n.predicate-values:nth-child(odd) {\n  background-color: var(--background-color-odd);\n}\n\n.predicate-values:nth-child(even) {\n  background-color: var(--background-color-even);\n}\n\n.predicate-values {\n  display: flex;\n  flex-direction: column;\n  border: var(--size-px) solid var(--border-color);\n  padding: var(--size-2);\n  gap: var(--size-1);\n  .values {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-3);\n  }\n}\n\npos-rich-link {\n  --background-color: inherit;\n}\n","import { Relation, Thing } from '@pod-os/core';\nimport { Component, h, Event, EventEmitter, State } from '@stencil/core';\nimport { ResourceAware, subscribeResource } from '../events/ResourceAware';\n\n@Component({\n  tag: 'pos-reverse-relations',\n  shadow: true,\n  styleUrl: 'pos-reverse-relations.css',\n})\nexport class PosReverseRelations implements ResourceAware {\n  @State() data: Relation[] = [];\n\n  @Event({ eventName: 'pod-os:resource' }) subscribeResource: EventEmitter;\n\n  componentWillLoad() {\n    subscribeResource(this);\n  }\n\n  receiveResource = (resource: Thing) => {\n    this.data = resource.reverseRelations();\n  };\n\n  render() {\n    const items = this.data.map(it => (\n      <div class=\"predicate-values\">\n        <dt>\n          <pos-predicate uri={it.predicate} label={`is ${it.label} of`} />\n        </dt>\n        <div class=\"values\">\n          {it.uris.map(uri => (\n            <dd>\n              <pos-rich-link uri={uri} />\n            </dd>\n          ))}\n        </div>\n      </div>\n    ));\n    return this.data.length > 0 ? <dl>{items}</dl> : null;\n  }\n}\n"],"version":3}
+{"file":"pos-relations.pos-reverse-relations.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,eAAe,GAAG,ygCAAygC,CAAC;AACliC,2BAAe,eAAe;;MCQjB,YAAY;IALzB;;;QAMW,SAAI,GAAe,EAAE,CAAC;QAS/B,oBAAe,GAAG,CAAC,QAAe;YAChC,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC,SAAS,EAAE,CAAC;SAClC,CAAC;KAmBH;IAzBC,iBAAiB;QACfA,+BAAiB,CAAC,IAAI,CAAC,CAAC;KACzB;IAMD,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,KAC5BC,iBAAK,KAAK,EAAC,kBAAkB,IAC3BA,oBACEA,2BAAe,GAAG,EAAE,EAAE,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE,CAAC,KAAK,GAAI,CAClD,EACLA,iBAAK,KAAK,EAAC,QAAQ,IAChB,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,KACdA,oBACEA,2BAAe,GAAG,EAAE,GAAG,GAAI,CACxB,CACN,CAAC,CACE,CACF,CACP,CAAC,CAAC;QACH,OAAO,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,GAAGA,oBAAK,KAAK,CAAM,GAAG,IAAI,CAAC;KACvD;;;;ACvCH,MAAM,sBAAsB,GAAG,ugCAAugC,CAAC;AACviC,kCAAe,sBAAsB;;MCQxB,mBAAmB;IALhC;;;QAMW,SAAI,GAAe,EAAE,CAAC;QAQ/B,oBAAe,GAAG,CAAC,QAAe;YAChC,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC,gBAAgB,EAAE,CAAC;SACzC,CAAC;KAmBH;IAzBC,iBAAiB;QACfD,+BAAiB,CAAC,IAAI,CAAC,CAAC;KACzB;IAMD,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,KAC5BC,iBAAK,KAAK,EAAC,kBAAkB,IAC3BA,oBACEA,2BAAe,GAAG,EAAE,EAAE,CAAC,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,KAAK,KAAK,GAAI,CAC7D,EACLA,iBAAK,KAAK,EAAC,QAAQ,IAChB,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,KACdA,oBACEA,2BAAe,GAAG,EAAE,GAAG,GAAI,CACxB,CACN,CAAC,CACE,CACF,CACP,CAAC,CAAC;QACH,OAAO,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,GAAGA,oBAAK,KAAK,CAAM,GAAG,IAAI,CAAC;KACvD;;;;;;;","names":["subscribeResource","h"],"sources":["src/components/pos-relations/pos-relations.css?tag=pos-relations&encapsulation=shadow","src/components/pos-relations/pos-relations.tsx","src/components/pos-reverse-relations/pos-reverse-relations.css?tag=pos-reverse-relations&encapsulation=shadow","src/components/pos-reverse-relations/pos-reverse-relations.tsx"],"sourcesContent":[":host {\n  --background-base-color: color-mix(in srgb, var(--pos-background-color), var(--color-grey-800) 10%);\n  --background-color-even: hsl(from var(--background-base-color) h s calc(l + 7));\n  --background-color-odd: hsl(from var(--background-base-color) h s calc(l + 10));\n  --border-color: var(--background-base-color);\n}\n\ndd {\n  padding: 0;\n  margin: 0;\n}\n\ndl {\n  display: flex;\n  flex-direction: column;\n  gap: var(--size-1);\n  padding: 0;\n  margin: 0;\n}\n\ndt {\n  margin-bottom: var(--size-1);\n}\n\n.predicate-values:nth-child(odd) {\n  background-color: var(--background-color-odd);\n}\n\n.predicate-values:nth-child(even) {\n  background-color: var(--background-color-even);\n}\n\n.predicate-values {\n  display: flex;\n  flex-direction: column;\n  border: var(--size-px) solid var(--border-color);\n  padding: var(--size-2);\n  gap: var(--size-1);\n\n  .values {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-3);\n  }\n}\n\npos-rich-link {\n  --background-color: inherit;\n}\n","import { Relation, Thing } from '@pod-os/core';\nimport { Component, Event, EventEmitter, h, State } from '@stencil/core';\nimport { ResourceAware, subscribeResource } from '../events/ResourceAware';\n\n@Component({\n  tag: 'pos-relations',\n  shadow: true,\n  styleUrl: 'pos-relations.css',\n})\nexport class PosRelations implements ResourceAware {\n  @State() data: Relation[] = [];\n\n  @Event({ eventName: 'pod-os:resource' })\n  subscribeResource: EventEmitter;\n\n  componentWillLoad() {\n    subscribeResource(this);\n  }\n\n  receiveResource = (resource: Thing) => {\n    this.data = resource.relations();\n  };\n\n  render() {\n    const items = this.data.map(it => (\n      <div class=\"predicate-values\">\n        <dt>\n          <pos-predicate uri={it.predicate} label={it.label} />\n        </dt>\n        <div class=\"values\">\n          {it.uris.map(uri => (\n            <dd>\n              <pos-rich-link uri={uri} />\n            </dd>\n          ))}\n        </div>\n      </div>\n    ));\n    return this.data.length > 0 ? <dl>{items}</dl> : null;\n  }\n}\n",":host {\n  --background-base-color: color-mix(in srgb, var(--pos-background-color), var(--color-grey-800) 10%);\n  --background-color-even: hsl(from var(--background-base-color) h s calc(l + 7));\n  --background-color-odd: hsl(from var(--background-base-color) h s calc(l + 10));\n  --border-color: var(--background-base-color);\n}\n\ndd {\n  padding: 0;\n  margin: 0;\n}\n\ndl {\n  display: flex;\n  flex-direction: column;\n  gap: var(--size-1);\n  padding: 0;\n  margin: 0;\n}\n\ndt {\n  margin-bottom: var(--size-1);\n}\n\n.predicate-values:nth-child(odd) {\n  background-color: var(--background-color-odd);\n}\n\n.predicate-values:nth-child(even) {\n  background-color: var(--background-color-even);\n}\n\n.predicate-values {\n  display: flex;\n  flex-direction: column;\n  border: var(--size-px) solid var(--border-color);\n  padding: var(--size-2);\n  gap: var(--size-1);\n  .values {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-3);\n  }\n}\n\npos-rich-link {\n  --background-color: inherit;\n}\n","import { Relation, Thing } from '@pod-os/core';\nimport { Component, h, Event, EventEmitter, State } from '@stencil/core';\nimport { ResourceAware, subscribeResource } from '../events/ResourceAware';\n\n@Component({\n  tag: 'pos-reverse-relations',\n  shadow: true,\n  styleUrl: 'pos-reverse-relations.css',\n})\nexport class PosReverseRelations implements ResourceAware {\n  @State() data: Relation[] = [];\n\n  @Event({ eventName: 'pod-os:resource' }) subscribeResource: EventEmitter;\n\n  componentWillLoad() {\n    subscribeResource(this);\n  }\n\n  receiveResource = (resource: Thing) => {\n    this.data = resource.reverseRelations();\n  };\n\n  render() {\n    const items = this.data.map(it => (\n      <div class=\"predicate-values\">\n        <dt>\n          <pos-predicate uri={it.predicate} label={`is ${it.label} of`} />\n        </dt>\n        <div class=\"values\">\n          {it.uris.map(uri => (\n            <dd>\n              <pos-rich-link uri={uri} />\n            </dd>\n          ))}\n        </div>\n      </div>\n    ));\n    return this.data.length > 0 ? <dl>{items}</dl> : null;\n  }\n}\n"],"version":3}

package/dist/cjs/pos-subjects.cjs.entry.js

@@ -6,7 +6,7 @@ const index = require('./index-45dd971c.js');
 const index$1 = require('./index-ee29a70a.js');
 const ResourceAware = require('./ResourceAware-7b6501ae.js');
 
-const posSubjectsCss = ":host {\n  --background-base-color: var(--color-grey-200);\n  --background-color-even: hsl(from var(--background-base-color) h s calc(l + 7));\n  --background-color-odd: hsl(from var(--background-base-color) h s calc(l + 10));\n  --border-color: var(--background-base-color);\n}\n\nul {\n  display: flex;\n  flex-direction: column;\n  gap: var(--size-2);\n\n  margin: 0;\n  padding: 0;\n\n  li {\n    border: var(--size-px) solid var(--border-color);\n    &:nth-child(even) {\n      background-color: var(--background-color-even);\n    }\n    &:nth-child(odd) {\n      background-color: var(--background-color-odd);\n    }\n    padding: var(--size-4);\n    list-style-type: none;\n  }\n}\n";
+const posSubjectsCss = ":host {\n  --background-base-color: color-mix(in srgb, var(--pos-background-color), var(--color-grey-800) 10%);\n  --background-color-even: hsl(from var(--background-base-color) h s calc(l + 7));\n  --background-color-odd: hsl(from var(--background-base-color) h s calc(l + 10));\n  --border-color: var(--background-base-color);\n}\n\nul {\n  display: flex;\n  flex-direction: column;\n  gap: var(--size-2);\n\n  margin: 0;\n  padding: 0;\n\n  li {\n    border: var(--size-px) solid var(--border-color);\n    &:nth-child(even) {\n      background-color: var(--background-color-even);\n    }\n    &:nth-child(odd) {\n      background-color: var(--background-color-odd);\n    }\n    padding: var(--size-4);\n    list-style-type: none;\n  }\n}\n";
 const PosSubjectsStyle0 = posSubjectsCss;
 
 const PosSubjects = class {

package/dist/cjs/pos-subjects.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"pos-subjects.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,cAAc,GAAG,mrBAAmrB,CAAC;AAC3sB,0BAAe,cAAc;;MCQhB,WAAW;IALxB;;;QAMW,SAAI,GAAc,EAAE,CAAC;QAS9B,oBAAe,GAAG,CAAC,QAAe;YAChC,MAAM,GAAG,GAAG,QAAQ,CAAC,MAAM,CAACA,mBAAW,CAAC,CAAC;YACzC,IAAI,CAAC,IAAI,GAAG,GAAG,CAAC,QAAQ,EAAE,CAAC;SAC5B,CAAC;KAUH;IAjBC,iBAAiB;QACfC,+BAAiB,CAAC,IAAI,CAAC,CAAC;KACzB;IAOD,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,KAC5BC,oBACEA,2BAAe,GAAG,EAAE,EAAE,CAAC,GAAG,GAAI,CAC3B,CACN,CAAC,CAAC;QACH,OAAO,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,GAAGA,oBAAK,KAAK,CAAM,GAAG,IAAI,CAAC;KACvD;;;;;;","names":["RdfDocument","subscribeResource","h"],"sources":["src/components/pos-subjects/pos-subjects.css?tag=pos-subjects&encapsulation=shadow","src/components/pos-subjects/pos-subjects.tsx"],"sourcesContent":[":host {\n  --background-base-color: var(--color-grey-200);\n  --background-color-even: hsl(from var(--background-base-color) h s calc(l + 7));\n  --background-color-odd: hsl(from var(--background-base-color) h s calc(l + 10));\n  --border-color: var(--background-base-color);\n}\n\nul {\n  display: flex;\n  flex-direction: column;\n  gap: var(--size-2);\n\n  margin: 0;\n  padding: 0;\n\n  li {\n    border: var(--size-px) solid var(--border-color);\n    &:nth-child(even) {\n      background-color: var(--background-color-even);\n    }\n    &:nth-child(odd) {\n      background-color: var(--background-color-odd);\n    }\n    padding: var(--size-4);\n    list-style-type: none;\n  }\n}\n","import { RdfDocument, Subject, Thing } from '@pod-os/core';\nimport { Component, Event, EventEmitter, h, State } from '@stencil/core';\nimport { ResourceAware, subscribeResource } from '../events/ResourceAware';\n\n@Component({\n  tag: 'pos-subjects',\n  shadow: true,\n  styleUrl: 'pos-subjects.css',\n})\nexport class PosSubjects implements ResourceAware {\n  @State() data: Subject[] = [];\n\n  @Event({ eventName: 'pod-os:resource' })\n  subscribeResource: EventEmitter;\n\n  componentWillLoad() {\n    subscribeResource(this);\n  }\n\n  receiveResource = (resource: Thing) => {\n    const doc = resource.assume(RdfDocument);\n    this.data = doc.subjects();\n  };\n\n  render() {\n    const items = this.data.map(it => (\n      <li>\n        <pos-rich-link uri={it.uri} />\n      </li>\n    ));\n    return this.data.length > 0 ? <ul>{items}</ul> : null;\n  }\n}\n"],"version":3}
+{"file":"pos-subjects.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,cAAc,GAAG,wuBAAwuB,CAAC;AAChwB,0BAAe,cAAc;;MCQhB,WAAW;IALxB;;;QAMW,SAAI,GAAc,EAAE,CAAC;QAS9B,oBAAe,GAAG,CAAC,QAAe;YAChC,MAAM,GAAG,GAAG,QAAQ,CAAC,MAAM,CAACA,mBAAW,CAAC,CAAC;YACzC,IAAI,CAAC,IAAI,GAAG,GAAG,CAAC,QAAQ,EAAE,CAAC;SAC5B,CAAC;KAUH;IAjBC,iBAAiB;QACfC,+BAAiB,CAAC,IAAI,CAAC,CAAC;KACzB;IAOD,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,KAC5BC,oBACEA,2BAAe,GAAG,EAAE,EAAE,CAAC,GAAG,GAAI,CAC3B,CACN,CAAC,CAAC;QACH,OAAO,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,GAAGA,oBAAK,KAAK,CAAM,GAAG,IAAI,CAAC;KACvD;;;;;;","names":["RdfDocument","subscribeResource","h"],"sources":["src/components/pos-subjects/pos-subjects.css?tag=pos-subjects&encapsulation=shadow","src/components/pos-subjects/pos-subjects.tsx"],"sourcesContent":[":host {\n  --background-base-color: color-mix(in srgb, var(--pos-background-color), var(--color-grey-800) 10%);\n  --background-color-even: hsl(from var(--background-base-color) h s calc(l + 7));\n  --background-color-odd: hsl(from var(--background-base-color) h s calc(l + 10));\n  --border-color: var(--background-base-color);\n}\n\nul {\n  display: flex;\n  flex-direction: column;\n  gap: var(--size-2);\n\n  margin: 0;\n  padding: 0;\n\n  li {\n    border: var(--size-px) solid var(--border-color);\n    &:nth-child(even) {\n      background-color: var(--background-color-even);\n    }\n    &:nth-child(odd) {\n      background-color: var(--background-color-odd);\n    }\n    padding: var(--size-4);\n    list-style-type: none;\n  }\n}\n","import { RdfDocument, Subject, Thing } from '@pod-os/core';\nimport { Component, Event, EventEmitter, h, State } from '@stencil/core';\nimport { ResourceAware, subscribeResource } from '../events/ResourceAware';\n\n@Component({\n  tag: 'pos-subjects',\n  shadow: true,\n  styleUrl: 'pos-subjects.css',\n})\nexport class PosSubjects implements ResourceAware {\n  @State() data: Subject[] = [];\n\n  @Event({ eventName: 'pod-os:resource' })\n  subscribeResource: EventEmitter;\n\n  componentWillLoad() {\n    subscribeResource(this);\n  }\n\n  receiveResource = (resource: Thing) => {\n    const doc = resource.assume(RdfDocument);\n    this.data = doc.subjects();\n  };\n\n  render() {\n    const items = this.data.map(it => (\n      <li>\n        <pos-rich-link uri={it.uri} />\n      </li>\n    ));\n    return this.data.length > 0 ? <ul>{items}</ul> : null;\n  }\n}\n"],"version":3}

package/dist/collection/apps/pos-app-browser/pos-app-browser.css

@@ -37,13 +37,14 @@ footer {
   .settings {
     padding: 0 var(--size-1);
     text-decoration: none;
-    border: 1px solid var(--color-grey-800);
-    color: var(--color-grey-800);
+    background-color: var(--pos-background-color);
+    border: 1px solid var(--pos-secondary-border-color);
+    color: var(--pos-secondary-border-color);
     border-radius: var(--radius-xs);
 
     &:hover {
-      background-color: var(--color-grey-800);
-      color: white;
+      background-color: var(--pos-secondary-border-color);
+      color: var(--pos-background-color);
     }
   }
 }

package/dist/collection/apps/pos-app-dashboard/pos-app-dashboard.css

@@ -6,6 +6,4 @@
   justify-content: center;
   align-items: start;
   justify-items: stretch;
-  height: 100%;
-  background: linear-gradient(230deg, rgb(251, 251, 255) 0%, rgb(215, 223, 252) 100%);
 }

package/dist/collection/apps/pos-app-dashboard/pos-example-resources/pos-example-resources.css

@@ -1,10 +1,10 @@
 :host {
-  border: var(--size-px) solid var(--color-grey-100);
+  border: var(--size-px) solid var(--pos-border-color);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-md);
   padding: var(--size-8);
   max-width: var(--size-96);
-  background: var(--color-white);
+  background: var(--pos-card-background);
 }
 
 .links {

package/dist/collection/apps/pos-app-dashboard/pos-getting-started/pos-getting-started.css

@@ -1,15 +1,14 @@
 :host {
-  border: var(--size-px) solid var(--color-grey-100);
+  border: var(--size-px) solid var(--pos-border-color);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-md);
   padding: var(--size-8);
   max-width: var(--size-96);
-  background: var(--color-white);
+  background: var(--pos-card-background);
 }
 
 .question {
   font-weight: var(--weight-semibold);
-  color: var(--color-grey-900);
 }
 
 a {

package/dist/collection/apps/pos-app-document-viewer/pos-app-document-viewer.js

@@ -1,4 +1,4 @@
-import { h } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { subscribeResource } from "../../components/events/ResourceAware";
 export class PosAppDocumentViewer {
     constructor() {
@@ -13,10 +13,20 @@ export class PosAppDocumentViewer {
         if (!this.resource) {
             return null;
         }
-        return (h("ion-grid", null, h("ion-row", null, h("ion-col", { size: "12", "size-sm": true }, h("pos-document", { src: this.resource.uri })), h("ion-col", { size: "12", "size-sm": true }, h("ion-card", null, h("ion-card-header", { style: { gap: 'var(--size-1)' } }, h("ion-card-title", null, h("pos-label", null)), h("pos-type-badges", null), h("pos-literals", null)))))));
+        return (h(Host, null, h("section", null, h("pos-document", { src: this.resource.uri })), h("section", null, h("article", null, h("header", null, h("h1", null, h("pos-label", null)), h("pos-type-badges", null)), h("pos-literals", null)))));
     }
     static get is() { return "pos-app-document-viewer"; }
     static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../styles/default-app-layout.css", "../styles/article-card.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../styles/default-app-layout.css", "../styles/article-card.css"]
+        };
+    }
     static get states() {
         return {
             "resource": {}

package/dist/collection/apps/pos-app-document-viewer/pos-app-document-viewer.js.map

@@ -1 +1 @@
-{"version":3,"file":"pos-app-document-viewer.js","sourceRoot":"","sources":["../../../../src/apps/pos-app-document-viewer/pos-app-document-viewer.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACzE,OAAO,EAAiB,iBAAiB,EAAE,MAAM,uCAAuC,CAAC;AAMzF,MAAM,OAAO,oBAAoB;IAJjC;QAaE,oBAAe,GAAG,CAAC,QAAe,EAAE,EAAE;YACpC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;QAC3B,CAAC,CAAC;KA4BH;IAlCC,iBAAiB;QACf,iBAAiB,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC;IAMD,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,OAAO,IAAI,CAAC;QACd,CAAC;QAED,OAAO,CACL;YACE;gBACE,eAAS,IAAI,EAAC,IAAI;oBAChB,oBAAc,GAAG,EAAE,IAAI,CAAC,QAAQ,CAAC,GAAG,GAAI,CAChC;gBACV,eAAS,IAAI,EAAC,IAAI;oBAChB;wBACE,uBAAiB,KAAK,EAAE,EAAE,GAAG,EAAE,eAAe,EAAE;4BAC9C;gCACE,oBAAa,CACE;4BACjB,0BAAmB;4BACnB,uBAAgB,CACA,CACT,CACH,CACF,CACD,CACZ,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Thing } from '@pod-os/core';\nimport { Component, Event, EventEmitter, h, State } from '@stencil/core';\nimport { ResourceAware, subscribeResource } from '../../components/events/ResourceAware';\n\n@Component({\n  tag: 'pos-app-document-viewer',\n  shadow: true,\n})\nexport class PosAppDocumentViewer implements ResourceAware {\n  @State() resource: Thing;\n\n  @Event({ eventName: 'pod-os:resource' }) subscribeResource: EventEmitter;\n\n  componentWillLoad() {\n    subscribeResource(this);\n  }\n\n  receiveResource = (resource: Thing) => {\n    this.resource = resource;\n  };\n\n  render() {\n    if (!this.resource) {\n      return null;\n    }\n\n    return (\n      <ion-grid>\n        <ion-row>\n          <ion-col size=\"12\" size-sm>\n            <pos-document src={this.resource.uri} />\n          </ion-col>\n          <ion-col size=\"12\" size-sm>\n            <ion-card>\n              <ion-card-header style={{ gap: 'var(--size-1)' }}>\n                <ion-card-title>\n                  <pos-label />\n                </ion-card-title>\n                <pos-type-badges />\n                <pos-literals />\n              </ion-card-header>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pos-app-document-viewer.js","sourceRoot":"","sources":["../../../../src/apps/pos-app-document-viewer/pos-app-document-viewer.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC/E,OAAO,EAAiB,iBAAiB,EAAE,MAAM,uCAAuC,CAAC;AAOzF,MAAM,OAAO,oBAAoB;IALjC;QAcE,oBAAe,GAAG,CAAC,QAAe,EAAE,EAAE;YACpC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;QAC3B,CAAC,CAAC;KA0BH;IAhCC,iBAAiB;QACf,iBAAiB,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC;IAMD,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,OAAO,IAAI,CAAC;QACd,CAAC;QAED,OAAO,CACL,EAAC,IAAI;YACH;gBACE,oBAAc,GAAG,EAAE,IAAI,CAAC,QAAQ,CAAC,GAAG,GAAI,CAChC;YACV;gBACE;oBACE;wBACE;4BACE,oBAAa,CACV;wBACL,0BAAmB,CACZ;oBACT,uBAAgB,CACR,CACF,CACL,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Thing } from '@pod-os/core';\nimport { Component, Event, EventEmitter, h, Host, State } from '@stencil/core';\nimport { ResourceAware, subscribeResource } from '../../components/events/ResourceAware';\n\n@Component({\n  tag: 'pos-app-document-viewer',\n  shadow: true,\n  styleUrls: ['../styles/default-app-layout.css', '../styles/article-card.css'],\n})\nexport class PosAppDocumentViewer implements ResourceAware {\n  @State() resource: Thing;\n\n  @Event({ eventName: 'pod-os:resource' }) subscribeResource: EventEmitter;\n\n  componentWillLoad() {\n    subscribeResource(this);\n  }\n\n  receiveResource = (resource: Thing) => {\n    this.resource = resource;\n  };\n\n  render() {\n    if (!this.resource) {\n      return null;\n    }\n\n    return (\n      <Host>\n        <section>\n          <pos-document src={this.resource.uri} />\n        </section>\n        <section>\n          <article>\n            <header>\n              <h1>\n                <pos-label />\n              </h1>\n              <pos-type-badges />\n            </header>\n            <pos-literals />\n          </article>\n        </section>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/apps/pos-app-generic/pos-app-generic.css

@@ -10,6 +10,7 @@ article {
   outline: var(--pos-border-solid);
   border-radius: var(--radius-sm);
   box-shadow: var(--shadow-md);
+  background-color: var(--pos-card-background);
 
   header {
     display: flex;
@@ -34,7 +35,7 @@ article {
     padding: var(--size-2);
 
     pos-description {
-      color: var(--color-grey-800);
+      color: var(--pos-secondary-text-color);
       font-weight: var(--weight-light);
     }
   }

package/dist/collection/apps/pos-app-image-viewer/pos-app-image-viewer.css

@@ -0,0 +1,3 @@
+pos-image {
+  --max-width: 100%;
+}

package/dist/collection/apps/pos-app-image-viewer/pos-app-image-viewer.js

@@ -1,4 +1,4 @@
-import { h } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { subscribeResource } from "../../components/events/ResourceAware";
 export class PosAppImageViewer {
     constructor() {
@@ -13,11 +13,20 @@ export class PosAppImageViewer {
         if (!this.resource) {
             return null;
         }
-        return (h("ion-grid", null, h("ion-row", null, h("ion-col", { size: "12", "size-sm": true }, h("pos-image", { src: this.resource.uri })), h("ion-col", { size: "12", "size-sm": true }, h("ion-card", null, h("ion-card-header", { style: { gap: 'var(--size-1)' } }, h("ion-card-title", null, h("pos-label", null)), h("pos-type-badges", null), h("pos-literals", null)))))));
+        return (h(Host, null, h("section", null, h("pos-image", { src: this.resource.uri })), h("section", null, h("article", null, h("header", null, h("h1", null, h("pos-label", null)), h("pos-type-badges", null)), h("pos-literals", null)))));
     }
     static get is() { return "pos-app-image-viewer"; }
     static get encapsulation() { return "shadow"; }
-    static get styles() { return "pos-image {\n      --max-width: 100%;\n    }"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pos-app-image-viewer.css", "../styles/default-app-layout.css", "../styles/article-card.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pos-app-image-viewer.css", "../styles/default-app-layout.css", "../styles/article-card.css"]
+        };
+    }
     static get states() {
         return {
             "resource": {}

package/dist/collection/apps/pos-app-image-viewer/pos-app-image-viewer.js.map

@@ -1 +1 @@
-{"version":3,"file":"pos-app-image-viewer.js","sourceRoot":"","sources":["../../../../src/apps/pos-app-image-viewer/pos-app-image-viewer.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACzE,OAAO,EAAiB,iBAAiB,EAAE,MAAM,uCAAuC,CAAC;AAWzF,MAAM,OAAO,iBAAiB;IAT9B;QAkBE,oBAAe,GAAG,CAAC,QAAe,EAAE,EAAE;YACpC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;QAC3B,CAAC,CAAC;KA4BH;IAlCC,iBAAiB;QACf,iBAAiB,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC;IAMD,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,OAAO,IAAI,CAAC;QACd,CAAC;QAED,OAAO,CACL;YACE;gBACE,eAAS,IAAI,EAAC,IAAI;oBAChB,iBAAW,GAAG,EAAE,IAAI,CAAC,QAAQ,CAAC,GAAG,GAAI,CAC7B;gBACV,eAAS,IAAI,EAAC,IAAI;oBAChB;wBACE,uBAAiB,KAAK,EAAE,EAAE,GAAG,EAAE,eAAe,EAAE;4BAC9C;gCACE,oBAAa,CACE;4BACjB,0BAAmB;4BACnB,uBAAgB,CACA,CACT,CACH,CACF,CACD,CACZ,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Thing } from '@pod-os/core';\nimport { Component, Event, EventEmitter, h, State } from '@stencil/core';\nimport { ResourceAware, subscribeResource } from '../../components/events/ResourceAware';\n\n@Component({\n  tag: 'pos-app-image-viewer',\n  shadow: true,\n  styles: `\n    pos-image {\n      --max-width: 100%;\n    }\n  `,\n})\nexport class PosAppImageViewer implements ResourceAware {\n  @State() resource: Thing;\n\n  @Event({ eventName: 'pod-os:resource' }) subscribeResource: EventEmitter;\n\n  componentWillLoad() {\n    subscribeResource(this);\n  }\n\n  receiveResource = (resource: Thing) => {\n    this.resource = resource;\n  };\n\n  render() {\n    if (!this.resource) {\n      return null;\n    }\n\n    return (\n      <ion-grid>\n        <ion-row>\n          <ion-col size=\"12\" size-sm>\n            <pos-image src={this.resource.uri} />\n          </ion-col>\n          <ion-col size=\"12\" size-sm>\n            <ion-card>\n              <ion-card-header style={{ gap: 'var(--size-1)' }}>\n                <ion-card-title>\n                  <pos-label />\n                </ion-card-title>\n                <pos-type-badges />\n                <pos-literals />\n              </ion-card-header>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pos-app-image-viewer.js","sourceRoot":"","sources":["../../../../src/apps/pos-app-image-viewer/pos-app-image-viewer.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC/E,OAAO,EAAiB,iBAAiB,EAAE,MAAM,uCAAuC,CAAC;AAOzF,MAAM,OAAO,iBAAiB;IAL9B;QAcE,oBAAe,GAAG,CAAC,QAAe,EAAE,EAAE;YACpC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;QAC3B,CAAC,CAAC;KA0BH;IAhCC,iBAAiB;QACf,iBAAiB,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC;IAMD,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,OAAO,IAAI,CAAC;QACd,CAAC;QAED,OAAO,CACL,EAAC,IAAI;YACH;gBACE,iBAAW,GAAG,EAAE,IAAI,CAAC,QAAQ,CAAC,GAAG,GAAI,CAC7B;YACV;gBACE;oBACE;wBACE;4BACE,oBAAa,CACV;wBACL,0BAAmB,CACZ;oBACT,uBAAgB,CACR,CACF,CACL,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Thing } from '@pod-os/core';\nimport { Component, Event, EventEmitter, h, Host, State } from '@stencil/core';\nimport { ResourceAware, subscribeResource } from '../../components/events/ResourceAware';\n\n@Component({\n  tag: 'pos-app-image-viewer',\n  shadow: true,\n  styleUrls: ['pos-app-image-viewer.css', '../styles/default-app-layout.css', '../styles/article-card.css'],\n})\nexport class PosAppImageViewer implements ResourceAware {\n  @State() resource: Thing;\n\n  @Event({ eventName: 'pod-os:resource' }) subscribeResource: EventEmitter;\n\n  componentWillLoad() {\n    subscribeResource(this);\n  }\n\n  receiveResource = (resource: Thing) => {\n    this.resource = resource;\n  };\n\n  render() {\n    if (!this.resource) {\n      return null;\n    }\n\n    return (\n      <Host>\n        <section>\n          <pos-image src={this.resource.uri} />\n        </section>\n        <section>\n          <article>\n            <header>\n              <h1>\n                <pos-label />\n              </h1>\n              <pos-type-badges />\n            </header>\n            <pos-literals />\n          </article>\n        </section>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/apps/pos-app-ldp-container/pos-app-ldp-container.js

@@ -1,8 +1,19 @@
-import { h } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 export class PosAppLdpContainer {
     render() {
-        return (h("ion-grid", { key: 'b5ebaf12ad80fbe1de402725fee629d6ff634d82' }, h("ion-row", { key: '97e9414cc2d702abbc51c3b8f4e894e4c47396c3' }, h("ion-col", { key: '5412d9c2a339923913a514913cc67af12451c299', size: "12", "size-sm": true }, h("pos-container-contents", { key: 'ef602f4c357d8308c5a37fe2a14b7100d6fc8737' }), h("details", { key: '1c754800523e2bc9b54323035b5e123a139fddff' }, h("summary", { key: '4ab826738cc31ed61bd888da6f110a0f9f40bfee' }, "All subjects"), h("pos-subjects", { key: '73a41bcd107c654139798d8f8e66d6794c17aa94' }))), h("ion-col", { key: '66bad3d51cdf326b7487463388869eccc21a1272', size: "12", "size-sm": true }, h("ion-card", { key: '83d11549b46d2a501f0fe7cdcaa5e2d41536f689' }, h("ion-card-header", { key: 'e1a625e1bb1771537974de79f60dceda2ff2b6c4', style: { gap: 'var(--size-1)' } }, h("ion-card-title", { key: '0571560cf780182f071c8eecf98b805ddfdf1747' }, h("pos-label", { key: 'abfb6a6a4c4cbe3cc0accd71cf13f9e3e68ad25f' })), h("pos-type-badges", { key: 'c1b6addde162ace3604805dab8446aa39b1874b1' }), h("pos-literals", { key: '04ab3ebf74e378d2c4a9c85b32b246e24ad355e0' })))))));
+        return (h(Host, { key: '76b7a2ab73232cbea2a7352527fd4fc35a75c66b' }, h("section", { key: '28d455d6e4b640de624a2c684133a6d4c7de2100' }, h("pos-container-contents", { key: '8e518a1122461108b3d33d66664f67feb55527c4' }), h("details", { key: '6be9b8cf613a54213e8281c0a4bf4e8235c1b4b1' }, h("summary", { key: '541ff3bbe8ec736361ea59fef319141a743c93ee' }, "All subjects"), h("pos-subjects", { key: '4e1927ea2365c354c7d1abf2eca50d892e1ac2bc' }))), h("section", { key: 'c9156ae4584e7f5803a7427b97844c3bbeae86bf' }, h("article", { key: 'c3fdc4cf0d4dd6624c63c2c6f4cf1c852a2468fc' }, h("header", { key: '4103d4a971e51942afeff1a26aca17454a962f31' }, h("h1", { key: 'eb000f4bac564b0255e28c44c112180a4558e323' }, h("pos-label", { key: '700a53e05c33d9c5a923dd5f73ecfb4ee969bc9d' })), h("pos-type-badges", { key: '15c37fc60de0e9ff1d36280da42bf0cc42c0c27c' })), h("pos-literals", { key: '4bf833339c2bedd888248e3893633496d2f61bd0' })))));
     }
     static get is() { return "pos-app-ldp-container"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../styles/default-app-layout.css", "../styles/article-card.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../styles/default-app-layout.css", "../styles/article-card.css"]
+        };
+    }
 }
 //# sourceMappingURL=pos-app-ldp-container.js.map

package/dist/collection/apps/pos-app-ldp-container/pos-app-ldp-container.js.map

@@ -1 +1 @@
-{"version":3,"file":"pos-app-ldp-container.js","sourceRoot":"","sources":["../../../../src/apps/pos-app-ldp-container/pos-app-ldp-container.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAK7C,MAAM,OAAO,kBAAkB;IAC7B,MAAM;QACJ,OAAO,CACL;YACE;gBACE,gEAAS,IAAI,EAAC,IAAI;oBAChB,gFAA0B;oBAC1B;wBACE,iFAA+B;wBAC/B,sEAAgB,CACR,CACF;gBACV,gEAAS,IAAI,EAAC,IAAI;oBAChB;wBACE,wEAAiB,KAAK,EAAE,EAAE,GAAG,EAAE,eAAe,EAAE;4BAC9C;gCACE,mEAAa,CACE;4BACjB,yEAAmB;4BACnB,sEAAgB,CACA,CACT,CACH,CACF,CACD,CACZ,CAAC;IACJ,CAAC;;CACF","sourcesContent":["import { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'pos-app-ldp-container',\n})\nexport class PosAppLdpContainer {\n  render() {\n    return (\n      <ion-grid>\n        <ion-row>\n          <ion-col size=\"12\" size-sm>\n            <pos-container-contents />\n            <details>\n              <summary>All subjects</summary>\n              <pos-subjects />\n            </details>\n          </ion-col>\n          <ion-col size=\"12\" size-sm>\n            <ion-card>\n              <ion-card-header style={{ gap: 'var(--size-1)' }}>\n                <ion-card-title>\n                  <pos-label />\n                </ion-card-title>\n                <pos-type-badges />\n                <pos-literals />\n              </ion-card-header>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pos-app-ldp-container.js","sourceRoot":"","sources":["../../../../src/apps/pos-app-ldp-container/pos-app-ldp-container.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,kBAAkB;IAC7B,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH;gBACE,gFAA0B;gBAC1B;oBACE,iFAA+B;oBAC/B,sEAAgB,CACR,CACF;YACV;gBACE;oBACE;wBACE;4BACE,mEAAa,CACV;wBACL,yEAAmB,CACZ;oBACT,sEAAgB,CACR,CACF,CACL,CACR,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'pos-app-ldp-container',\n  shadow: true,\n  styleUrls: ['../styles/default-app-layout.css', '../styles/article-card.css'],\n})\nexport class PosAppLdpContainer {\n  render() {\n    return (\n      <Host>\n        <section>\n          <pos-container-contents />\n          <details>\n            <summary>All subjects</summary>\n            <pos-subjects />\n          </details>\n        </section>\n        <section>\n          <article>\n            <header>\n              <h1>\n                <pos-label />\n              </h1>\n              <pos-type-badges />\n            </header>\n            <pos-literals />\n          </article>\n        </section>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/apps/pos-app-rdf-document/pos-app-rdf-document.js

@@ -1,8 +1,19 @@
-import { h } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 export class PosAppRdfDocument {
     render() {
-        return (h("ion-grid", { key: '84ff2964b293d6f0549f7d80d40929d4649f6fa7' }, h("ion-row", { key: '938bbb5b0abb409cb2db0eac0e5a5cf44a6b3ec5' }, h("ion-col", { key: '4a131b3ecf8caf92d872d05beaee96ac72bf9ff5', size: "12", "size-sm": true }, h("pos-subjects", { key: 'b2710e968d205934e74455940ec9d989f8dd6a85' })), h("ion-col", { key: '85fe9c8bf0d12839a21c6629f2512d2e4336586e', size: "12", "size-sm": true }, h("ion-card", { key: 'b0e0c64af5e9f07ee3e4329ca59eda09bc5e9c9c' }, h("ion-card-header", { key: 'aa1a4102e987aa9790617419be04ef6928abc6a2', style: { gap: 'var(--size-1)' } }, h("ion-card-title", { key: 'd07a9fe987dab982ae9d354912b3eea35817b59f' }, h("pos-label", { key: '468c63bec31273ff8536518a806fd6811484e53e' })), h("pos-type-badges", { key: '2da876ae6a2f14ce84f5e65d83d720cd972af5b8' }), h("pos-literals", { key: '5db1c14427cfe4a39de592901580c033082e6a48' })))))));
+        return (h(Host, { key: '9dd4b79cd54b3d2d61eea562b41a397cc1841279' }, h("section", { key: 'ec97b4983b9c45a5420b8e15b1b5d13a2b78f505' }, h("pos-subjects", { key: '7ca852dee46a4f1bb64cebccb397e2df7045be82' })), h("section", { key: '9aaf18c750b9847234ebb6d92c3c4ab605ff306e' }, h("article", { key: 'd794f6f83cfa49a37a759f0b8fa16b28038ec10b', "aria-labelledby": "doc-title" }, h("header", { key: 'bebbe27160a15351a1eabaa8c1ebb449beaa1005' }, h("h1", { key: 'cf5ba1875f2e22f162d2878789106738aac3d97c', id: "doc-title" }, h("pos-label", { key: 'fcb1a84e354ab5e2842077a6417c5b77ac9d87ed' })), h("pos-type-badges", { key: '370688f50c2906e069686d35a177c88b68de0a98' })), h("pos-literals", { key: '56bc40269a0269301603f3e9f101ad52738fca6a' })))));
     }
     static get is() { return "pos-app-rdf-document"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../styles/default-app-layout.css", "../styles/article-card.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../styles/default-app-layout.css", "../styles/article-card.css"]
+        };
+    }
 }
 //# sourceMappingURL=pos-app-rdf-document.js.map

package/dist/collection/apps/pos-app-rdf-document/pos-app-rdf-document.js.map

@@ -1 +1 @@
-{"version":3,"file":"pos-app-rdf-document.js","sourceRoot":"","sources":["../../../../src/apps/pos-app-rdf-document/pos-app-rdf-document.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAK7C,MAAM,OAAO,iBAAiB;IAC5B,MAAM;QACJ,OAAO,CACL;YACE;gBACE,gEAAS,IAAI,EAAC,IAAI;oBAChB,sEAAgB,CACR;gBACV,gEAAS,IAAI,EAAC,IAAI;oBAChB;wBACE,wEAAiB,KAAK,EAAE,EAAE,GAAG,EAAE,eAAe,EAAE;4BAC9C;gCACE,mEAAa,CACE;4BACjB,yEAAmB;4BACnB,sEAAgB,CACA,CACT,CACH,CACF,CACD,CACZ,CAAC;IACJ,CAAC;;CACF","sourcesContent":["import { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'pos-app-rdf-document',\n})\nexport class PosAppRdfDocument {\n  render() {\n    return (\n      <ion-grid>\n        <ion-row>\n          <ion-col size=\"12\" size-sm>\n            <pos-subjects />\n          </ion-col>\n          <ion-col size=\"12\" size-sm>\n            <ion-card>\n              <ion-card-header style={{ gap: 'var(--size-1)' }}>\n                <ion-card-title>\n                  <pos-label />\n                </ion-card-title>\n                <pos-type-badges />\n                <pos-literals />\n              </ion-card-header>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pos-app-rdf-document.js","sourceRoot":"","sources":["../../../../src/apps/pos-app-rdf-document/pos-app-rdf-document.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,iBAAiB;IAC5B,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH;gBACE,sEAAgB,CACR;YACV;gBACE,mFAAyB,WAAW;oBAClC;wBACE,2DAAI,EAAE,EAAC,WAAW;4BAChB,mEAAa,CACV;wBACL,yEAAmB,CACZ;oBACT,sEAAgB,CACR,CACF,CACL,CACR,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'pos-app-rdf-document',\n  styleUrls: ['../styles/default-app-layout.css', '../styles/article-card.css'],\n  shadow: true,\n})\nexport class PosAppRdfDocument {\n  render() {\n    return (\n      <Host>\n        <section>\n          <pos-subjects />\n        </section>\n        <section>\n          <article aria-labelledby=\"doc-title\">\n            <header>\n              <h1 id=\"doc-title\">\n                <pos-label />\n              </h1>\n              <pos-type-badges />\n            </header>\n            <pos-literals />\n          </article>\n        </section>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/apps/pos-app-settings/pos-app-settings.css

@@ -6,6 +6,4 @@
   justify-content: center;
   align-items: start;
   justify-items: stretch;
-  height: 100%;
-  background: linear-gradient(230deg, rgb(251, 251, 255) 0%, rgb(215, 223, 252) 100%);
 }

package/dist/collection/apps/pos-app-settings/pos-app-settings.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class PosAppSettings {
     render() {
-        return h("pos-setting-offline-cache", { key: '83d824c60d1eb9e2d60b0d7255dda841ad9c6164' });
+        return h("pos-setting-offline-cache", { key: 'f065206f6291089773a19045243f04b6ce35eeb9' });
     }
     static get is() { return "pos-app-settings"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/apps/pos-app-settings/pos-setting-offline-cache/pos-setting-offline-cache.css

@@ -1,10 +1,10 @@
 :host {
-  border: var(--size-px) solid var(--color-grey-100);
+  border: var(--size-px) solid var(--pos-border-color);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-md);
   padding: var(--size-8);
   max-width: var(--size-96);
-  background: var(--color-white);
+  background: var(--pos-card-background);
 }
 
 svg {
@@ -21,8 +21,10 @@ p {
 }
 
 .info {
+  color: var(--color-grey-900);
   background-color: var(--color-blue-200);
 }
 .warn {
+  color: var(--color-grey-900);
   background-color: var(--color-yellow-200);
 }

package/dist/collection/apps/pos-app-settings/pos-setting-offline-cache/pos-setting-offline-cache.js

@@ -2,7 +2,7 @@ import { h, Host } from "@stencil/core";
 import { localSettings } from "../../../store/settings";
 export class PosSettingOfflineCache {
     render() {
-        return (h(Host, { key: 'a98de97ba1e0930b485a4a3610102deb02d927a7' }, h("div", { key: '5cf196a71b95fdfed7e5d990b272e12d2b9dd3ff' }, h("h2", { key: '99ddd9827f3ccc5a5277cc64e3952a3f5170f7bc' }, h("svg", { key: 'd9ce3722957428524cc9b264265320119f2e5c88', xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor" }, h("path", { key: '8e4e7af37df231e3141ba30b17a02517737cbe85', "stroke-linecap": "round", "stroke-linejoin": "round", d: "M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125" })), "Cache Settings"), h("p", { key: '7175929cd9327bc705db305294afa362cb2f648c', class: "info" }, "\u2139 Enable offline cache to be able to access previously loaded data while offline."), h("p", { key: '784fd9141b339165fdab6a98c084430299ff7ed5', class: "warn" }, "\u26A0 Private data may be stored on this device. Only enable it, if you trust this device."), h("label", { key: 'dac2cddf6b6c374d1a2ef3c4d9bad63a9cb7b8d9' }, h("input", { key: 'e39adb18d03ce622a85dd48a28c6d3c0dc2ce7f4', type: "checkbox", checked: localSettings.state.offlineCache, onChange: ev => (localSettings.state.offlineCache = ev.target.checked) }), "Enable offline cache"))));
+        return (h(Host, { key: 'f024e7d542cfc87a4dc0a1f22694b664086ebd60' }, h("div", { key: 'e88e694cefa4a2361ca8c67f1bd023fda1b70f2a' }, h("h2", { key: 'c4b2e6270f26a2eb7f62e5076b40834903fc10e4' }, h("svg", { key: 'd63643c1ed908c6fe9ab4ff6c47b13848c714c32', xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor" }, h("path", { key: '78f055556bb175ea17d0db1ccf78c16343d67d3f', "stroke-linecap": "round", "stroke-linejoin": "round", d: "M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125" })), "Cache Settings"), h("p", { key: '3045ae3214b9e91feb34857ce45a3db6529f2959', class: "info" }, "\u2139 Enable offline cache to be able to access previously loaded data while offline."), h("p", { key: '9987c1cb59b62e1eb06c67a9c646a9a2f125529a', class: "warn" }, "\u26A0 Private data may be stored on this device. Only enable it, if you trust this device."), h("label", { key: '55dd3c0fa7ece9a59437e7818d6cfa9b0e9eb5bf' }, h("input", { key: '22874f8a39b5016b71818fa1d6226bf66ff969c3', type: "checkbox", checked: localSettings.state.offlineCache, onChange: ev => (localSettings.state.offlineCache = ev.target.checked) }), "Enable offline cache"))));
     }
     static get is() { return "pos-setting-offline-cache"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/apps/styles/article-card.css

@@ -0,0 +1,19 @@
+article {
+  padding: var(--size-2);
+  display: flex;
+  flex-direction: column;
+  gap: var(--size-2);
+  outline: var(--pos-border-solid);
+  border-radius: var(--radius-sm);
+  box-shadow: var(--shadow-md);
+  background-color: var(--pos-card-background);
+
+  header {
+    display: flex;
+    flex-direction: column;
+    gap: var(--size-2);
+    h1 {
+      margin: 0;
+    }
+  }
+}

package/dist/collection/apps/styles/default-app-layout.css

@@ -0,0 +1,28 @@
+:host {
+  --gap-size: var(--size-4);
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-size);
+  margin: var(--gap-size);
+}
+
+section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-size);
+}
+
+@media (min-width: 640px) {
+  :host {
+    flex-direction: row;
+    flex-wrap: wrap;
+
+    section:first-of-type {
+      flex: 1;
+    }
+
+    section:not(:first-of-type) {
+      flex: 0 0 30%;
+    }
+  }
+}

package/dist/collection/components/pos-add-literal-value/pos-add-literal-value.css

@@ -3,3 +3,18 @@
   align-items: center;
   gap: 0.2rem;
 }
+
+input {
+  padding: var(--size-2);
+  background-color: transparent;
+  color: var(--pos-normal-text-color);
+  border: none;
+}
+
+input:focus {
+  outline: 2px solid var(--pos-primary-color);
+  background-color: var(--pos-input-background-color);
+  transition:
+    outline 0.1s,
+    background-color 0.1s;
+}

package/dist/collection/components/pos-add-literal-value/pos-add-literal-value.js

@@ -33,14 +33,14 @@ export class PosAddLiteralValue {
     }
     onTermSelected(event) {
         this.selectedTermUri = event.detail.uri;
-        this.valueInput.setFocus();
+        this.valueInput.focus();
     }
     render() {
         var _a;
         if (!((_a = this.resource) === null || _a === void 0 ? void 0 : _a.editable)) {
             return;
         }
-        return (h(Host, null, h("ion-icon", { name: "add-circle-outline" }), h("pos-select-term", { placeholder: "Add literal", "onPod-os:term-selected": ev => this.onTermSelected(ev) }), h("ion-input", { ref: el => (this.valueInput = el), value: this.currentValue, placeholder: "", onIonChange: ev => (this.currentValue = ev.detail.value.toString()), onChange: () => this.save() })));
+        return (h(Host, null, h("ion-icon", { name: "add-circle-outline" }), h("pos-select-term", { placeholder: "Add literal", "onPod-os:term-selected": ev => this.onTermSelected(ev) }), h("input", { ref: el => (this.valueInput = el), value: this.currentValue, placeholder: "", onInput: ev => (this.currentValue = ev.target.value), onChange: () => this.save() })));
     }
     static get is() { return "pos-add-literal-value"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pos-add-literal-value/pos-add-literal-value.js.map

@@ -1 +1 @@
-{"version":3,"file":"pos-add-literal-value.js","sourceRoot":"","sources":["../../../../src/components/pos-add-literal-value/pos-add-literal-value.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAyB,YAAY,EAAE,MAAM,cAAc,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AACtF,OAAO,EAAiC,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACrF,OAAO,EAAuC,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAOjG,MAAM,OAAO,kBAAkB;IAL/B;QAoCE,oBAAe,GAAG,CAAC,QAAe,EAAE,EAAE;YACpC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;QAC3B,CAAC,CAAC;QAEF,iBAAY,GAAG,KAAK,EAAE,EAAS,EAAE,EAAE;YACjC,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;QACf,CAAC,CAAC;KAwCH;IAvDC,OAAO,KAAI,CAAC;IAIZ,iBAAiB;QACf,iBAAiB,CAAC,IAAI,CAAC,CAAC;QACxB,cAAc,CAAC,IAAI,CAAC,CAAC;IACvB,CAAC;IAUD,KAAK,CAAC,IAAI;QACR,IAAI,CAAC;YACH,MAAM,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;YACvF,MAAM,OAAO,GAAY;gBACvB,SAAS,EAAE,IAAI,CAAC,eAAe;gBAC/B,KAAK,EAAE,YAAY,CAAC,IAAI,CAAC,eAAe,CAAC;gBACzC,MAAM,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC;aAC5B,CAAC;YACF,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YACrC,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC;QACzB,CAAC;QAAC,OAAO,GAAG,EAAE,CAAC;YACb,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACvB,CAAC;IACH,CAAC;IAED,cAAc,CAAC,KAAK;QAClB,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC;QACxC,IAAI,CAAC,UAAU,CAAC,QAAQ,EAAE,CAAC;IAC7B,CAAC;IAED,MAAM;;QACJ,IAAI,CAAC,CAAA,MAAA,IAAI,CAAC,QAAQ,0CAAE,QAAQ,CAAA,EAAE,CAAC;YAC7B,OAAO;QACT,CAAC;QACD,OAAO,CACL,EAAC,IAAI;YACH,gBAAU,IAAI,EAAC,oBAAoB,GAAY;YAC/C,uBAAiB,WAAW,EAAC,aAAa,4BAAyB,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,EAAE,CAAC,GAAI;YACpG,iBACE,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC,EACjC,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,WAAW,EAAC,EAAE,EACd,WAAW,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,EACnE,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,GAChB,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Literal, PodOS, Thing, labelFromUri } from '@pod-os/core';\nimport { Component, Host, h, State, Event, Watch, EventEmitter } from '@stencil/core';\nimport { PodOsAware, PodOsEventEmitter, subscribePodOs } from '../events/PodOsAware';\nimport { ResourceAware, ResourceEventEmitter, subscribeResource } from '../events/ResourceAware';\n\n@Component({\n  tag: 'pos-add-literal-value',\n  styleUrl: 'pos-add-literal-value.css',\n  shadow: true,\n})\nexport class PosAddLiteralValue implements ResourceAware, PodOsAware {\n  @State() os: PodOS;\n  @State() resource: Thing;\n\n  @State() currentValue: string;\n  @State() selectedTermUri: string;\n\n  @Event({ eventName: 'pod-os:init' }) subscribePodOs: PodOsEventEmitter;\n\n  @Event({ eventName: 'pod-os:resource' }) subscribeResource: ResourceEventEmitter;\n\n  /**\n   * The entered literal value has been added to the resource and successfully stored to the Pod.\n   */\n  @Event({ eventName: 'pod-os:added-literal-value' }) addedLiteralValue: EventEmitter;\n\n  /**\n   * Something went wrong while adding the literal value.\n   */\n  @Event({ eventName: 'pod-os:error' }) error: EventEmitter;\n\n  @Watch('os')\n  setName() {}\n\n  private valueInput: HTMLIonInputElement;\n\n  componentWillLoad() {\n    subscribeResource(this);\n    subscribePodOs(this);\n  }\n\n  receiveResource = (resource: Thing) => {\n    this.resource = resource;\n  };\n\n  receivePodOs = async (os: PodOS) => {\n    this.os = os;\n  };\n\n  async save() {\n    try {\n      await this.os.addPropertyValue(this.resource, this.selectedTermUri, this.currentValue);\n      const literal: Literal = {\n        predicate: this.selectedTermUri,\n        label: labelFromUri(this.selectedTermUri),\n        values: [this.currentValue],\n      };\n      this.addedLiteralValue.emit(literal);\n      this.currentValue = '';\n    } catch (err) {\n      this.error.emit(err);\n    }\n  }\n\n  onTermSelected(event) {\n    this.selectedTermUri = event.detail.uri;\n    this.valueInput.setFocus();\n  }\n\n  render() {\n    if (!this.resource?.editable) {\n      return;\n    }\n    return (\n      <Host>\n        <ion-icon name=\"add-circle-outline\"></ion-icon>\n        <pos-select-term placeholder=\"Add literal\" onPod-os:term-selected={ev => this.onTermSelected(ev)} />\n        <ion-input\n          ref={el => (this.valueInput = el)}\n          value={this.currentValue}\n          placeholder=\"\"\n          onIonChange={ev => (this.currentValue = ev.detail.value.toString())}\n          onChange={() => this.save()}\n        ></ion-input>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pos-add-literal-value.js","sourceRoot":"","sources":["../../../../src/components/pos-add-literal-value/pos-add-literal-value.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAyB,YAAY,EAAE,MAAM,cAAc,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AACtF,OAAO,EAAiC,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACrF,OAAO,EAAuC,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAOjG,MAAM,OAAO,kBAAkB;IAL/B;QAoCE,oBAAe,GAAG,CAAC,QAAe,EAAE,EAAE;YACpC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;QAC3B,CAAC,CAAC;QAEF,iBAAY,GAAG,KAAK,EAAE,EAAS,EAAE,EAAE;YACjC,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;QACf,CAAC,CAAC;KAwCH;IAvDC,OAAO,KAAI,CAAC;IAIZ,iBAAiB;QACf,iBAAiB,CAAC,IAAI,CAAC,CAAC;QACxB,cAAc,CAAC,IAAI,CAAC,CAAC;IACvB,CAAC;IAUD,KAAK,CAAC,IAAI;QACR,IAAI,CAAC;YACH,MAAM,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;YACvF,MAAM,OAAO,GAAY;gBACvB,SAAS,EAAE,IAAI,CAAC,eAAe;gBAC/B,KAAK,EAAE,YAAY,CAAC,IAAI,CAAC,eAAe,CAAC;gBACzC,MAAM,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC;aAC5B,CAAC;YACF,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YACrC,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC;QACzB,CAAC;QAAC,OAAO,GAAG,EAAE,CAAC;YACb,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACvB,CAAC;IACH,CAAC;IAED,cAAc,CAAC,KAAK;QAClB,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC;QACxC,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC;IAC1B,CAAC;IAED,MAAM;;QACJ,IAAI,CAAC,CAAA,MAAA,IAAI,CAAC,QAAQ,0CAAE,QAAQ,CAAA,EAAE,CAAC;YAC7B,OAAO;QACT,CAAC;QACD,OAAO,CACL,EAAC,IAAI;YACH,gBAAU,IAAI,EAAC,oBAAoB,GAAY;YAC/C,uBAAiB,WAAW,EAAC,aAAa,4BAAyB,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,EAAE,CAAC,GAAI;YACpG,aACE,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC,EACjC,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,WAAW,EAAC,EAAE,EACd,OAAO,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY,GAAI,EAAE,CAAC,MAA2B,CAAC,KAAK,CAAC,EAC1E,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,GACpB,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Literal, PodOS, Thing, labelFromUri } from '@pod-os/core';\nimport { Component, Host, h, State, Event, Watch, EventEmitter } from '@stencil/core';\nimport { PodOsAware, PodOsEventEmitter, subscribePodOs } from '../events/PodOsAware';\nimport { ResourceAware, ResourceEventEmitter, subscribeResource } from '../events/ResourceAware';\n\n@Component({\n  tag: 'pos-add-literal-value',\n  styleUrl: 'pos-add-literal-value.css',\n  shadow: true,\n})\nexport class PosAddLiteralValue implements ResourceAware, PodOsAware {\n  @State() os: PodOS;\n  @State() resource: Thing;\n\n  @State() currentValue: string;\n  @State() selectedTermUri: string;\n\n  @Event({ eventName: 'pod-os:init' }) subscribePodOs: PodOsEventEmitter;\n\n  @Event({ eventName: 'pod-os:resource' }) subscribeResource: ResourceEventEmitter;\n\n  /**\n   * The entered literal value has been added to the resource and successfully stored to the Pod.\n   */\n  @Event({ eventName: 'pod-os:added-literal-value' }) addedLiteralValue: EventEmitter;\n\n  /**\n   * Something went wrong while adding the literal value.\n   */\n  @Event({ eventName: 'pod-os:error' }) error: EventEmitter;\n\n  @Watch('os')\n  setName() {}\n\n  private valueInput: HTMLInputElement;\n\n  componentWillLoad() {\n    subscribeResource(this);\n    subscribePodOs(this);\n  }\n\n  receiveResource = (resource: Thing) => {\n    this.resource = resource;\n  };\n\n  receivePodOs = async (os: PodOS) => {\n    this.os = os;\n  };\n\n  async save() {\n    try {\n      await this.os.addPropertyValue(this.resource, this.selectedTermUri, this.currentValue);\n      const literal: Literal = {\n        predicate: this.selectedTermUri,\n        label: labelFromUri(this.selectedTermUri),\n        values: [this.currentValue],\n      };\n      this.addedLiteralValue.emit(literal);\n      this.currentValue = '';\n    } catch (err) {\n      this.error.emit(err);\n    }\n  }\n\n  onTermSelected(event) {\n    this.selectedTermUri = event.detail.uri;\n    this.valueInput.focus();\n  }\n\n  render() {\n    if (!this.resource?.editable) {\n      return;\n    }\n    return (\n      <Host>\n        <ion-icon name=\"add-circle-outline\"></ion-icon>\n        <pos-select-term placeholder=\"Add literal\" onPod-os:term-selected={ev => this.onTermSelected(ev)} />\n        <input\n          ref={el => (this.valueInput = el)}\n          value={this.currentValue}\n          placeholder=\"\"\n          onInput={ev => (this.currentValue = (ev.target as HTMLInputElement).value)}\n          onChange={() => this.save()}\n        ></input>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/pos-add-new-thing/pos-add-new-thing.css

@@ -12,12 +12,13 @@ button#new {
   width: var(--scale-5);
   height: var(--scale-5);
   background-color: var(--pos-primary-color);
-  color: var(--color-grey-50);
+  color: var(--pos-primary-text-color);
   font-size: var(--scale-6);
   border-radius: var(--radius-xs);
 }
 
-button#new:hover, button#new:focus {
+button#new:hover,
+button#new:focus {
   outline: none;
   filter: brightness(110%);
   box-shadow: var(--shadow-sm);
@@ -26,4 +27,3 @@ button#new:hover, button#new:focus {
 pos-new-thing-form {
   margin: var(--scale-3);
 }
-

package/dist/collection/components/pos-add-new-thing/pos-add-new-thing.js

@@ -4,7 +4,7 @@ export class PosAddNewThing {
         this.dialog.showModal();
     }
     render() {
-        return (h(Host, { key: '4adcc80d1a0d810279a85be26c8ec6717d91c8a2' }, h("button", { key: '9a3cdd12719c4d3e4ae1e0eff60ccd6101395d92', id: "new", title: "Add a new thing", onClick: () => this.openDialog() }, h("ion-icon", { key: 'efb2723db05962c02293931d0a334ba55908f596', name: "add-circle-outline" })), h("pos-dialog", { key: '954a947b2dc4082519c50cb71a4b6f0f3550c0fb', ref: el => (this.dialog = el) }, h("span", { key: '0a7e91bab3d8740bc8228782d70a980779db7ca1', slot: "title" }, "Add a new thing"), h("pos-new-thing-form", { key: '66ac9bcf72a71b58f4dbbc5cfd214b3609c78cbf', slot: "content", referenceUri: this.referenceUri }))));
+        return (h(Host, { key: '6142a141ef03ca93a362a6b00ebe8d515c3a677a' }, h("button", { key: '72ecf353cd3a7d2d68f9ef28eb1bbe7fdb88b700', id: "new", title: "Add a new thing", onClick: () => this.openDialog() }, h("ion-icon", { key: 'bd05d75c42c10de6df519575787fc66eafb22930', name: "add-circle-outline" })), h("pos-dialog", { key: '23cf0118149704dfca16758970e4f4658e87e946', ref: el => (this.dialog = el) }, h("span", { key: '5af7b7f618cc20684c39134b5ea295400e651cb6', slot: "title" }, "Add a new thing"), h("pos-new-thing-form", { key: '895496c2f6ede3c8677d9d918e0b13582090baed', slot: "content", referenceUri: this.referenceUri }))));
     }
     static get is() { return "pos-add-new-thing"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pos-app/pos-app.js

@@ -49,7 +49,7 @@ export class PosApp {
         }
     }
     render() {
-        return h("slot", { key: 'eb7dfaa67c538b3e3e33f42556c1b604fc964729' });
+        return h("slot", { key: '988c393af75e8bd0f4ff2b4c04fe33b1ed686fa7' });
     }
     static get is() { return "pos-app"; }
     static get properties() {

package/dist/collection/components/pos-container-contents/pos-container-contents.css

@@ -7,4 +7,4 @@ ul {
 li {
   padding: 0;
   margin: 0;
-} 
+}

package/dist/collection/components/pos-container-contents/pos-container-contents.js.map

@@ -1 +1 @@
-{"version":3,"file":"pos-container-contents.js","sourceRoot":"","sources":["../../../../src/components/pos-container-contents/pos-container-contents.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA2B,YAAY,EAAE,MAAM,cAAc,CAAC;AACrE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACzE,OAAO,EAAiB,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAO3E,MAAM,OAAO,oBAAoB;IALjC;QAMW,aAAQ,GAAuB,EAAE,CAAC;QAElC,YAAO,GAAG,IAAI,CAAC;QASxB,oBAAe,GAAG,CAAC,QAAe,EAAE,EAAE;YACpC,MAAM,GAAG,GAAG,QAAQ,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;YAC1C,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;YACrB,IAAI,CAAC,QAAQ,GAAG,GAAG,CAAC,QAAQ,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;QAC9E,CAAC,CAAC;KAeH;IAvBC,iBAAiB;QACf,iBAAiB,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC;IAQD,MAAM;QACJ,IAAI,IAAI,CAAC,OAAO;YAAE,OAAO,IAAI,CAAC;QAC9B,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,CACpC;YACE,oBAAc,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE,CAAC,GAAG;gBACnC,8BACG,EAAE,CAAC,IAAI,CACW,CACR,CACZ,CACN,CAAC,CAAC;QACH,OAAO,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,cAAK,KAAK,CAAM,CAAC,CAAC,CAAC,sCAA6B,CAAC;IACrF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Thing, ContainerContent, LdpContainer } from '@pod-os/core';\nimport { Component, Event, EventEmitter, h, State } from '@stencil/core';\nimport { ResourceAware, subscribeResource } from '../events/ResourceAware';\n\n@Component({\n  tag: 'pos-container-contents',\n  shadow: true,\n  styleUrl: 'pos-container-contents.css'\n})\nexport class PosContainerContents implements ResourceAware {\n  @State() contents: ContainerContent[] = [];\n\n  @State() loading = true;\n\n  @Event({ eventName: 'pod-os:resource' })\n  subscribeResource: EventEmitter;\n\n  componentWillLoad() {\n    subscribeResource(this);\n  }\n\n  receiveResource = (resource: Thing) => {\n    const doc = resource.assume(LdpContainer);\n    this.loading = false;\n    this.contents = doc.contains().sort((a, b) => a.name.localeCompare(b.name));\n  };\n\n  render() {\n    if (this.loading) return null;\n    const items = this.contents.map(it => (\n      <li>\n        <pos-resource lazy={true} uri={it.uri}>\n          <pos-container-item>\n            {it.name}\n          </pos-container-item>\n        </pos-resource>\n      </li>\n    ));\n    return this.contents.length > 0 ? <ul>{items}</ul> : <p>The container is empty</p>;\n  }\n}\n"]}
+{"version":3,"file":"pos-container-contents.js","sourceRoot":"","sources":["../../../../src/components/pos-container-contents/pos-container-contents.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA2B,YAAY,EAAE,MAAM,cAAc,CAAC;AACrE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACzE,OAAO,EAAiB,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAO3E,MAAM,OAAO,oBAAoB;IALjC;QAMW,aAAQ,GAAuB,EAAE,CAAC;QAElC,YAAO,GAAG,IAAI,CAAC;QASxB,oBAAe,GAAG,CAAC,QAAe,EAAE,EAAE;YACpC,MAAM,GAAG,GAAG,QAAQ,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;YAC1C,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;YACrB,IAAI,CAAC,QAAQ,GAAG,GAAG,CAAC,QAAQ,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;QAC9E,CAAC,CAAC;KAaH;IArBC,iBAAiB;QACf,iBAAiB,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC;IAQD,MAAM;QACJ,IAAI,IAAI,CAAC,OAAO;YAAE,OAAO,IAAI,CAAC;QAC9B,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,CACpC;YACE,oBAAc,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE,CAAC,GAAG;gBACnC,8BAAqB,EAAE,CAAC,IAAI,CAAsB,CACrC,CACZ,CACN,CAAC,CAAC;QACH,OAAO,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,cAAK,KAAK,CAAM,CAAC,CAAC,CAAC,sCAA6B,CAAC;IACrF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Thing, ContainerContent, LdpContainer } from '@pod-os/core';\nimport { Component, Event, EventEmitter, h, State } from '@stencil/core';\nimport { ResourceAware, subscribeResource } from '../events/ResourceAware';\n\n@Component({\n  tag: 'pos-container-contents',\n  shadow: true,\n  styleUrl: 'pos-container-contents.css',\n})\nexport class PosContainerContents implements ResourceAware {\n  @State() contents: ContainerContent[] = [];\n\n  @State() loading = true;\n\n  @Event({ eventName: 'pod-os:resource' })\n  subscribeResource: EventEmitter;\n\n  componentWillLoad() {\n    subscribeResource(this);\n  }\n\n  receiveResource = (resource: Thing) => {\n    const doc = resource.assume(LdpContainer);\n    this.loading = false;\n    this.contents = doc.contains().sort((a, b) => a.name.localeCompare(b.name));\n  };\n\n  render() {\n    if (this.loading) return null;\n    const items = this.contents.map(it => (\n      <li>\n        <pos-resource lazy={true} uri={it.uri}>\n          <pos-container-item>{it.name}</pos-container-item>\n        </pos-resource>\n      </li>\n    ));\n    return this.contents.length > 0 ? <ul>{items}</ul> : <p>The container is empty</p>;\n  }\n}\n"]}

package/dist/collection/components/pos-container-contents/pos-container-item.css

@@ -0,0 +1,16 @@
+:host {
+  display: flex;
+}
+
+a {
+  display: flex;
+  text-decoration: none;
+  padding: var(--size-4);
+  width: var(--size-full);
+  gap: var(--size-2);
+  color: var(--pos-normal-text-color);
+  background-color: var(--pos-background-color);
+  &:hover {
+    background-color: var(--pos-border-color);
+  }
+}

package/dist/collection/components/pos-container-contents/pos-container-item.js

@@ -14,13 +14,23 @@ export class PosContainerItem {
         if (!this.resource)
             return null;
         const iconName = selectIconForTypes(this.resource.types());
-        return (h("ion-item", { href: this.resource.uri, onClick: e => {
+        return (h("a", { href: this.resource.uri, onClick: e => {
                 e.preventDefault();
                 this.linkEmitter.emit(this.resource.uri);
             } }, h("ion-icon", { name: iconName, slot: "start" }), h("slot", null)));
     }
     static get is() { return "pos-container-item"; }
     static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pos-container-item.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pos-container-item.css"]
+        };
+    }
     static get states() {
         return {
             "resource": {}