npm - @dso-toolkit/core - Versions diffs - 67.3.1 → 67.3.2 - Mend

@dso-toolkit/core 67.3.1 → 67.3.2

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.

Files changed (682) hide show

package/dist/components/icon.js CHANGED Viewed

@@ -652,7 +652,6 @@ const Icon = /*@__PURE__*/ proxyCustomElement(class Icon extends HTMLElement {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.icon = undefined;
     }
     render() {
         if (this.icon) {

package/dist/components/icon.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"icon.js","mappings":"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","names":[],"sources":["src/components/icon/icon.scss?tag=dso-icon&encapsulation=shadow","src/components/icon/icon.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/icon\";\r\n\r\n:host {\r\n display: inline-block;\r\n block-size: icon.$size;\r\n vertical-align: icon.$vertical-align;\r\n inline-size: icon.$size;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.icon-container {\r\n display: block;\r\n line-height: 0;\r\n}\r\n","import { Component, h, Prop } from \"@stencil/core\";\r\n\r\nimport air from \"dso-toolkit/src/icons/air.svg\";\r\nimport angleDown from \"dso-toolkit/src/icons/angle-down.svg\";\r\nimport angleLeft from \"dso-toolkit/src/icons/angle-left.svg\";\r\nimport angleRight from \"dso-toolkit/src/icons/angle-right.svg\";\r\nimport angleUp from \"dso-toolkit/src/icons/angle-up.svg\";\r\nimport asterisk from \"dso-toolkit/src/icons/asterisk.svg\";\r\nimport balloon from \"dso-toolkit/src/icons/balloon.svg\";\r\nimport bars from \"dso-toolkit/src/icons/bars.svg\";\r\nimport buildings from \"dso-toolkit/src/icons/buildings.svg\";\r\nimport calendar from \"dso-toolkit/src/icons/calendar.svg\";\r\nimport call from \"dso-toolkit/src/icons/call.svg\";\r\nimport caretDown from \"dso-toolkit/src/icons/caret-down.svg\";\r\nimport check from \"dso-toolkit/src/icons/check.svg\";\r\nimport checkCircle from \"dso-toolkit/src/icons/check-circle.svg\";\r\nimport chevronDown from \"dso-toolkit/src/icons/chevron-down.svg\";\r\nimport chevronLeft from \"dso-toolkit/src/icons/chevron-left.svg\";\r\nimport chevronRight from \"dso-toolkit/src/icons/chevron-right.svg\";\r\nimport chevronUp from \"dso-toolkit/src/icons/chevron-up.svg\";\r\nimport circleNotch from \"dso-toolkit/src/icons/circle-notch.svg\";\r\nimport clock from \"dso-toolkit/src/icons/clock.svg\";\r\nimport copy from \"dso-toolkit/src/icons/copy.svg\";\r\nimport crown from \"dso-toolkit/src/icons/crown.svg\";\r\nimport cultural from \"dso-toolkit/src/icons/cultural.svg\";\r\nimport document from \"dso-toolkit/src/icons/document.svg\";\r\nimport download from \"dso-toolkit/src/icons/download.svg\";\r\nimport email from \"dso-toolkit/src/icons/email.svg\";\r\nimport energy from \"dso-toolkit/src/icons/energy.svg\";\r\nimport environment from \"dso-toolkit/src/icons/environment.svg\";\r\nimport exclamation from \"dso-toolkit/src/icons/exclamation.svg\";\r\nimport externalLink from \"dso-toolkit/src/icons/external-link.svg\";\r\nimport eyeSlash from \"dso-toolkit/src/icons/eye-slash.svg\";\r\nimport eye from \"dso-toolkit/src/icons/eye.svg\";\r\nimport filter from \"dso-toolkit/src/icons/filter.svg\";\r\nimport forbidden from \"dso-toolkit/src/icons/forbidden.svg\";\r\nimport health from \"dso-toolkit/src/icons/health.svg\";\r\nimport helpActive from \"dso-toolkit/src/icons/help-active.svg\";\r\nimport help from \"dso-toolkit/src/icons/help.svg\";\r\nimport house from \"dso-toolkit/src/icons/house.svg\";\r\nimport infoActive from \"dso-toolkit/src/icons/info-active.svg\";\r\nimport infoI from \"dso-toolkit/src/icons/info-i.svg\";\r\nimport info from \"dso-toolkit/src/icons/info.svg\";\r\nimport infrastructure from \"dso-toolkit/src/icons/infrastructure.svg\";\r\nimport label from \"dso-toolkit/src/icons/label.svg\";\r\nimport land from \"dso-toolkit/src/icons/land.svg\";\r\nimport landscape from \"dso-toolkit/src/icons/landscape.svg\";\r\nimport layers from \"dso-toolkit/src/icons/layers.svg\";\r\nimport location from \"dso-toolkit/src/icons/location.svg\";\r\nimport locationOutline from \"dso-toolkit/src/icons/location-outline.svg\";\r\nimport locationSearch from \"dso-toolkit/src/icons/location-search.svg\";\r\nimport lock from \"dso-toolkit/src/icons/lock.svg\";\r\nimport magnet from \"dso-toolkit/src/icons/magnet.svg\";\r\nimport mapLayers from \"dso-toolkit/src/icons/map-layers.svg\";\r\nimport mapLocation from \"dso-toolkit/src/icons/map-location.svg\";\r\nimport marker from \"dso-toolkit/src/icons/marker.svg\";\r\nimport measurement from \"dso-toolkit/src/icons/measurement.svg\";\r\nimport minusCircle from \"dso-toolkit/src/icons/minus-circle.svg\";\r\nimport minusSquare from \"dso-toolkit/src/icons/minus-square.svg\";\r\nimport minus from \"dso-toolkit/src/icons/minus.svg\";\r\nimport more from \"dso-toolkit/src/icons/more.svg\";\r\nimport municipality from \"dso-toolkit/src/icons/municipality.svg\";\r\nimport nature from \"dso-toolkit/src/icons/nature.svg\";\r\nimport newWindow from \"dso-toolkit/src/icons/new-window.svg\";\r\nimport paperclip from \"dso-toolkit/src/icons/paperclip.svg\";\r\nimport parking from \"dso-toolkit/src/icons/parking.svg\";\r\nimport pencil from \"dso-toolkit/src/icons/pencil.svg\";\r\nimport pin from \"dso-toolkit/src/icons/pin.svg\";\r\nimport pinOutline from \"dso-toolkit/src/icons/pin-outline.svg\";\r\nimport plusCircle from \"dso-toolkit/src/icons/plus-circle.svg\";\r\nimport plusSquare from \"dso-toolkit/src/icons/plus-square.svg\";\r\nimport plus from \"dso-toolkit/src/icons/plus.svg\";\r\nimport print from \"dso-toolkit/src/icons/print.svg\";\r\nimport procedures from \"dso-toolkit/src/icons/procedures.svg\";\r\nimport redo from \"dso-toolkit/src/icons/redo.svg\";\r\nimport safety from \"dso-toolkit/src/icons/safety.svg\";\r\nimport search from \"dso-toolkit/src/icons/search.svg\";\r\nimport scale from \"dso-toolkit/src/icons/scale.svg\";\r\nimport sitemap from \"dso-toolkit/src/icons/sitemap.svg\";\r\nimport soil from \"dso-toolkit/src/icons/soil.svg\";\r\nimport sortAscending from \"dso-toolkit/src/icons/sort-ascending.svg\";\r\nimport sortDescending from \"dso-toolkit/src/icons/sort-descending.svg\";\r\nimport sort from \"dso-toolkit/src/icons/sort.svg\";\r\nimport sound from \"dso-toolkit/src/icons/sound.svg\";\r\nimport spinner from \"dso-toolkit/src/icons/spinner.svg\";\r\nimport statusError from \"dso-toolkit/src/icons/status-error.svg\";\r\nimport statusDanger from \"dso-toolkit/src/icons/status-danger.svg\";\r\nimport statusInfo from \"dso-toolkit/src/icons/status-info.svg\";\r\nimport statusSuccess from \"dso-toolkit/src/icons/status-success.svg\";\r\nimport statusWarning from \"dso-toolkit/src/icons/status-warning.svg\";\r\nimport statusWarningInline from \"dso-toolkit/src/icons/status-warning-inline.svg\";\r\nimport statusWarningInlineNegative from \"dso-toolkit/src/icons/status-warning-inline-negative.svg\";\r\nimport table from \"dso-toolkit/src/icons/table.svg\";\r\nimport times from \"dso-toolkit/src/icons/times.svg\";\r\nimport trash from \"dso-toolkit/src/icons/trash.svg\";\r\nimport undo from \"dso-toolkit/src/icons/undo.svg\";\r\nimport userLine from \"dso-toolkit/src/icons/user-line.svg\";\r\nimport user from \"dso-toolkit/src/icons/user.svg\";\r\nimport users from \"dso-toolkit/src/icons/users.svg\";\r\nimport water from \"dso-toolkit/src/icons/water.svg\";\r\nimport wipWip from \"dso-toolkit/src/icons/wip-wip.svg\";\r\n\r\nconst icons = [\r\n { alias: \"air\", svg: air },\r\n { alias: \"angle-down\", svg: angleDown },\r\n { alias: \"angle-left\", svg: angleLeft },\r\n { alias: \"angle-right\", svg: angleRight },\r\n { alias: \"angle-up\", svg: angleUp },\r\n { alias: \"asterisk\", svg: asterisk },\r\n { alias: \"balloon\", svg: balloon },\r\n { alias: \"bars\", svg: bars },\r\n { alias: \"buildings\", svg: buildings },\r\n { alias: \"calendar\", svg: calendar },\r\n { alias: \"call\", svg: call },\r\n { alias: \"caret-down\", svg: caretDown },\r\n { alias: \"check\", svg: check },\r\n { alias: \"check-circle\", svg: checkCircle },\r\n { alias: \"chevron-down\", svg: chevronDown },\r\n { alias: \"chevron-left\", svg: chevronLeft },\r\n { alias: \"chevron-right\", svg: chevronRight },\r\n { alias: \"chevron-up\", svg: chevronUp },\r\n { alias: \"circle-notch\", svg: circleNotch },\r\n { alias: \"clock\", svg: clock },\r\n { alias: \"copy\", svg: copy },\r\n { alias: \"crown\", svg: crown },\r\n { alias: \"cultural\", svg: cultural },\r\n { alias: \"document\", svg: document },\r\n { alias: \"download\", svg: download },\r\n { alias: \"email\", svg: email },\r\n { alias: \"energy\", svg: energy },\r\n { alias: \"environment\", svg: environment },\r\n { alias: \"exclamation\", svg: exclamation },\r\n { alias: \"external-link\", svg: externalLink },\r\n { alias: \"eye-slash\", svg: eyeSlash },\r\n { alias: \"eye\", svg: eye },\r\n { alias: \"filter\", svg: filter },\r\n { alias: \"forbidden\", svg: forbidden },\r\n { alias: \"health\", svg: health },\r\n { alias: \"help-active\", svg: helpActive },\r\n { alias: \"help\", svg: help },\r\n { alias: \"house\", svg: house },\r\n { alias: \"info-active\", svg: infoActive },\r\n { alias: \"info-i\", svg: infoI },\r\n { alias: \"info\", svg: info },\r\n { alias: \"infrastructure\", svg: infrastructure },\r\n { alias: \"label\", svg: label },\r\n { alias: \"land\", svg: land },\r\n { alias: \"landscape\", svg: landscape },\r\n { alias: \"layers\", svg: layers },\r\n { alias: \"location\", svg: location },\r\n { alias: \"location-outline\", svg: locationOutline },\r\n { alias: \"location-search\", svg: locationSearch },\r\n { alias: \"lock\", svg: lock },\r\n { alias: \"magnet\", svg: magnet },\r\n { alias: \"map-layers\", svg: mapLayers },\r\n { alias: \"map-location\", svg: mapLocation },\r\n { alias: \"marker\", svg: marker },\r\n { alias: \"measurement\", svg: measurement },\r\n { alias: \"minus-circle\", svg: minusCircle },\r\n { alias: \"minus-square\", svg: minusSquare },\r\n { alias: \"minus\", svg: minus },\r\n { alias: \"more\", svg: more },\r\n { alias: \"municipality\", svg: municipality },\r\n { alias: \"nature\", svg: nature },\r\n { alias: \"new-window\", svg: newWindow },\r\n { alias: \"paperclip\", svg: paperclip },\r\n { alias: \"parking\", svg: parking },\r\n { alias: \"pencil\", svg: pencil },\r\n { alias: \"pin\", svg: pin },\r\n { alias: \"pin-outline\", svg: pinOutline },\r\n { alias: \"plus-circle\", svg: plusCircle },\r\n { alias: \"plus-square\", svg: plusSquare },\r\n { alias: \"plus\", svg: plus },\r\n { alias: \"print\", svg: print },\r\n { alias: \"procedures\", svg: procedures },\r\n { alias: \"spinner\", svg: spinner },\r\n { alias: \"redo\", svg: redo },\r\n { alias: \"safety\", svg: safety },\r\n { alias: \"scale\", svg: scale },\r\n { alias: \"search\", svg: search },\r\n { alias: \"sitemap\", svg: sitemap },\r\n { alias: \"soil\", svg: soil },\r\n { alias: \"sort-ascending\", svg: sortAscending },\r\n { alias: \"sort-descending\", svg: sortDescending },\r\n { alias: \"sort\", svg: sort },\r\n { alias: \"sound\", svg: sound },\r\n { alias: \"status-danger\", svg: statusDanger },\r\n { alias: \"status-error\", svg: statusError },\r\n { alias: \"status-info\", svg: statusInfo },\r\n { alias: \"status-success\", svg: statusSuccess },\r\n { alias: \"status-warning\", svg: statusWarning },\r\n { alias: \"status-warning-inline\", svg: statusWarningInline },\r\n { alias: \"status-warning-inline-negative\", svg: statusWarningInlineNegative },\r\n { alias: \"table\", svg: table },\r\n { alias: \"times\", svg: times },\r\n { alias: \"trash\", svg: trash },\r\n { alias: \"undo\", svg: undo },\r\n { alias: \"user-line\", svg: userLine },\r\n { alias: \"user\", svg: user },\r\n { alias: \"users\", svg: users },\r\n { alias: \"water\", svg: water },\r\n { alias: \"wip-wip\", svg: wipWip },\r\n];\r\n\r\n@Component({\r\n tag: \"dso-icon\",\r\n styleUrl: \"./icon.scss\",\r\n shadow: true,\r\n})\r\nexport class Icon {\r\n /*\r\n The alias of the icon.\r\n */\r\n @Prop()\r\n icon?: string;\r\n\r\n render() {\r\n if (this.icon) {\r\n const icon = icons.find((i) => i.alias === this.icon);\r\n if (!icon) {\r\n throw new TypeError(`Unknown svg: ${this.icon}`);\r\n }\r\n\r\n return <span class=\"icon-container\" innerHTML={icon.svg} />;\r\n }\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"icon.js","mappings":"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","names":[],"sources":["src/components/icon/icon.scss?tag=dso-icon&encapsulation=shadow","src/components/icon/icon.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/icon\";\r\n\r\n:host {\r\n display: inline-block;\r\n block-size: icon.$size;\r\n vertical-align: icon.$vertical-align;\r\n inline-size: icon.$size;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.icon-container {\r\n display: block;\r\n line-height: 0;\r\n}\r\n","import { Component, h, Prop } from \"@stencil/core\";\r\n\r\nimport air from \"dso-toolkit/src/icons/air.svg\";\r\nimport angleDown from \"dso-toolkit/src/icons/angle-down.svg\";\r\nimport angleLeft from \"dso-toolkit/src/icons/angle-left.svg\";\r\nimport angleRight from \"dso-toolkit/src/icons/angle-right.svg\";\r\nimport angleUp from \"dso-toolkit/src/icons/angle-up.svg\";\r\nimport asterisk from \"dso-toolkit/src/icons/asterisk.svg\";\r\nimport balloon from \"dso-toolkit/src/icons/balloon.svg\";\r\nimport bars from \"dso-toolkit/src/icons/bars.svg\";\r\nimport buildings from \"dso-toolkit/src/icons/buildings.svg\";\r\nimport calendar from \"dso-toolkit/src/icons/calendar.svg\";\r\nimport call from \"dso-toolkit/src/icons/call.svg\";\r\nimport caretDown from \"dso-toolkit/src/icons/caret-down.svg\";\r\nimport check from \"dso-toolkit/src/icons/check.svg\";\r\nimport checkCircle from \"dso-toolkit/src/icons/check-circle.svg\";\r\nimport chevronDown from \"dso-toolkit/src/icons/chevron-down.svg\";\r\nimport chevronLeft from \"dso-toolkit/src/icons/chevron-left.svg\";\r\nimport chevronRight from \"dso-toolkit/src/icons/chevron-right.svg\";\r\nimport chevronUp from \"dso-toolkit/src/icons/chevron-up.svg\";\r\nimport circleNotch from \"dso-toolkit/src/icons/circle-notch.svg\";\r\nimport clock from \"dso-toolkit/src/icons/clock.svg\";\r\nimport copy from \"dso-toolkit/src/icons/copy.svg\";\r\nimport crown from \"dso-toolkit/src/icons/crown.svg\";\r\nimport cultural from \"dso-toolkit/src/icons/cultural.svg\";\r\nimport document from \"dso-toolkit/src/icons/document.svg\";\r\nimport download from \"dso-toolkit/src/icons/download.svg\";\r\nimport email from \"dso-toolkit/src/icons/email.svg\";\r\nimport energy from \"dso-toolkit/src/icons/energy.svg\";\r\nimport environment from \"dso-toolkit/src/icons/environment.svg\";\r\nimport exclamation from \"dso-toolkit/src/icons/exclamation.svg\";\r\nimport externalLink from \"dso-toolkit/src/icons/external-link.svg\";\r\nimport eyeSlash from \"dso-toolkit/src/icons/eye-slash.svg\";\r\nimport eye from \"dso-toolkit/src/icons/eye.svg\";\r\nimport filter from \"dso-toolkit/src/icons/filter.svg\";\r\nimport forbidden from \"dso-toolkit/src/icons/forbidden.svg\";\r\nimport health from \"dso-toolkit/src/icons/health.svg\";\r\nimport helpActive from \"dso-toolkit/src/icons/help-active.svg\";\r\nimport help from \"dso-toolkit/src/icons/help.svg\";\r\nimport house from \"dso-toolkit/src/icons/house.svg\";\r\nimport infoActive from \"dso-toolkit/src/icons/info-active.svg\";\r\nimport infoI from \"dso-toolkit/src/icons/info-i.svg\";\r\nimport info from \"dso-toolkit/src/icons/info.svg\";\r\nimport infrastructure from \"dso-toolkit/src/icons/infrastructure.svg\";\r\nimport label from \"dso-toolkit/src/icons/label.svg\";\r\nimport land from \"dso-toolkit/src/icons/land.svg\";\r\nimport landscape from \"dso-toolkit/src/icons/landscape.svg\";\r\nimport layers from \"dso-toolkit/src/icons/layers.svg\";\r\nimport location from \"dso-toolkit/src/icons/location.svg\";\r\nimport locationOutline from \"dso-toolkit/src/icons/location-outline.svg\";\r\nimport locationSearch from \"dso-toolkit/src/icons/location-search.svg\";\r\nimport lock from \"dso-toolkit/src/icons/lock.svg\";\r\nimport magnet from \"dso-toolkit/src/icons/magnet.svg\";\r\nimport mapLayers from \"dso-toolkit/src/icons/map-layers.svg\";\r\nimport mapLocation from \"dso-toolkit/src/icons/map-location.svg\";\r\nimport marker from \"dso-toolkit/src/icons/marker.svg\";\r\nimport measurement from \"dso-toolkit/src/icons/measurement.svg\";\r\nimport minusCircle from \"dso-toolkit/src/icons/minus-circle.svg\";\r\nimport minusSquare from \"dso-toolkit/src/icons/minus-square.svg\";\r\nimport minus from \"dso-toolkit/src/icons/minus.svg\";\r\nimport more from \"dso-toolkit/src/icons/more.svg\";\r\nimport municipality from \"dso-toolkit/src/icons/municipality.svg\";\r\nimport nature from \"dso-toolkit/src/icons/nature.svg\";\r\nimport newWindow from \"dso-toolkit/src/icons/new-window.svg\";\r\nimport paperclip from \"dso-toolkit/src/icons/paperclip.svg\";\r\nimport parking from \"dso-toolkit/src/icons/parking.svg\";\r\nimport pencil from \"dso-toolkit/src/icons/pencil.svg\";\r\nimport pin from \"dso-toolkit/src/icons/pin.svg\";\r\nimport pinOutline from \"dso-toolkit/src/icons/pin-outline.svg\";\r\nimport plusCircle from \"dso-toolkit/src/icons/plus-circle.svg\";\r\nimport plusSquare from \"dso-toolkit/src/icons/plus-square.svg\";\r\nimport plus from \"dso-toolkit/src/icons/plus.svg\";\r\nimport print from \"dso-toolkit/src/icons/print.svg\";\r\nimport procedures from \"dso-toolkit/src/icons/procedures.svg\";\r\nimport redo from \"dso-toolkit/src/icons/redo.svg\";\r\nimport safety from \"dso-toolkit/src/icons/safety.svg\";\r\nimport search from \"dso-toolkit/src/icons/search.svg\";\r\nimport scale from \"dso-toolkit/src/icons/scale.svg\";\r\nimport sitemap from \"dso-toolkit/src/icons/sitemap.svg\";\r\nimport soil from \"dso-toolkit/src/icons/soil.svg\";\r\nimport sortAscending from \"dso-toolkit/src/icons/sort-ascending.svg\";\r\nimport sortDescending from \"dso-toolkit/src/icons/sort-descending.svg\";\r\nimport sort from \"dso-toolkit/src/icons/sort.svg\";\r\nimport sound from \"dso-toolkit/src/icons/sound.svg\";\r\nimport spinner from \"dso-toolkit/src/icons/spinner.svg\";\r\nimport statusError from \"dso-toolkit/src/icons/status-error.svg\";\r\nimport statusDanger from \"dso-toolkit/src/icons/status-danger.svg\";\r\nimport statusInfo from \"dso-toolkit/src/icons/status-info.svg\";\r\nimport statusSuccess from \"dso-toolkit/src/icons/status-success.svg\";\r\nimport statusWarning from \"dso-toolkit/src/icons/status-warning.svg\";\r\nimport statusWarningInline from \"dso-toolkit/src/icons/status-warning-inline.svg\";\r\nimport statusWarningInlineNegative from \"dso-toolkit/src/icons/status-warning-inline-negative.svg\";\r\nimport table from \"dso-toolkit/src/icons/table.svg\";\r\nimport times from \"dso-toolkit/src/icons/times.svg\";\r\nimport trash from \"dso-toolkit/src/icons/trash.svg\";\r\nimport undo from \"dso-toolkit/src/icons/undo.svg\";\r\nimport userLine from \"dso-toolkit/src/icons/user-line.svg\";\r\nimport user from \"dso-toolkit/src/icons/user.svg\";\r\nimport users from \"dso-toolkit/src/icons/users.svg\";\r\nimport water from \"dso-toolkit/src/icons/water.svg\";\r\nimport wipWip from \"dso-toolkit/src/icons/wip-wip.svg\";\r\n\r\nconst icons = [\r\n { alias: \"air\", svg: air },\r\n { alias: \"angle-down\", svg: angleDown },\r\n { alias: \"angle-left\", svg: angleLeft },\r\n { alias: \"angle-right\", svg: angleRight },\r\n { alias: \"angle-up\", svg: angleUp },\r\n { alias: \"asterisk\", svg: asterisk },\r\n { alias: \"balloon\", svg: balloon },\r\n { alias: \"bars\", svg: bars },\r\n { alias: \"buildings\", svg: buildings },\r\n { alias: \"calendar\", svg: calendar },\r\n { alias: \"call\", svg: call },\r\n { alias: \"caret-down\", svg: caretDown },\r\n { alias: \"check\", svg: check },\r\n { alias: \"check-circle\", svg: checkCircle },\r\n { alias: \"chevron-down\", svg: chevronDown },\r\n { alias: \"chevron-left\", svg: chevronLeft },\r\n { alias: \"chevron-right\", svg: chevronRight },\r\n { alias: \"chevron-up\", svg: chevronUp },\r\n { alias: \"circle-notch\", svg: circleNotch },\r\n { alias: \"clock\", svg: clock },\r\n { alias: \"copy\", svg: copy },\r\n { alias: \"crown\", svg: crown },\r\n { alias: \"cultural\", svg: cultural },\r\n { alias: \"document\", svg: document },\r\n { alias: \"download\", svg: download },\r\n { alias: \"email\", svg: email },\r\n { alias: \"energy\", svg: energy },\r\n { alias: \"environment\", svg: environment },\r\n { alias: \"exclamation\", svg: exclamation },\r\n { alias: \"external-link\", svg: externalLink },\r\n { alias: \"eye-slash\", svg: eyeSlash },\r\n { alias: \"eye\", svg: eye },\r\n { alias: \"filter\", svg: filter },\r\n { alias: \"forbidden\", svg: forbidden },\r\n { alias: \"health\", svg: health },\r\n { alias: \"help-active\", svg: helpActive },\r\n { alias: \"help\", svg: help },\r\n { alias: \"house\", svg: house },\r\n { alias: \"info-active\", svg: infoActive },\r\n { alias: \"info-i\", svg: infoI },\r\n { alias: \"info\", svg: info },\r\n { alias: \"infrastructure\", svg: infrastructure },\r\n { alias: \"label\", svg: label },\r\n { alias: \"land\", svg: land },\r\n { alias: \"landscape\", svg: landscape },\r\n { alias: \"layers\", svg: layers },\r\n { alias: \"location\", svg: location },\r\n { alias: \"location-outline\", svg: locationOutline },\r\n { alias: \"location-search\", svg: locationSearch },\r\n { alias: \"lock\", svg: lock },\r\n { alias: \"magnet\", svg: magnet },\r\n { alias: \"map-layers\", svg: mapLayers },\r\n { alias: \"map-location\", svg: mapLocation },\r\n { alias: \"marker\", svg: marker },\r\n { alias: \"measurement\", svg: measurement },\r\n { alias: \"minus-circle\", svg: minusCircle },\r\n { alias: \"minus-square\", svg: minusSquare },\r\n { alias: \"minus\", svg: minus },\r\n { alias: \"more\", svg: more },\r\n { alias: \"municipality\", svg: municipality },\r\n { alias: \"nature\", svg: nature },\r\n { alias: \"new-window\", svg: newWindow },\r\n { alias: \"paperclip\", svg: paperclip },\r\n { alias: \"parking\", svg: parking },\r\n { alias: \"pencil\", svg: pencil },\r\n { alias: \"pin\", svg: pin },\r\n { alias: \"pin-outline\", svg: pinOutline },\r\n { alias: \"plus-circle\", svg: plusCircle },\r\n { alias: \"plus-square\", svg: plusSquare },\r\n { alias: \"plus\", svg: plus },\r\n { alias: \"print\", svg: print },\r\n { alias: \"procedures\", svg: procedures },\r\n { alias: \"spinner\", svg: spinner },\r\n { alias: \"redo\", svg: redo },\r\n { alias: \"safety\", svg: safety },\r\n { alias: \"scale\", svg: scale },\r\n { alias: \"search\", svg: search },\r\n { alias: \"sitemap\", svg: sitemap },\r\n { alias: \"soil\", svg: soil },\r\n { alias: \"sort-ascending\", svg: sortAscending },\r\n { alias: \"sort-descending\", svg: sortDescending },\r\n { alias: \"sort\", svg: sort },\r\n { alias: \"sound\", svg: sound },\r\n { alias: \"status-danger\", svg: statusDanger },\r\n { alias: \"status-error\", svg: statusError },\r\n { alias: \"status-info\", svg: statusInfo },\r\n { alias: \"status-success\", svg: statusSuccess },\r\n { alias: \"status-warning\", svg: statusWarning },\r\n { alias: \"status-warning-inline\", svg: statusWarningInline },\r\n { alias: \"status-warning-inline-negative\", svg: statusWarningInlineNegative },\r\n { alias: \"table\", svg: table },\r\n { alias: \"times\", svg: times },\r\n { alias: \"trash\", svg: trash },\r\n { alias: \"undo\", svg: undo },\r\n { alias: \"user-line\", svg: userLine },\r\n { alias: \"user\", svg: user },\r\n { alias: \"users\", svg: users },\r\n { alias: \"water\", svg: water },\r\n { alias: \"wip-wip\", svg: wipWip },\r\n];\r\n\r\n@Component({\r\n tag: \"dso-icon\",\r\n styleUrl: \"./icon.scss\",\r\n shadow: true,\r\n})\r\nexport class Icon {\r\n /*\r\n The alias of the icon.\r\n */\r\n @Prop()\r\n icon?: string;\r\n\r\n render() {\r\n if (this.icon) {\r\n const icon = icons.find((i) => i.alias === this.icon);\r\n if (!icon) {\r\n throw new TypeError(`Unknown svg: ${this.icon}`);\r\n }\r\n\r\n return <span class=\"icon-container\" innerHTML={icon.svg} />;\r\n }\r\n }\r\n}\r\n"],"version":3}

package/dist/components/image-overlay.js CHANGED Viewed

@@ -17,11 +17,10 @@ const ImageOverlay = /*@__PURE__*/ proxyCustomElement(class ImageOverlay extends
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.titelSlot = null;
-        this.bijschriftSlot = null;
-        this.wijzigactie = undefined;
         this.active = false;
         this.zoomable = false;
+        this.titelSlot = null;
+        this.bijschriftSlot = null;
     }
     loadListener(event) {
         if (event.target instanceof HTMLImageElement) {

package/dist/components/image-overlay.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"image-overlay.js","mappings":"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","names":[],"sources":["src/components/image-overlay/image-overlay.scss?tag=dso-image-overlay&encapsulation=shadow","src/components/image-overlay/image-overlay.tsx"],"sourcesContent":["@use \"sass:color\";\r\n\r\n@use \"~dso-toolkit/src/utilities\";\r\n\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/insert\";\r\n@use \"~dso-toolkit/src/components/delete\";\r\n\r\n:host {\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n:host(:hover) .open,\r\n.open:focus {\r\n opacity: 1;\r\n}\r\n\r\nbutton {\r\n @include button.element();\r\n}\r\n\r\n.open {\r\n @include button.secondary($modifiers: false, $icon-only: true);\r\n\r\n // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n & {\r\n border: 0;\r\n box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\r\n min-inline-size: auto;\r\n padding: units.$u1;\r\n opacity: 0;\r\n position: absolute;\r\n inset-inline-end: units.$u2;\r\n inset-block-start: units.$u2;\r\n }\r\n}\r\n\r\n.dimmer {\r\n position: fixed;\r\n inset: 0;\r\n z-index: zindex.$image-overlay - 1;\r\n display: flex;\r\n padding: units.$u4;\r\n background-color: color.scale(colors.$wit, $alpha: -20%);\r\n justify-content: center;\r\n}\r\n\r\n.wrapper {\r\n align-self: center;\r\n box-shadow: 0 units.$u1 units.$u3 0 rgba(25, 25, 25, 0.4);\r\n line-height: 0;\r\n outline: 4px solid colors.$wit;\r\n position: relative;\r\n z-index: zindex.$image-overlay;\r\n\r\n .title {\r\n background-color: colors.$wit;\r\n font-weight: 700;\r\n line-height: initial;\r\n padding: units.$u1;\r\n position: absolute;\r\n }\r\n\r\n img {\r\n inline-size: auto;\r\n block-size: auto;\r\n max-inline-size: 100%;\r\n max-block-size: calc(100vh - units.$u8);\r\n }\r\n\r\n .figuur-bijschrift:not([hidden]) {\r\n display: block;\r\n font-size: 0.75rem;\r\n font-style: italic;\r\n padding-block-end: units.$u1 * 1.5;\r\n padding-block-start: units.$u2;\r\n }\r\n}\r\n\r\n.close {\r\n @include button.secondary($modifiers: false, $icon-only: true);\r\n\r\n // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n & {\r\n border: 0;\r\n box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\r\n min-inline-size: auto;\r\n padding: units.$u1;\r\n position: absolute;\r\n inset-block-start: units.$u2;\r\n inset-inline-end: units.$u2;\r\n }\r\n}\r\n\r\nins.editaction-add {\r\n display: inline-block;\r\n margin-block-end: units.$u1;\r\n padding: units.$u1;\r\n @include insert.element();\r\n @include insert.root();\r\n\r\n .wrapper {\r\n outline: none;\r\n padding: units.$u1;\r\n @include insert.root();\r\n\r\n .editaction-label {\r\n line-height: 1.5;\r\n }\r\n\r\n .close {\r\n inset-block-start: units.$u6;\r\n }\r\n }\r\n\r\n .open {\r\n inset-block-start: units.$u6;\r\n }\r\n}\r\n\r\ndel.editaction-remove {\r\n display: inline-block;\r\n margin-block-end: units.$u1;\r\n padding: units.$u1;\r\n @include delete.root();\r\n\r\n .wrapper {\r\n outline: none;\r\n padding: units.$u1;\r\n @include delete.root();\r\n\r\n .title {\r\n text-decoration: line-through;\r\n }\r\n\r\n .editaction-label {\r\n line-height: 1.5;\r\n }\r\n\r\n .close {\r\n inset-block-start: units.$u6;\r\n }\r\n }\r\n\r\n .open {\r\n inset-block-start: units.$u6;\r\n }\r\n}\r\n\r\n.editaction-label {\r\n font-style: italic;\r\n margin-block-end: units.$u1;\r\n}\r\n","import {\r\n Component,\r\n ComponentInterface,\r\n Element,\r\n forceUpdate,\r\n FunctionalComponent,\r\n h,\r\n Host,\r\n Listen,\r\n Prop,\r\n State,\r\n} from \"@stencil/core\";\r\nimport debounce from \"debounce\";\r\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\r\n\r\ntype ImageOverlayWijzigactie = \"voegtoe\" \| \"verwijder\";\r\n\r\nconst wijzigactieLabels: { [wijzigactie in ImageOverlayWijzigactie]: string } = {\r\n verwijder: \"Verwijderd\",\r\n voegtoe: \"Toegevoegd\",\r\n};\r\n\r\nconst Dimmer: FunctionalComponent<{\r\n active: boolean;\r\n src: string \| undefined;\r\n alt: string \| undefined;\r\n ref: (element: HTMLHeadingElement \| undefined) => void;\r\n click: () => void;\r\n}> = ({ active, src, alt, ref, click }, children) =>\r\n active &&\r\n src && (\r\n <div class=\"dimmer\">\r\n <div class=\"wrapper\" ref={ref}>\r\n {children[2]}\r\n {children[0]}\r\n <img src={src} alt={alt} />\r\n <button type=\"button\" class=\"close\" onClick={click}>\r\n <dso-icon icon=\"times\"></dso-icon>\r\n <span>Sluiten</span>\r\n </button>\r\n {children[1]}\r\n </div>\r\n </div>\r\n );\r\n\r\n@Component({\r\n tag: \"dso-image-overlay\",\r\n styleUrl: \"./image-overlay.scss\",\r\n shadow: true,\r\n})\r\nexport class ImageOverlay implements ComponentInterface {\r\n @Element()\r\n host!: HTMLDsoImageOverlayElement;\r\n\r\n /*\r\n The wijzigactie.\r\n */\r\n @Prop()\r\n wijzigactie?: string;\r\n\r\n @State()\r\n active = false;\r\n\r\n @State()\r\n zoomable = false;\r\n\r\n private buttonElement: HTMLButtonElement \| undefined;\r\n\r\n private wrapperElement: HTMLDivElement \| undefined;\r\n\r\n private trap: FocusTrap \| undefined;\r\n\r\n private titelSlot: HTMLElement \| null = null;\r\n\r\n private bijschriftSlot: HTMLElement \| null = null;\r\n\r\n private mutationObserver?: MutationObserver;\r\n\r\n private resizeObserver?: ResizeObserver;\r\n\r\n @Listen(\"load\", { capture: true })\r\n loadListener(event: Event) {\r\n if (event.target instanceof HTMLImageElement) {\r\n this.setZoomable(event.target);\r\n }\r\n }\r\n\r\n connectedCallback() {\r\n this.titelSlot = this.host.querySelector<HTMLDivElement>(\"div[slot='titel']\");\r\n\r\n this.bijschriftSlot = this.host.querySelector<HTMLDivElement>(\"div[slot='bijschrift']\");\r\n }\r\n\r\n componentDidLoad() {\r\n this.resizeObserver = new ResizeObserver(\r\n debounce(() => {\r\n const imgElement = this.host.querySelector(\"img\");\r\n\r\n if (imgElement instanceof HTMLImageElement) {\r\n this.setZoomable(imgElement);\r\n }\r\n }, 200),\r\n );\r\n\r\n this.mutationObserver = new MutationObserver((e) => {\r\n forceUpdate(this.host);\r\n\r\n if (e[0]?.type === \"childList\") {\r\n this.resizeObserver?.disconnect();\r\n // <img> is gone or a new element.\r\n this.initZoomableImage();\r\n }\r\n });\r\n\r\n this.mutationObserver.observe(this.host, {\r\n attributes: true,\r\n subtree: true,\r\n attributeFilter: [\"src\", \"alt\"],\r\n childList: true,\r\n });\r\n\r\n this.initZoomableImage();\r\n }\r\n\r\n disconnectedCallback() {\r\n this.trap?.deactivate();\r\n this.mutationObserver?.disconnect();\r\n this.resizeObserver?.disconnect();\r\n }\r\n\r\n private initZoomableImage(): void {\r\n const imgElement = this.host.querySelector(\"img\");\r\n\r\n if (!(imgElement instanceof HTMLImageElement)) {\r\n return;\r\n }\r\n\r\n // Due to timing issues where the image is loaded before we listen to load events we double check if the image is already complete.\r\n if (imgElement.complete) {\r\n this.setZoomable(imgElement);\r\n }\r\n\r\n this.resizeObserver?.observe(imgElement);\r\n }\r\n\r\n private setZoomable(imageElement: HTMLImageElement): void {\r\n const { width, naturalWidth, height, naturalHeight } = imageElement;\r\n\r\n this.zoomable = width < naturalWidth \|\| height < naturalHeight;\r\n }\r\n\r\n private isWijzigactie(wijzigactie: string): wijzigactie is ImageOverlayWijzigactie {\r\n return wijzigactie === \"voegtoe\" \|\| wijzigactie === \"verwijder\";\r\n }\r\n\r\n render() {\r\n const { src, alt } = this.host.querySelector(\"img\") ?? {};\r\n\r\n const editActionLabel: string \| undefined =\r\n (this.wijzigactie && this.isWijzigactie(this.wijzigactie) && wijzigactieLabels[this.wijzigactie]) \|\| undefined;\r\n\r\n const button = this.zoomable && (\r\n <button\r\n type=\"button\"\r\n class=\"open\"\r\n ref={(element) => (this.buttonElement = element)}\r\n onClick={() => (this.active = true)}\r\n >\r\n <dso-icon icon=\"external-link\"></dso-icon>\r\n <span>Afbeelding vergroot weergeven</span>\r\n </button>\r\n );\r\n\r\n if (this.wijzigactie === \"verwijder\") {\r\n return (\r\n <Host onClick={() => this.buttonElement?.focus()}>\r\n <del class=\"editaction-remove\">\r\n <div class=\"editaction-label\">{editActionLabel}:</div>\r\n <Dimmer\r\n active={this.active}\r\n src={src}\r\n alt={alt}\r\n ref={(element) => (this.wrapperElement = element)}\r\n click={() => (this.active = false)}\r\n >\r\n {this.titelSlot && (\r\n <div class=\"title\">\r\n <slot name=\"titel\" />\r\n </div>\r\n )}\r\n <div class=\"figuur-bijschrift\" hidden={!this.bijschriftSlot}>\r\n <slot name=\"bijschrift\" />\r\n </div>\r\n {<div class=\"editaction-label\">{editActionLabel}:</div>}\r\n </Dimmer>\r\n <slot />\r\n {button}\r\n </del>\r\n </Host>\r\n );\r\n }\r\n\r\n if (this.wijzigactie === \"voegtoe\") {\r\n return (\r\n <Host onClick={() => this.buttonElement?.focus()}>\r\n <ins class=\"editaction-add\">\r\n <div class=\"editaction-label\">{editActionLabel}:</div>\r\n <Dimmer\r\n active={this.active}\r\n src={src}\r\n alt={alt}\r\n ref={(element) => (this.wrapperElement = element)}\r\n click={() => (this.active = false)}\r\n >\r\n {this.titelSlot && (\r\n <div class=\"title\">\r\n <slot name=\"titel\" />\r\n </div>\r\n )}\r\n <div class=\"figuur-bijschrift\" hidden={!this.bijschriftSlot}>\r\n <slot name=\"bijschrift\" />\r\n </div>\r\n {<div class=\"editaction-label\">{editActionLabel}:</div>}\r\n </Dimmer>\r\n <slot />\r\n {button}\r\n </ins>\r\n </Host>\r\n );\r\n }\r\n\r\n return (\r\n <Host onClick={() => this.buttonElement?.focus()}>\r\n <Dimmer\r\n active={this.active}\r\n src={src}\r\n alt={alt}\r\n ref={(element) => (this.wrapperElement = element)}\r\n click={() => (this.active = false)}\r\n >\r\n {this.titelSlot && (\r\n <div class=\"title\">\r\n <slot name=\"titel\" />\r\n </div>\r\n )}\r\n <div class=\"figuur-bijschrift\" hidden={!this.bijschriftSlot}>\r\n <slot name=\"bijschrift\" />\r\n </div>\r\n </Dimmer>\r\n <slot />\r\n {button}\r\n </Host>\r\n );\r\n }\r\n\r\n componentDidRender() {\r\n if (this.active && this.wrapperElement && !this.trap) {\r\n this.trap = createFocusTrap(this.wrapperElement, {\r\n escapeDeactivates: true,\r\n clickOutsideDeactivates: (e) => {\r\n if (e instanceof MouseEvent && e.composedPath()[0] === this.wrapperElement) {\r\n this.active = false;\r\n\r\n return false;\r\n }\r\n\r\n return true;\r\n },\r\n setReturnFocus: this.buttonElement ?? false,\r\n onDeactivate: () => (this.active = false),\r\n }).activate();\r\n } else if (!this.active && this.trap) {\r\n this.trap?.deactivate();\r\n\r\n delete this.trap;\r\n }\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"image-overlay.js","mappings":"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","names":[],"sources":["src/components/image-overlay/image-overlay.scss?tag=dso-image-overlay&encapsulation=shadow","src/components/image-overlay/image-overlay.tsx"],"sourcesContent":["@use \"sass:color\";\r\n\r\n@use \"~dso-toolkit/src/utilities\";\r\n\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/insert\";\r\n@use \"~dso-toolkit/src/components/delete\";\r\n\r\n:host {\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n:host(:hover) .open,\r\n.open:focus {\r\n opacity: 1;\r\n}\r\n\r\nbutton {\r\n @include button.element();\r\n}\r\n\r\n.open {\r\n @include button.secondary($modifiers: false, $icon-only: true);\r\n\r\n // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n & {\r\n border: 0;\r\n box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\r\n min-inline-size: auto;\r\n padding: units.$u1;\r\n opacity: 0;\r\n position: absolute;\r\n inset-inline-end: units.$u2;\r\n inset-block-start: units.$u2;\r\n }\r\n}\r\n\r\n.dimmer {\r\n position: fixed;\r\n inset: 0;\r\n z-index: zindex.$image-overlay - 1;\r\n display: flex;\r\n padding: units.$u4;\r\n background-color: color.scale(colors.$wit, $alpha: -20%);\r\n justify-content: center;\r\n}\r\n\r\n.wrapper {\r\n align-self: center;\r\n box-shadow: 0 units.$u1 units.$u3 0 rgba(25, 25, 25, 0.4);\r\n line-height: 0;\r\n outline: 4px solid colors.$wit;\r\n position: relative;\r\n z-index: zindex.$image-overlay;\r\n\r\n .title {\r\n background-color: colors.$wit;\r\n font-weight: 700;\r\n line-height: initial;\r\n padding: units.$u1;\r\n position: absolute;\r\n }\r\n\r\n img {\r\n inline-size: auto;\r\n block-size: auto;\r\n max-inline-size: 100%;\r\n max-block-size: calc(100vh - units.$u8);\r\n }\r\n\r\n .figuur-bijschrift:not([hidden]) {\r\n display: block;\r\n font-size: 0.75rem;\r\n font-style: italic;\r\n padding-block-end: units.$u1 * 1.5;\r\n padding-block-start: units.$u2;\r\n }\r\n}\r\n\r\n.close {\r\n @include button.secondary($modifiers: false, $icon-only: true);\r\n\r\n // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n & {\r\n border: 0;\r\n box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\r\n min-inline-size: auto;\r\n padding: units.$u1;\r\n position: absolute;\r\n inset-block-start: units.$u2;\r\n inset-inline-end: units.$u2;\r\n }\r\n}\r\n\r\nins.editaction-add {\r\n display: inline-block;\r\n margin-block-end: units.$u1;\r\n padding: units.$u1;\r\n @include insert.element();\r\n @include insert.root();\r\n\r\n .wrapper {\r\n outline: none;\r\n padding: units.$u1;\r\n @include insert.root();\r\n\r\n .editaction-label {\r\n line-height: 1.5;\r\n }\r\n\r\n .close {\r\n inset-block-start: units.$u6;\r\n }\r\n }\r\n\r\n .open {\r\n inset-block-start: units.$u6;\r\n }\r\n}\r\n\r\ndel.editaction-remove {\r\n display: inline-block;\r\n margin-block-end: units.$u1;\r\n padding: units.$u1;\r\n @include delete.root();\r\n\r\n .wrapper {\r\n outline: none;\r\n padding: units.$u1;\r\n @include delete.root();\r\n\r\n .title {\r\n text-decoration: line-through;\r\n }\r\n\r\n .editaction-label {\r\n line-height: 1.5;\r\n }\r\n\r\n .close {\r\n inset-block-start: units.$u6;\r\n }\r\n }\r\n\r\n .open {\r\n inset-block-start: units.$u6;\r\n }\r\n}\r\n\r\n.editaction-label {\r\n font-style: italic;\r\n margin-block-end: units.$u1;\r\n}\r\n","import {\r\n Component,\r\n ComponentInterface,\r\n Element,\r\n forceUpdate,\r\n FunctionalComponent,\r\n h,\r\n Host,\r\n Listen,\r\n Prop,\r\n State,\r\n} from \"@stencil/core\";\r\nimport debounce from \"debounce\";\r\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\r\n\r\ntype ImageOverlayWijzigactie = \"voegtoe\" \| \"verwijder\";\r\n\r\nconst wijzigactieLabels: { [wijzigactie in ImageOverlayWijzigactie]: string } = {\r\n verwijder: \"Verwijderd\",\r\n voegtoe: \"Toegevoegd\",\r\n};\r\n\r\nconst Dimmer: FunctionalComponent<{\r\n active: boolean;\r\n src: string \| undefined;\r\n alt: string \| undefined;\r\n ref: (element: HTMLHeadingElement \| undefined) => void;\r\n click: () => void;\r\n}> = ({ active, src, alt, ref, click }, children) =>\r\n active &&\r\n src && (\r\n <div class=\"dimmer\">\r\n <div class=\"wrapper\" ref={ref}>\r\n {children[2]}\r\n {children[0]}\r\n <img src={src} alt={alt} />\r\n <button type=\"button\" class=\"close\" onClick={click}>\r\n <dso-icon icon=\"times\"></dso-icon>\r\n <span>Sluiten</span>\r\n </button>\r\n {children[1]}\r\n </div>\r\n </div>\r\n );\r\n\r\n@Component({\r\n tag: \"dso-image-overlay\",\r\n styleUrl: \"./image-overlay.scss\",\r\n shadow: true,\r\n})\r\nexport class ImageOverlay implements ComponentInterface {\r\n @Element()\r\n host!: HTMLDsoImageOverlayElement;\r\n\r\n /*\r\n The wijzigactie.\r\n */\r\n @Prop()\r\n wijzigactie?: string;\r\n\r\n @State()\r\n active = false;\r\n\r\n @State()\r\n zoomable = false;\r\n\r\n private buttonElement: HTMLButtonElement \| undefined;\r\n\r\n private wrapperElement: HTMLDivElement \| undefined;\r\n\r\n private trap: FocusTrap \| undefined;\r\n\r\n private titelSlot: HTMLElement \| null = null;\r\n\r\n private bijschriftSlot: HTMLElement \| null = null;\r\n\r\n private mutationObserver?: MutationObserver;\r\n\r\n private resizeObserver?: ResizeObserver;\r\n\r\n @Listen(\"load\", { capture: true })\r\n loadListener(event: Event) {\r\n if (event.target instanceof HTMLImageElement) {\r\n this.setZoomable(event.target);\r\n }\r\n }\r\n\r\n connectedCallback() {\r\n this.titelSlot = this.host.querySelector<HTMLDivElement>(\"div[slot='titel']\");\r\n\r\n this.bijschriftSlot = this.host.querySelector<HTMLDivElement>(\"div[slot='bijschrift']\");\r\n }\r\n\r\n componentDidLoad() {\r\n this.resizeObserver = new ResizeObserver(\r\n debounce(() => {\r\n const imgElement = this.host.querySelector(\"img\");\r\n\r\n if (imgElement instanceof HTMLImageElement) {\r\n this.setZoomable(imgElement);\r\n }\r\n }, 200),\r\n );\r\n\r\n this.mutationObserver = new MutationObserver((e) => {\r\n forceUpdate(this.host);\r\n\r\n if (e[0]?.type === \"childList\") {\r\n this.resizeObserver?.disconnect();\r\n // <img> is gone or a new element.\r\n this.initZoomableImage();\r\n }\r\n });\r\n\r\n this.mutationObserver.observe(this.host, {\r\n attributes: true,\r\n subtree: true,\r\n attributeFilter: [\"src\", \"alt\"],\r\n childList: true,\r\n });\r\n\r\n this.initZoomableImage();\r\n }\r\n\r\n disconnectedCallback() {\r\n this.trap?.deactivate();\r\n this.mutationObserver?.disconnect();\r\n this.resizeObserver?.disconnect();\r\n }\r\n\r\n private initZoomableImage(): void {\r\n const imgElement = this.host.querySelector(\"img\");\r\n\r\n if (!(imgElement instanceof HTMLImageElement)) {\r\n return;\r\n }\r\n\r\n // Due to timing issues where the image is loaded before we listen to load events we double check if the image is already complete.\r\n if (imgElement.complete) {\r\n this.setZoomable(imgElement);\r\n }\r\n\r\n this.resizeObserver?.observe(imgElement);\r\n }\r\n\r\n private setZoomable(imageElement: HTMLImageElement): void {\r\n const { width, naturalWidth, height, naturalHeight } = imageElement;\r\n\r\n this.zoomable = width < naturalWidth \|\| height < naturalHeight;\r\n }\r\n\r\n private isWijzigactie(wijzigactie: string): wijzigactie is ImageOverlayWijzigactie {\r\n return wijzigactie === \"voegtoe\" \|\| wijzigactie === \"verwijder\";\r\n }\r\n\r\n render() {\r\n const { src, alt } = this.host.querySelector(\"img\") ?? {};\r\n\r\n const editActionLabel: string \| undefined =\r\n (this.wijzigactie && this.isWijzigactie(this.wijzigactie) && wijzigactieLabels[this.wijzigactie]) \|\| undefined;\r\n\r\n const button = this.zoomable && (\r\n <button\r\n type=\"button\"\r\n class=\"open\"\r\n ref={(element) => (this.buttonElement = element)}\r\n onClick={() => (this.active = true)}\r\n >\r\n <dso-icon icon=\"external-link\"></dso-icon>\r\n <span>Afbeelding vergroot weergeven</span>\r\n </button>\r\n );\r\n\r\n if (this.wijzigactie === \"verwijder\") {\r\n return (\r\n <Host onClick={() => this.buttonElement?.focus()}>\r\n <del class=\"editaction-remove\">\r\n <div class=\"editaction-label\">{editActionLabel}:</div>\r\n <Dimmer\r\n active={this.active}\r\n src={src}\r\n alt={alt}\r\n ref={(element) => (this.wrapperElement = element)}\r\n click={() => (this.active = false)}\r\n >\r\n {this.titelSlot && (\r\n <div class=\"title\">\r\n <slot name=\"titel\" />\r\n </div>\r\n )}\r\n <div class=\"figuur-bijschrift\" hidden={!this.bijschriftSlot}>\r\n <slot name=\"bijschrift\" />\r\n </div>\r\n {<div class=\"editaction-label\">{editActionLabel}:</div>}\r\n </Dimmer>\r\n <slot />\r\n {button}\r\n </del>\r\n </Host>\r\n );\r\n }\r\n\r\n if (this.wijzigactie === \"voegtoe\") {\r\n return (\r\n <Host onClick={() => this.buttonElement?.focus()}>\r\n <ins class=\"editaction-add\">\r\n <div class=\"editaction-label\">{editActionLabel}:</div>\r\n <Dimmer\r\n active={this.active}\r\n src={src}\r\n alt={alt}\r\n ref={(element) => (this.wrapperElement = element)}\r\n click={() => (this.active = false)}\r\n >\r\n {this.titelSlot && (\r\n <div class=\"title\">\r\n <slot name=\"titel\" />\r\n </div>\r\n )}\r\n <div class=\"figuur-bijschrift\" hidden={!this.bijschriftSlot}>\r\n <slot name=\"bijschrift\" />\r\n </div>\r\n {<div class=\"editaction-label\">{editActionLabel}:</div>}\r\n </Dimmer>\r\n <slot />\r\n {button}\r\n </ins>\r\n </Host>\r\n );\r\n }\r\n\r\n return (\r\n <Host onClick={() => this.buttonElement?.focus()}>\r\n <Dimmer\r\n active={this.active}\r\n src={src}\r\n alt={alt}\r\n ref={(element) => (this.wrapperElement = element)}\r\n click={() => (this.active = false)}\r\n >\r\n {this.titelSlot && (\r\n <div class=\"title\">\r\n <slot name=\"titel\" />\r\n </div>\r\n )}\r\n <div class=\"figuur-bijschrift\" hidden={!this.bijschriftSlot}>\r\n <slot name=\"bijschrift\" />\r\n </div>\r\n </Dimmer>\r\n <slot />\r\n {button}\r\n </Host>\r\n );\r\n }\r\n\r\n componentDidRender() {\r\n if (this.active && this.wrapperElement && !this.trap) {\r\n this.trap = createFocusTrap(this.wrapperElement, {\r\n escapeDeactivates: true,\r\n clickOutsideDeactivates: (e) => {\r\n if (e instanceof MouseEvent && e.composedPath()[0] === this.wrapperElement) {\r\n this.active = false;\r\n\r\n return false;\r\n }\r\n\r\n return true;\r\n },\r\n setReturnFocus: this.buttonElement ?? false,\r\n onDeactivate: () => (this.active = false),\r\n }).activate();\r\n } else if (!this.active && this.trap) {\r\n this.trap?.deactivate();\r\n\r\n delete this.trap;\r\n }\r\n }\r\n}\r\n"],"version":3}

package/dist/components/index.esm.js CHANGED Viewed

@@ -567,6 +567,6 @@ var isFocusable = function isFocusable(node, options) {
   return isNodeMatchingSelectorFocusable(options, node);
 };
-export { isTabbable as a, focusable as f, getTabIndex as g, isFocusable as i, tabbable as t };
+export { isFocusable as a, focusable as f, getTabIndex as g, isTabbable as i, tabbable as t };
 //# sourceMappingURL=index.esm.js.map

package/dist/components/info-button.js CHANGED Viewed

@@ -11,9 +11,10 @@ const InfoButton = /*@__PURE__*/ proxyCustomElement(class InfoButton extends HTM
         this.__registerHost();
         this.__attachShadow();
         this.dsoToggle = createEvent(this, "dsoToggle", 7);
-        this.active = undefined;
         this.hover = false;
-        this.secondary = undefined;
+        /**
+         * The label.
+         */
         this.label = "Toelichting bij optie";
     }
     /**

package/dist/components/info-button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"info-button.js","mappings":";;;;AAAA,MAAM,aAAa,GAAG,qbAAqb,CAAC;AAC5c,4BAAe,aAAa;;MCSf,UAAU~~;;;;;;;qBAUb~~,KAAK~~;;qBAYL~~,uBAAuB~~;;;;;IAY/B~~,MAAM,QAAQ;;QACZ,MAAA,IAAI,CAAC,MAAM,0CAAE,KAAK,EAAE,CAAC;KACtB;IAEO,YAAY,CAAC,CAAa;QAChC,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;QAC3B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;KAChE;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,YAAY,EAAE,OAAO,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,YAAY,EAAE,OAAO,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,IACrF,+DACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,IAAI,CAAC,EAAE,UAAU,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,EAAE,oBAAoB,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC,mBACnE,OAAO,IAAI,CAAC,MAAM,KAAK,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,GAAG,SAAS,EACpF,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EACpC,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC,IAEzC,iEAAU,IAAI,EAAE,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,GAAG,aAAa,GAAG,MAAM,GAAa,EAC/E,6DAAM,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,KAAK,CAAQ,CAClC,CACJ,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/info-button/info-button.scss?tag=dso-info-button&encapsulation=shadow","src/components/info-button/info-button.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/info-button\";\r\n\r\n:host {\r\n display: inline-block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\nbutton {\r\n @include info-button.root();\r\n\r\n cursor: pointer;\r\n vertical-align: top;\r\n}\r\n\r\ndso-icon {\r\n display: block;\r\n}\r\n","import { h, Component, Event, Prop, EventEmitter, Method, Host, State } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\nimport { InfoButtonToggleEvent } from \"./info-button.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-info-button\",\r\n shadow: true,\r\n styleUrl: \"info-button.scss\",\r\n})\r\nexport class InfoButton {\r\n private button?: HTMLButtonElement;\r\n\r\n /*\r\n Whether the InfoButton is active.\r\n /\r\n @Prop({ mutable: true, reflect: true })\r\n active?: boolean;\r\n\r\n @State()\r\n hover = false;\r\n\r\n /\r\n For secondary Info Button.\r\n /\r\n @Prop()\r\n secondary?: boolean;\r\n\r\n /\r\n The label.\r\n /\r\n @Prop()\r\n label = \"Toelichting bij optie\";\r\n\r\n /\r\n Emitted when the user activates the Info Button.\r\n /\r\n @Event()\r\n dsoToggle!: EventEmitter<InfoButtonToggleEvent>;\r\n\r\n /\r\n To set focus to the toggle button.\r\n */\r\n @Method()\r\n async setFocus() {\r\n this.button?.focus();\r\n }\r\n\r\n private handleToggle(e: MouseEvent) {\r\n this.active = !this.active;\r\n this.dsoToggle.emit({ originalEvent: e, active: this.active });\r\n }\r\n\r\n render() {\r\n return (\r\n <Host onMouseenter={() => (this.hover = true)} onMouseleave={() => (this.hover = false)}>\r\n <button\r\n type=\"button\"\r\n class={clsx({ \"dso-open\": !!this.active, \"dso-info-secondary\": !!this.secondary })}\r\n aria-expanded={typeof this.active === \"boolean\" ? this.active.toString() : undefined}\r\n onClick={(e) => this.handleToggle(e)}\r\n ref={(element) => (this.button = element)}\r\n >\r\n <dso-icon icon={this.active \|\| this.hover ? \"info-active\" : \"info\"}></dso-icon>\r\n <span class=\"sr-only\">{this.label}</span>\r\n </button>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"info-button.js","mappings":";;;;AAAA,MAAM,aAAa,GAAG,qbAAqb,CAAC;AAC5c,4BAAe,aAAa;;MCSf,UAAU;IALvB;;;;;QAeE,UAAK,GAAG,KAAK,CAAC;;;;QAYd,UAAK,GAAG,uBAAuB,CAAC;KAqCjC;;;;IAzBC,MAAM,QAAQ;;QACZ,MAAA,IAAI,CAAC,MAAM,0CAAE,KAAK,EAAE,CAAC;KACtB;IAEO,YAAY,CAAC,CAAa;QAChC,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;QAC3B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;KAChE;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,YAAY,EAAE,OAAO,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,YAAY,EAAE,OAAO,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,IACrF,+DACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,IAAI,CAAC,EAAE,UAAU,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,EAAE,oBAAoB,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC,mBACnE,OAAO,IAAI,CAAC,MAAM,KAAK,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,GAAG,SAAS,EACpF,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EACpC,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC,IAEzC,iEAAU,IAAI,EAAE,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,GAAG,aAAa,GAAG,MAAM,GAAa,EAC/E,6DAAM,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,KAAK,CAAQ,CAClC,CACJ,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/info-button/info-button.scss?tag=dso-info-button&encapsulation=shadow","src/components/info-button/info-button.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/info-button\";\r\n\r\n:host {\r\n display: inline-block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\nbutton {\r\n @include info-button.root();\r\n\r\n cursor: pointer;\r\n vertical-align: top;\r\n}\r\n\r\ndso-icon {\r\n display: block;\r\n}\r\n","import { h, Component, Event, Prop, EventEmitter, Method, Host, State } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\nimport { InfoButtonToggleEvent } from \"./info-button.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-info-button\",\r\n shadow: true,\r\n styleUrl: \"info-button.scss\",\r\n})\r\nexport class InfoButton {\r\n private button?: HTMLButtonElement;\r\n\r\n /*\r\n Whether the InfoButton is active.\r\n /\r\n @Prop({ mutable: true, reflect: true })\r\n active?: boolean;\r\n\r\n @State()\r\n hover = false;\r\n\r\n /\r\n For secondary Info Button.\r\n /\r\n @Prop()\r\n secondary?: boolean;\r\n\r\n /\r\n The label.\r\n /\r\n @Prop()\r\n label = \"Toelichting bij optie\";\r\n\r\n /\r\n Emitted when the user activates the Info Button.\r\n /\r\n @Event()\r\n dsoToggle!: EventEmitter<InfoButtonToggleEvent>;\r\n\r\n /\r\n To set focus to the toggle button.\r\n */\r\n @Method()\r\n async setFocus() {\r\n this.button?.focus();\r\n }\r\n\r\n private handleToggle(e: MouseEvent) {\r\n this.active = !this.active;\r\n this.dsoToggle.emit({ originalEvent: e, active: this.active });\r\n }\r\n\r\n render() {\r\n return (\r\n <Host onMouseenter={() => (this.hover = true)} onMouseleave={() => (this.hover = false)}>\r\n <button\r\n type=\"button\"\r\n class={clsx({ \"dso-open\": !!this.active, \"dso-info-secondary\": !!this.secondary })}\r\n aria-expanded={typeof this.active === \"boolean\" ? this.active.toString() : undefined}\r\n onClick={(e) => this.handleToggle(e)}\r\n ref={(element) => (this.button = element)}\r\n >\r\n <dso-icon icon={this.active \|\| this.hover ? \"info-active\" : \"info\"}></dso-icon>\r\n <span class=\"sr-only\">{this.label}</span>\r\n </button>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/components/info.js CHANGED Viewed

@@ -10,8 +10,6 @@ const Info = /*@__PURE__*/ proxyCustomElement(class Info extends HTMLElement {
         this.__registerHost();
         this.__attachShadow();
         this.dsoClose = createEvent(this, "dsoClose", 7);
-        this.fixed = undefined;
-        this.active = undefined;
     }
     render() {
         return (h(Fragment, { key: '3b3a3390da24484d21869661692c293f766bb06b' }, h("slot", { key: '83976a207e4c1505329876192c83e6eccc1f6a52' }), !this.fixed && (h("button", { key: 'de983b145b9a2cfd1adccc13116f0f17e8130314', type: "button", onClick: (e) => this.dsoClose.emit(e) }, h("dso-icon", { key: 'c34a3568d69b61537de385c4e9b6277be5ea7697', icon: "times" }), h("span", { key: 'bc2069fa68085e27fd9bab79d41ec801f5da1c5f', class: "sr-only" }, "Sluiten")))));

package/dist/components/info.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"info.js","mappings":";;;AAAA,MAAM,OAAO,GAAG,03CAA03C,CAAC;AAC34C,sBAAe,OAAO;;MCMT,IAAI~~;;;;;;;;;~~IAmBf,MAAM;QACJ,QACE,EAAC,QAAQ,uDACP,8DAAa,EACZ,CAAC,IAAI,CAAC,KAAK,KACV,+DAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,IACzD,iEAAU,IAAI,EAAC,OAAO,GAAY,EAClC,6DAAM,KAAK,EAAC,SAAS,cAAe,CAC7B,CACV,CACQ,EACX;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/info/info.scss?tag=dso-info&encapsulation=shadow","src/components/info/info.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/info\";\r\n\r\n:host {\r\n display: block;\r\n\r\n @include info.root();\r\n}\r\n\r\n:host(:not([active], [fixed])),\r\n:host([active=\"false\"]:not([fixed])),\r\n:host([active=\"false\"][fixed=\"false\"]) {\r\n display: none;\r\n}\r\n\r\nbutton {\r\n @include button.element();\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n","import { h, Component, Event, Prop, EventEmitter, Fragment } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: \"dso-info\",\r\n styleUrl: \"./info.scss\",\r\n shadow: true,\r\n})\r\nexport class Info {\r\n /*\r\n Set to true if the Info should not be toggled and always visible.\r\n /\r\n @Prop({ reflect: true })\r\n fixed?: boolean;\r\n\r\n /\r\n Whether the Info is active.\r\n /\r\n @Prop({ reflect: true })\r\n active?: boolean;\r\n\r\n /\r\n Emitted when the user activates the close button.\r\n */\r\n @Event()\r\n dsoClose!: EventEmitter<MouseEvent>;\r\n\r\n render() {\r\n return (\r\n <Fragment>\r\n <slot></slot>\r\n {!this.fixed && (\r\n <button type=\"button\" onClick={(e) => this.dsoClose.emit(e)}>\r\n <dso-icon icon=\"times\"></dso-icon>\r\n <span class=\"sr-only\">Sluiten</span>\r\n </button>\r\n )}\r\n </Fragment>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"info.js","mappings":";;;AAAA,MAAM,OAAO,GAAG,03CAA03C,CAAC;AAC34C,sBAAe,OAAO;;MCMT,IAAI;;;;;;;IAmBf,MAAM;QACJ,QACE,EAAC,QAAQ,uDACP,8DAAa,EACZ,CAAC,IAAI,CAAC,KAAK,KACV,+DAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,IACzD,iEAAU,IAAI,EAAC,OAAO,GAAY,EAClC,6DAAM,KAAK,EAAC,SAAS,cAAe,CAC7B,CACV,CACQ,EACX;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/info/info.scss?tag=dso-info&encapsulation=shadow","src/components/info/info.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/info\";\r\n\r\n:host {\r\n display: block;\r\n\r\n @include info.root();\r\n}\r\n\r\n:host(:not([active], [fixed])),\r\n:host([active=\"false\"]:not([fixed])),\r\n:host([active=\"false\"][fixed=\"false\"]) {\r\n display: none;\r\n}\r\n\r\nbutton {\r\n @include button.element();\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n","import { h, Component, Event, Prop, EventEmitter, Fragment } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: \"dso-info\",\r\n styleUrl: \"./info.scss\",\r\n shadow: true,\r\n})\r\nexport class Info {\r\n /*\r\n Set to true if the Info should not be toggled and always visible.\r\n /\r\n @Prop({ reflect: true })\r\n fixed?: boolean;\r\n\r\n /\r\n Whether the Info is active.\r\n /\r\n @Prop({ reflect: true })\r\n active?: boolean;\r\n\r\n /\r\n Emitted when the user activates the close button.\r\n */\r\n @Event()\r\n dsoClose!: EventEmitter<MouseEvent>;\r\n\r\n render() {\r\n return (\r\n <Fragment>\r\n <slot></slot>\r\n {!this.fixed && (\r\n <button type=\"button\" onClick={(e) => this.dsoClose.emit(e)}>\r\n <dso-icon icon=\"times\"></dso-icon>\r\n <span class=\"sr-only\">Sluiten</span>\r\n </button>\r\n )}\r\n </Fragment>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/components/label.js CHANGED Viewed

@@ -26,14 +26,6 @@ const Label = /*@__PURE__*/ proxyCustomElement(class Label extends HTMLElement {
         this.__registerHost();
         this.__attachShadow();
         this.dsoRemoveClick = createEvent(this, "dsoRemoveClick", 7);
-        this.compact = undefined;
-        this.removable = undefined;
-        this.status = undefined;
-        this.removeHover = undefined;
-        this.removeFocus = undefined;
-        this.truncate = undefined;
-        this.textHover = undefined;
-        this.textFocus = undefined;
         this.isTruncated = false;
         this.labelText = "";
     }

package/dist/components/label.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"label.js","mappings":"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","names":[],"sources":["src/components/label/label.scss?tag=dso-label&encapsulation=shadow","src/components/label/label.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/label\";\r\n\r\n:host {\r\n display: inline-block;\r\n max-inline-size: 100%;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n// Todo: Replace .sr-only selector with web component specific selector, no need for .sr-only if we can generate the SCSS\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n.dso-label {\r\n @include label.root();\r\n\r\n &.dso-hover {\r\n .dso-label-content {\r\n text-decoration: line-through;\r\n }\r\n }\r\n}\r\n\r\n.dso-truncate.dso-label-content {\r\n display: inline-block;\r\n max-inline-size: 100%;\r\n overflow: hidden;\r\n text-overflow: ellipsis; // stylelint-disable-line declaration-property-value-disallowed-list -- full text can be viewed via tooltip.\r\n vertical-align: bottom;\r\n white-space: nowrap; // stylelint-disable-line declaration-property-value-disallowed-list -- full text can be viewed via tooltip.\r\n}\r\n\r\n:host([removable]) {\r\n .dso-truncate.dso-label-content {\r\n max-inline-size: calc(100% - (units.$u3 + 4px));\r\n }\r\n}\r\n","import {\r\n h,\r\n Component,\r\n ComponentInterface,\r\n Element,\r\n Event,\r\n EventEmitter,\r\n Fragment,\r\n Method,\r\n Prop,\r\n State,\r\n Watch,\r\n Listen,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport debounce from \"debounce\";\r\nimport { LabelStatus } from \"./label.interfaces\";\r\n\r\nconst resizeObserver = new ResizeObserver(\r\n debounce((entries: ResizeObserverEntry[]) => {\r\n entries.forEach(({ target }) => {\r\n if (isDsoLabelComponent(target)) {\r\n target._truncateLabel();\r\n }\r\n });\r\n }, 150),\r\n);\r\n\r\nfunction isDsoLabelComponent(element: Element): element is HTMLDsoLabelElement {\r\n return element.tagName === \"DSO-LABEL\";\r\n}\r\n\r\nfunction hasEllipses(el: HTMLElement): boolean {\r\n return el.scrollWidth > el.clientWidth;\r\n}\r\n\r\n@Component({\r\n tag: \"dso-label\",\r\n styleUrl: \"label.scss\",\r\n shadow: true,\r\n})\r\nexport class Label implements ComponentInterface {\r\n private labelContent: HTMLSpanElement \| undefined;\r\n\r\n private mutationObserver?: MutationObserver;\r\n\r\n @Element()\r\n private host!: HTMLDsoLabelElement;\r\n\r\n /*\r\n For compact Label\r\n /\r\n @Prop()\r\n compact?: boolean;\r\n\r\n /\r\n Shows a button that can be used to remove the Label.\r\n /\r\n @Prop({ reflect: true })\r\n removable?: boolean;\r\n\r\n /\r\n The status of this Label.\r\n /\r\n @Prop()\r\n status?: LabelStatus;\r\n\r\n /\r\n Emitted when the user activates the remove button.\r\n /\r\n @Event()\r\n dsoRemoveClick!: EventEmitter<MouseEvent>;\r\n\r\n @State()\r\n removeHover?: boolean;\r\n\r\n @State()\r\n removeFocus?: boolean;\r\n\r\n /\r\n Whether the Label is allowed to truncate the contents if it does not fit the container element.\r\n /\r\n @Prop()\r\n truncate?: boolean;\r\n\r\n @State()\r\n textHover?: boolean;\r\n\r\n @State()\r\n textFocus?: boolean;\r\n\r\n @State()\r\n isTruncated = false;\r\n\r\n @State()\r\n labelText = \"\";\r\n\r\n @Watch(\"removable\")\r\n watchRemovable(removable: boolean) {\r\n if (removable) {\r\n this.startMutationObserver();\r\n } else {\r\n this.stopMutationObserver();\r\n }\r\n }\r\n\r\n @Watch(\"truncate\")\r\n watchTruncate(truncate: boolean) {\r\n if (truncate) {\r\n this.startTruncate();\r\n } else {\r\n this.stopTruncate();\r\n }\r\n }\r\n\r\n @Listen(\"keydown\", { target: \"document\" })\r\n keyDownListener(event: KeyboardEvent) {\r\n if (event.key === \"Escape\") {\r\n this.textHover = false;\r\n this.textFocus = false;\r\n }\r\n }\r\n\r\n /\r\n @internal\r\n /\r\n @Method()\r\n async _truncateLabel() {\r\n setTimeout(() => {\r\n this.isTruncated = !!this.labelContent && hasEllipses(this.labelContent);\r\n });\r\n }\r\n\r\n private syncLabelText() {\r\n this.labelText = this.host.textContent?.trim() ?? \"\";\r\n }\r\n\r\n componentDidLoad() {\r\n if (this.truncate) {\r\n this.startTruncate();\r\n }\r\n\r\n if (this.removable) {\r\n this.startMutationObserver();\r\n }\r\n }\r\n\r\n disconnectedCallback() {\r\n this.stopTruncate();\r\n\r\n this.stopMutationObserver(true);\r\n }\r\n\r\n /* The mutationObserver fetches the text placed inside the label, this is then used for the remove button and tooltip. */\r\n private startMutationObserver(): void {\r\n this.mutationObserver = new MutationObserver(() => this.syncLabelText());\r\n\r\n this.mutationObserver.observe(this.host, {\r\n characterData: true,\r\n childList: true,\r\n subtree: true,\r\n attributes: true,\r\n });\r\n\r\n this.syncLabelText();\r\n }\r\n\r\n private stopMutationObserver(force = false): void {\r\n if (force \|\| !(this.truncate && this.removable)) {\r\n this.mutationObserver?.disconnect();\r\n\r\n delete this.mutationObserver;\r\n }\r\n }\r\n\r\n private startTruncate(): void {\r\n resizeObserver.observe(this.host);\r\n this.startMutationObserver();\r\n this._truncateLabel();\r\n }\r\n\r\n private stopTruncate(): void {\r\n resizeObserver.unobserve(this.host);\r\n this.stopMutationObserver();\r\n this.isTruncated = false;\r\n }\r\n\r\n render() {\r\n return (\r\n <Fragment>\r\n <span\r\n aria-describedby=\"toggle-anchor\"\r\n class={clsx(\"dso-label\", {\r\n [`dso-label-${this.status}`]: this.status,\r\n \"dso-compact\": this.compact && !this.removable,\r\n \"dso-hover\": this.removeHover \|\| this.removeFocus,\r\n })}\r\n >\r\n <slot name=\"symbol\"></slot>\r\n <span\r\n class={clsx(\"dso-label-content\", {\r\n \"dso-truncate\": !!this.truncate,\r\n })}\r\n ref={(element) => (this.labelContent = element)}\r\n tabindex={this.truncate && this.isTruncated ? 0 : undefined}\r\n onMouseEnter={() => (this.textHover = true)}\r\n onMouseLeave={() => (this.textHover = false)}\r\n onFocus={() => (this.textFocus = true)}\r\n onBlur={() => (this.textFocus = false)}\r\n >\r\n <slot></slot>\r\n </span>\r\n {this.removable && (\r\n <button\r\n type=\"button\"\r\n onClick={(e) => this.dsoRemoveClick.emit(e)}\r\n onMouseEnter={() => (this.removeHover = true)}\r\n onMouseLeave={() => (this.removeHover = false)}\r\n onFocus={() => (this.removeFocus = true)}\r\n onBlur={() => (this.removeFocus = false)}\r\n >\r\n <span class=\"sr-only\">Verwijder: {this.labelText}</span>\r\n <dso-icon icon=\"times\"></dso-icon>\r\n </button>\r\n )}\r\n </span>\r\n {this.isTruncated && (\r\n <dso-tooltip\r\n stateless\r\n id=\"toggle-anchor\"\r\n active={this.textHover \|\| this.textFocus}\r\n position=\"top\"\r\n strategy=\"absolute\"\r\n >\r\n {this.labelText}\r\n </dso-tooltip>\r\n )}\r\n </Fragment>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"label.js","mappings":"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","names":[],"sources":["src/components/label/label.scss?tag=dso-label&encapsulation=shadow","src/components/label/label.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/label\";\r\n\r\n:host {\r\n display: inline-block;\r\n max-inline-size: 100%;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n// Todo: Replace .sr-only selector with web component specific selector, no need for .sr-only if we can generate the SCSS\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n.dso-label {\r\n @include label.root();\r\n\r\n &.dso-hover {\r\n .dso-label-content {\r\n text-decoration: line-through;\r\n }\r\n }\r\n}\r\n\r\n.dso-truncate.dso-label-content {\r\n display: inline-block;\r\n max-inline-size: 100%;\r\n overflow: hidden;\r\n text-overflow: ellipsis; // stylelint-disable-line declaration-property-value-disallowed-list -- full text can be viewed via tooltip.\r\n vertical-align: bottom;\r\n white-space: nowrap; // stylelint-disable-line declaration-property-value-disallowed-list -- full text can be viewed via tooltip.\r\n}\r\n\r\n:host([removable]) {\r\n .dso-truncate.dso-label-content {\r\n max-inline-size: calc(100% - (units.$u3 + 4px));\r\n }\r\n}\r\n","import {\r\n h,\r\n Component,\r\n ComponentInterface,\r\n Element,\r\n Event,\r\n EventEmitter,\r\n Fragment,\r\n Method,\r\n Prop,\r\n State,\r\n Watch,\r\n Listen,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport debounce from \"debounce\";\r\nimport { LabelStatus } from \"./label.interfaces\";\r\n\r\nconst resizeObserver = new ResizeObserver(\r\n debounce((entries: ResizeObserverEntry[]) => {\r\n entries.forEach(({ target }) => {\r\n if (isDsoLabelComponent(target)) {\r\n target._truncateLabel();\r\n }\r\n });\r\n }, 150),\r\n);\r\n\r\nfunction isDsoLabelComponent(element: Element): element is HTMLDsoLabelElement {\r\n return element.tagName === \"DSO-LABEL\";\r\n}\r\n\r\nfunction hasEllipses(el: HTMLElement): boolean {\r\n return el.scrollWidth > el.clientWidth;\r\n}\r\n\r\n@Component({\r\n tag: \"dso-label\",\r\n styleUrl: \"label.scss\",\r\n shadow: true,\r\n})\r\nexport class Label implements ComponentInterface {\r\n private labelContent: HTMLSpanElement \| undefined;\r\n\r\n private mutationObserver?: MutationObserver;\r\n\r\n @Element()\r\n private host!: HTMLDsoLabelElement;\r\n\r\n /*\r\n For compact Label\r\n /\r\n @Prop()\r\n compact?: boolean;\r\n\r\n /\r\n Shows a button that can be used to remove the Label.\r\n /\r\n @Prop({ reflect: true })\r\n removable?: boolean;\r\n\r\n /\r\n The status of this Label.\r\n /\r\n @Prop()\r\n status?: LabelStatus;\r\n\r\n /\r\n Emitted when the user activates the remove button.\r\n /\r\n @Event()\r\n dsoRemoveClick!: EventEmitter<MouseEvent>;\r\n\r\n @State()\r\n removeHover?: boolean;\r\n\r\n @State()\r\n removeFocus?: boolean;\r\n\r\n /\r\n Whether the Label is allowed to truncate the contents if it does not fit the container element.\r\n /\r\n @Prop()\r\n truncate?: boolean;\r\n\r\n @State()\r\n textHover?: boolean;\r\n\r\n @State()\r\n textFocus?: boolean;\r\n\r\n @State()\r\n isTruncated = false;\r\n\r\n @State()\r\n labelText = \"\";\r\n\r\n @Watch(\"removable\")\r\n watchRemovable(removable: boolean) {\r\n if (removable) {\r\n this.startMutationObserver();\r\n } else {\r\n this.stopMutationObserver();\r\n }\r\n }\r\n\r\n @Watch(\"truncate\")\r\n watchTruncate(truncate: boolean) {\r\n if (truncate) {\r\n this.startTruncate();\r\n } else {\r\n this.stopTruncate();\r\n }\r\n }\r\n\r\n @Listen(\"keydown\", { target: \"document\" })\r\n keyDownListener(event: KeyboardEvent) {\r\n if (event.key === \"Escape\") {\r\n this.textHover = false;\r\n this.textFocus = false;\r\n }\r\n }\r\n\r\n /\r\n @internal\r\n /\r\n @Method()\r\n async _truncateLabel() {\r\n setTimeout(() => {\r\n this.isTruncated = !!this.labelContent && hasEllipses(this.labelContent);\r\n });\r\n }\r\n\r\n private syncLabelText() {\r\n this.labelText = this.host.textContent?.trim() ?? \"\";\r\n }\r\n\r\n componentDidLoad() {\r\n if (this.truncate) {\r\n this.startTruncate();\r\n }\r\n\r\n if (this.removable) {\r\n this.startMutationObserver();\r\n }\r\n }\r\n\r\n disconnectedCallback() {\r\n this.stopTruncate();\r\n\r\n this.stopMutationObserver(true);\r\n }\r\n\r\n /* The mutationObserver fetches the text placed inside the label, this is then used for the remove button and tooltip. */\r\n private startMutationObserver(): void {\r\n this.mutationObserver = new MutationObserver(() => this.syncLabelText());\r\n\r\n this.mutationObserver.observe(this.host, {\r\n characterData: true,\r\n childList: true,\r\n subtree: true,\r\n attributes: true,\r\n });\r\n\r\n this.syncLabelText();\r\n }\r\n\r\n private stopMutationObserver(force = false): void {\r\n if (force \|\| !(this.truncate && this.removable)) {\r\n this.mutationObserver?.disconnect();\r\n\r\n delete this.mutationObserver;\r\n }\r\n }\r\n\r\n private startTruncate(): void {\r\n resizeObserver.observe(this.host);\r\n this.startMutationObserver();\r\n this._truncateLabel();\r\n }\r\n\r\n private stopTruncate(): void {\r\n resizeObserver.unobserve(this.host);\r\n this.stopMutationObserver();\r\n this.isTruncated = false;\r\n }\r\n\r\n render() {\r\n return (\r\n <Fragment>\r\n <span\r\n aria-describedby=\"toggle-anchor\"\r\n class={clsx(\"dso-label\", {\r\n [`dso-label-${this.status}`]: this.status,\r\n \"dso-compact\": this.compact && !this.removable,\r\n \"dso-hover\": this.removeHover \|\| this.removeFocus,\r\n })}\r\n >\r\n <slot name=\"symbol\"></slot>\r\n <span\r\n class={clsx(\"dso-label-content\", {\r\n \"dso-truncate\": !!this.truncate,\r\n })}\r\n ref={(element) => (this.labelContent = element)}\r\n tabindex={this.truncate && this.isTruncated ? 0 : undefined}\r\n onMouseEnter={() => (this.textHover = true)}\r\n onMouseLeave={() => (this.textHover = false)}\r\n onFocus={() => (this.textFocus = true)}\r\n onBlur={() => (this.textFocus = false)}\r\n >\r\n <slot></slot>\r\n </span>\r\n {this.removable && (\r\n <button\r\n type=\"button\"\r\n onClick={(e) => this.dsoRemoveClick.emit(e)}\r\n onMouseEnter={() => (this.removeHover = true)}\r\n onMouseLeave={() => (this.removeHover = false)}\r\n onFocus={() => (this.removeFocus = true)}\r\n onBlur={() => (this.removeFocus = false)}\r\n >\r\n <span class=\"sr-only\">Verwijder: {this.labelText}</span>\r\n <dso-icon icon=\"times\"></dso-icon>\r\n </button>\r\n )}\r\n </span>\r\n {this.isTruncated && (\r\n <dso-tooltip\r\n stateless\r\n id=\"toggle-anchor\"\r\n active={this.textHover \|\| this.textFocus}\r\n position=\"top\"\r\n strategy=\"absolute\"\r\n >\r\n {this.labelText}\r\n </dso-tooltip>\r\n )}\r\n </Fragment>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/components/ozon-content.js CHANGED Viewed

@@ -1038,13 +1038,14 @@ const OzonContent = /*@__PURE__*/ proxyCustomElement(class OzonContent extends H
         this.__attachShadow();
         this.dsoAnchorClick = createEvent(this, "dsoAnchorClick", 3);
         this.dsoOzonContentMarkItemHighlight = createEvent(this, "dsoOzonContentMarkItemHighlight", 3);
+        /**
+         * Setting this property creates dso-ozon-content as inline element instead of a block element.
+         */
+        this.inline = false;
+        this.state = {};
         this.handleMarkItemHighlight = (text, elementRef) => {
             this.dsoOzonContentMarkItemHighlight.emit({ text, elementRef });
         };
-        this.content = undefined;
-        this.inline = false;
-        this.mark = undefined;
-        this.state = {};
     }
     contentWatcher() {
         this.state = {};