npm - @dso-toolkit/core - Versions diffs - 64.0.0 → 65.0.1 - Mend

@dso-toolkit/core 64.0.0 → 65.0.1

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 (316) hide show

package/dist/cjs/dso-mark-bar.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dso-mark-bar.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,UAAU,GAAG,u9EAAu9E,CAAC;AAC3+E,yBAAe,UAAU;;MCYZ,OAAO;;;;;;;QA+DV,gBAAW,GAAG,CAAC,CAAQ;YAC7B,IAAI,EAAE,CAAC,CAAC,MAAM,YAAY,gBAAgB,CAAC,EAAE;gBAC3C,OAAO;aACR;YAED,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;gBACjB,aAAa,EAAE,CAAC;gBAChB,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK;aACtB,CAAC,CAAC;SACJ,CAAC;QAEM,eAAU,GAAG,CAAC,CAA6B;YACjD,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,CAAC;SACzC,CAAC;QAEM,mBAAc,GAAG,CAAC,CAAa;YACrC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,CAAC;SAC7C,CAAC;QAEM,gBAAW,GAAG,CAAC,CAAa;YAClC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,CAAC;SAC1C,CAAC;QAEM,kBAAa,GAAG,CAAC,CAAgB;YACvC,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;gBACrB,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;aACpB;SACF,CAAC;;qBA/EM,oBAAoB;;;;;;;IAkB5B,MAAM,QAAQ,CAAC,UAA+B,EAAE;;QAC9C,MAAA,IAAI,CAAC,YAAY,0CAAE,KAAK,EAAE,CAAC;QAE3B,IAAI,OAAO,CAAC,MAAM,EAAE;YAClB,MAAA,IAAI,CAAC,YAAY,0CAAE,MAAM,EAAE,CAAC;SAC7B;KACF;IAyDD,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC;QAClC,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,IAAI,CAAC,CAAC;QAExC,QACEA,kEAAK,KAAK,EAAC,cAAc,IACvBA,kEAAK,KAAK,EAAC,oBAAoB,IAC7BA,oEACE,IAAI,EAAC,MAAM,EACX,EAAE,EAAC,cAAc,EACjB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,WAAW,EAAC,GAAG,EACf,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC,GAC/C,EACFA,oEAAO,OAAO,EAAC,cAAc,IAC3BA,uEAAU,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAC,QAAQ,GAAY,EAC3DA,mEAAM,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,KAAK,CAAQ,CACtC,EACRA,qEAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW,IAC7CA,uEAAU,IAAI,EAAC,OAAO,GAAY,EAClCA,mEAAM,KAAK,EAAC,SAAS,yBAA0B,CACxC,CACL,EACNA,kEAAK,KAAK,EAAC,sBAAsB,IAC/BA,mEAAM,KAAK,EAAC,SAAS,GAAG,EACxBA,qEAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,CAAC,cAAc,EAAE,QAAQ,EAAE,OAAO,IAAI,CAAC,IACxEA,uEAAU,IAAI,EAAC,YAAY,EAAC,KAAK,EAAC,UAAU,GAAY,EACxDA,mEAAM,KAAK,EAAC,SAAS,0BAA2B,CACzC,EACTA,qEACG,OAAO,OAAG,UAAU,CAChB,EACPA,qEAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,CAAC,UAAU,EAAE,QAAQ,EAAE,OAAO,IAAI,UAAU,IAC7EA,uEAAU,IAAI,EAAC,cAAc,EAAC,KAAK,EAAC,UAAU,GAAY,EAC1DA,mEAAM,KAAK,EAAC,SAAS,4BAA6B,CAC3C,CACL,CACF,EACN;KACH;;;;;;","names":["h"],"sources":["src/components/mark-bar/mark-bar.scss?tag=dso-mark-bar&encapsulation=shadow","src/components/mark-bar/mark-bar.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/scaffolding\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/components/form-control\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n display: block;\r\n background-color: colors.$wit;\r\n}\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n$block-size: units.$ru5;\r\n$focus-border-width: 1px;\r\n\r\n.dso-mark-bar {\r\n display: flex;\r\n flex-grow: 1;\r\n\r\n .dso-mark-bar-input {\r\n display: flex;\r\n position: relative;\r\n inline-size: 100%;\r\n\r\n input {\r\n background-color: transparent;\r\n background-image: none;\r\n border: 1px solid form-control.$focus-border-color;\r\n border-radius: 4px;\r\n border-width: 1px;\r\n box-shadow: none;\r\n display: block;\r\n font-size: typography.$root-font-size-base;\r\n block-size: $block-size;\r\n line-height: $block-size;\r\n padding-inline: $block-size;\r\n padding-block: 6px;\r\n transition:\r\n border-color ease-in-out 0.15s,\r\n box-shadow ease-in-out 0.15s;\r\n inline-size: 100%;\r\n border-start-end-radius: 0;\r\n border-end-end-radius: 0;\r\n border-inline-end: 0;\r\n\r\n &:focus {\r\n border-color: form-control.$focus-border-color;\r\n box-shadow: inset 0 0 0 form-control.$focus-border-width form-control.$focus-border-color;\r\n outline: 0;\r\n }\r\n\r\n &::-ms-clear {\r\n display: none;\r\n }\r\n\r\n &:not(:placeholder-shown) + label {\r\n inline-size: $block-size;\r\n padding-inline-end: units.$u1;\r\n\r\n .label-text {\r\n @include utilities.sr-only();\r\n }\r\n }\r\n }\r\n\r\n label {\r\n inset-block-end: units.$u1;\r\n block-size: $block-size;\r\n inset-inline-start: 0;\r\n inset-inline-end: units.$u5;\r\n padding-block: units.$u1;\r\n padding-inline-start: units.$u1;\r\n cursor: text;\r\n position: absolute;\r\n inset-block-start: 0;\r\n overflow: hidden;\r\n /* stylelint-disable declaration-property-value-disallowed-list -- The following properties are needed to emulate the browser native placeholder attribute behavior /\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n / stylelint-enable-next-line declaration-property-value-disallowed-list /\r\n\r\n dso-icon {\r\n color: colors.$grasgroen;\r\n cursor: default;\r\n margin: -8px;\r\n padding: 8px;\r\n inline-size: $block-size;\r\n block-size: $block-size;\r\n }\r\n\r\n .label-text {\r\n margin-inline-start: units.$u1;\r\n color: colors.$grijs-60;\r\n }\r\n }\r\n\r\n button {\r\n background-color: transparent;\r\n border: 0;\r\n box-shadow: none;\r\n color: colors.$grasgroen;\r\n font-size: 0;\r\n block-size: $block-size;\r\n padding: units.$u1;\r\n position: absolute;\r\n inset-inline-end: 0;\r\n text-align: center;\r\n inset-block-start: 0;\r\n inline-size: $block-size;\r\n }\r\n }\r\n}\r\n\r\n.dso-button-container {\r\n position: relative;\r\n\r\n display: flex;\r\n align-items: center;\r\n gap: units.$u1;\r\n flex-shrink: 0;\r\n\r\n padding-inline: units.$u1;\r\n\r\n border: 1px solid colors.$bosgroen;\r\n border-inline-start: 0;\r\n border-start-end-radius: scaffolding.$border-radius-base;\r\n border-end-end-radius: scaffolding.$border-radius-base;\r\n\r\n button {\r\n appearance: none;\r\n padding: 0;\r\n border: 0;\r\n background-color: transparent;\r\n color: colors.$grasgroen;\r\n\r\n &:disabled {\r\n color: colors.$grijs-20;\r\n }\r\n }\r\n\r\n .divider {\r\n position: absolute;\r\n inset-inline-start: 0;\r\n inset-block-start: units.$u1;\r\n inset-block-end: units.$u1;\r\n\r\n inline-size: 1px;\r\n\r\n background-color: colors.$grijs-20;\r\n }\r\n}\r\n","import { h, Component, ComponentInterface, Prop, Event, EventEmitter, Method } from \"@stencil/core\";\r\nimport {\r\n MarkBarInputEvent,\r\n MarkBarClearEvent,\r\n MarkBarPaginationEvent,\r\n MarkBarFocusOptions,\r\n} from \"./mark-bar.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-mark-bar\",\r\n styleUrl: \"./mark-bar.scss\",\r\n shadow: true,\r\n})\r\nexport class MarkBar implements ComponentInterface {\r\n /\r\n The current search value.\r\n /\r\n @Prop()\r\n value?: string;\r\n\r\n /\r\n The label for the input field.\r\n /\r\n @Prop()\r\n label = \"Zoeken in document\";\r\n\r\n /\r\n The current (one-based) highlighted search item.\r\n /\r\n @Prop()\r\n current?: number;\r\n\r\n /\r\n Total number of search results.\r\n /\r\n @Prop()\r\n totalCount?: number;\r\n\r\n /\r\n Focuses the input field.\r\n /\r\n @Method()\r\n async dsoFocus(options: MarkBarFocusOptions = {}) {\r\n this.inputElement?.focus();\r\n\r\n if (options.select) {\r\n this.inputElement?.select();\r\n }\r\n }\r\n\r\n /\r\n Emitted each time the user types in the search field.\r\n /\r\n @Event({ bubbles: false })\r\n dsoInput!: EventEmitter<MarkBarInputEvent>;\r\n\r\n /\r\n Emitted when user activates \"next search result\" button.\r\n /\r\n @Event({ bubbles: false })\r\n dsoNext!: EventEmitter<MarkBarPaginationEvent>;\r\n\r\n /\r\n Emitted when user activates \"previous search result\" button.\r\n /\r\n @Event({ bubbles: false })\r\n dsoPrevious!: EventEmitter<MarkBarPaginationEvent>;\r\n\r\n /\r\n Emitted when user activates \"clear search result\" button.\r\n */\r\n @Event({ bubbles: false })\r\n dsoClear!: EventEmitter<MarkBarClearEvent>;\r\n\r\n private inputElement?: HTMLInputElement;\r\n\r\n private handleInput = (e: Event) => {\r\n if (!(e.target instanceof HTMLInputElement)) {\r\n return;\r\n }\r\n\r\n this.dsoInput.emit({\r\n originalEvent: e,\r\n value: e.target.value,\r\n });\r\n };\r\n\r\n private handleNext = (e: MouseEvent \| KeyboardEvent) => {\r\n this.dsoNext.emit({ originalEvent: e });\r\n };\r\n\r\n private handlePrevious = (e: MouseEvent) => {\r\n this.dsoPrevious.emit({ originalEvent: e });\r\n };\r\n\r\n private handleClear = (e: MouseEvent) => {\r\n this.dsoClear.emit({ originalEvent: e });\r\n };\r\n\r\n private handleKeyDown = (e: KeyboardEvent) => {\r\n if (e.key === \"Enter\") {\r\n this.handleNext(e);\r\n }\r\n };\r\n\r\n render() {\r\n const current = this.current \|\| 0;\r\n const totalCount = this.totalCount \|\| 0;\r\n\r\n return (\r\n <div class=\"dso-mark-bar\">\r\n <div class=\"dso-mark-bar-input\">\r\n <input\r\n type=\"text\"\r\n id=\"search-input\"\r\n value={this.value}\r\n onInput={this.handleInput}\r\n onKeyDown={this.handleKeyDown}\r\n placeholder=\" \"\r\n ref={(element) => (this.inputElement = element)}\r\n />\r\n <label htmlFor=\"search-input\">\r\n <dso-icon class=\"dso-search-icon\" icon=\"search\"></dso-icon>\r\n <span class=\"label-text\">{this.label}</span>\r\n </label>\r\n <button type=\"button\" onClick={this.handleClear}>\r\n <dso-icon icon=\"times\"></dso-icon>\r\n <span class=\"sr-only\">Zoekopdracht legen</span>\r\n </button>\r\n </div>\r\n <div class=\"dso-button-container\">\r\n <span class=\"divider\" />\r\n <button type=\"button\" onClick={this.handlePrevious} disabled={current <= 1}>\r\n <dso-icon icon=\"chevron-up\" class=\"hydrated\"></dso-icon>\r\n <span class=\"sr-only\">Vorig zoekresultaat</span>\r\n </button>\r\n <span>\r\n {current}/{totalCount}\r\n </span>\r\n <button type=\"button\" onClick={this.handleNext} disabled={current >= totalCount}>\r\n <dso-icon icon=\"chevron-down\" class=\"hydrated\"></dso-icon>\r\n <span class=\"sr-only\">Volgend zoekresultaat</span>\r\n </button>\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"dso-mark-bar.entry.cjs.js","mappings":"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","names":["h"],"sources":["src/components/mark-bar/mark-bar.scss?tag=dso-mark-bar&encapsulation=shadow","src/components/mark-bar/mark-bar.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/scaffolding\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/components/form-control\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n display: block;\r\n background-color: colors.$wit;\r\n}\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n$block-size: units.$ru5;\r\n$focus-border-width: 1px;\r\n\r\n.dso-mark-bar {\r\n display: flex;\r\n flex-grow: 1;\r\n\r\n .dso-mark-bar-input {\r\n display: flex;\r\n position: relative;\r\n inline-size: 100%;\r\n\r\n input {\r\n background-color: transparent;\r\n background-image: none;\r\n border: 1px solid form-control.$focus-border-color;\r\n border-radius: 4px;\r\n border-width: 1px;\r\n box-shadow: none;\r\n display: block;\r\n font-size: typography.$root-font-size-base;\r\n block-size: $block-size;\r\n line-height: $block-size;\r\n padding-inline: $block-size;\r\n padding-block: 6px;\r\n transition:\r\n border-color ease-in-out 0.15s,\r\n box-shadow ease-in-out 0.15s;\r\n inline-size: 100%;\r\n border-start-end-radius: 0;\r\n border-end-end-radius: 0;\r\n border-inline-end: 0;\r\n\r\n &:focus {\r\n border-color: form-control.$focus-border-color;\r\n box-shadow: inset 0 0 0 form-control.$focus-border-width form-control.$focus-border-color;\r\n outline: 0;\r\n }\r\n\r\n &::-ms-clear {\r\n display: none;\r\n }\r\n\r\n &:not(:placeholder-shown) + label {\r\n inline-size: $block-size;\r\n padding-inline-end: units.$u1;\r\n\r\n .label-text {\r\n @include utilities.sr-only();\r\n }\r\n }\r\n }\r\n\r\n label {\r\n inset-block-end: units.$u1;\r\n block-size: $block-size;\r\n inset-inline-start: 0;\r\n inset-inline-end: units.$u5;\r\n padding-block: units.$u1;\r\n padding-inline-start: units.$u1;\r\n cursor: text;\r\n position: absolute;\r\n inset-block-start: 0;\r\n overflow: hidden;\r\n /* stylelint-disable declaration-property-value-disallowed-list -- The following properties are needed to emulate the browser native placeholder attribute behavior /\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n / stylelint-enable-next-line declaration-property-value-disallowed-list /\r\n\r\n dso-icon {\r\n color: colors.$grasgroen;\r\n cursor: default;\r\n margin: -8px;\r\n padding: 8px;\r\n inline-size: $block-size;\r\n block-size: $block-size;\r\n }\r\n\r\n .label-text {\r\n margin-inline-start: units.$u1;\r\n color: colors.$grijs-60;\r\n }\r\n }\r\n\r\n button {\r\n background-color: transparent;\r\n border: 0;\r\n box-shadow: none;\r\n color: colors.$grasgroen;\r\n font-size: 0;\r\n block-size: $block-size;\r\n padding: units.$u1;\r\n position: absolute;\r\n inset-inline-end: 0;\r\n text-align: center;\r\n inset-block-start: 0;\r\n inline-size: $block-size;\r\n cursor: pointer;\r\n }\r\n }\r\n}\r\n\r\n.dso-button-container {\r\n position: relative;\r\n\r\n display: flex;\r\n align-items: center;\r\n gap: units.$u1;\r\n flex-shrink: 0;\r\n\r\n padding-inline: units.$u1;\r\n\r\n border: 1px solid colors.$bosgroen;\r\n border-inline-start: 0;\r\n border-start-end-radius: scaffolding.$border-radius-base;\r\n border-end-end-radius: scaffolding.$border-radius-base;\r\n\r\n button {\r\n appearance: none;\r\n padding: 0;\r\n border: 0;\r\n background-color: transparent;\r\n color: colors.$grasgroen;\r\n cursor: pointer;\r\n\r\n &:disabled {\r\n color: colors.$grijs-20;\r\n cursor: default;\r\n }\r\n }\r\n\r\n .divider {\r\n position: absolute;\r\n inset-inline-start: 0;\r\n inset-block-start: units.$u1;\r\n inset-block-end: units.$u1;\r\n\r\n inline-size: 1px;\r\n\r\n background-color: colors.$grijs-20;\r\n }\r\n}\r\n","import { h, Component, ComponentInterface, Prop, Event, EventEmitter, Method } from \"@stencil/core\";\r\nimport {\r\n MarkBarInputEvent,\r\n MarkBarClearEvent,\r\n MarkBarPaginationEvent,\r\n MarkBarFocusOptions,\r\n} from \"./mark-bar.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-mark-bar\",\r\n styleUrl: \"./mark-bar.scss\",\r\n shadow: true,\r\n})\r\nexport class MarkBar implements ComponentInterface {\r\n /\r\n The current search value.\r\n /\r\n @Prop()\r\n value?: string;\r\n\r\n /\r\n The label for the input field.\r\n /\r\n @Prop()\r\n label = \"Zoeken in document\";\r\n\r\n /\r\n The current (one-based) highlighted search item.\r\n /\r\n @Prop()\r\n current?: number;\r\n\r\n /\r\n Total number of search results.\r\n /\r\n @Prop()\r\n totalCount?: number;\r\n\r\n /\r\n Focuses the input field.\r\n /\r\n @Method()\r\n async dsoFocus(options: MarkBarFocusOptions = {}) {\r\n this.inputElement?.focus();\r\n\r\n if (options.select) {\r\n this.inputElement?.select();\r\n }\r\n }\r\n\r\n /\r\n Emitted each time the user types in the search field.\r\n /\r\n @Event({ bubbles: false })\r\n dsoInput!: EventEmitter<MarkBarInputEvent>;\r\n\r\n /\r\n Emitted when user activates \"next search result\" button.\r\n /\r\n @Event({ bubbles: false })\r\n dsoNext!: EventEmitter<MarkBarPaginationEvent>;\r\n\r\n /\r\n Emitted when user activates \"previous search result\" button.\r\n /\r\n @Event({ bubbles: false })\r\n dsoPrevious!: EventEmitter<MarkBarPaginationEvent>;\r\n\r\n /\r\n Emitted when user activates \"clear search result\" button.\r\n */\r\n @Event({ bubbles: false })\r\n dsoClear!: EventEmitter<MarkBarClearEvent>;\r\n\r\n private inputElement?: HTMLInputElement;\r\n\r\n private handleInput = (e: Event) => {\r\n if (!(e.target instanceof HTMLInputElement)) {\r\n return;\r\n }\r\n\r\n this.dsoInput.emit({\r\n originalEvent: e,\r\n value: e.target.value,\r\n });\r\n };\r\n\r\n private handleNext = (e: MouseEvent \| KeyboardEvent) => {\r\n this.dsoNext.emit({ originalEvent: e });\r\n };\r\n\r\n private handlePrevious = (e: MouseEvent) => {\r\n this.dsoPrevious.emit({ originalEvent: e });\r\n };\r\n\r\n private handleClear = (e: MouseEvent) => {\r\n this.dsoClear.emit({ originalEvent: e });\r\n };\r\n\r\n private handleKeyDown = (e: KeyboardEvent) => {\r\n if (e.key === \"Enter\") {\r\n this.handleNext(e);\r\n }\r\n };\r\n\r\n render() {\r\n const current = this.current \|\| 0;\r\n const totalCount = this.totalCount \|\| 0;\r\n\r\n return (\r\n <div class=\"dso-mark-bar\">\r\n <div class=\"dso-mark-bar-input\">\r\n <input\r\n type=\"text\"\r\n id=\"search-input\"\r\n value={this.value}\r\n onInput={this.handleInput}\r\n onKeyDown={this.handleKeyDown}\r\n placeholder=\" \"\r\n ref={(element) => (this.inputElement = element)}\r\n />\r\n <label htmlFor=\"search-input\">\r\n <dso-icon class=\"dso-search-icon\" icon=\"search\"></dso-icon>\r\n <span class=\"label-text\">{this.label}</span>\r\n </label>\r\n <button type=\"button\" onClick={this.handleClear}>\r\n <dso-icon icon=\"times\"></dso-icon>\r\n <span class=\"sr-only\">Zoekopdracht legen</span>\r\n </button>\r\n </div>\r\n <div class=\"dso-button-container\">\r\n <span class=\"divider\" />\r\n <button type=\"button\" onClick={this.handlePrevious} disabled={current <= 1}>\r\n <dso-icon icon=\"chevron-up\" class=\"hydrated\"></dso-icon>\r\n <span class=\"sr-only\">Vorig zoekresultaat</span>\r\n </button>\r\n <span>\r\n {current}/{totalCount}\r\n </span>\r\n <button type=\"button\" onClick={this.handleNext} disabled={current >= totalCount}>\r\n <dso-icon icon=\"chevron-down\" class=\"hydrated\"></dso-icon>\r\n <span class=\"sr-only\">Volgend zoekresultaat</span>\r\n </button>\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/cjs/dso-modal.cjs.entry.js CHANGED Viewed

@@ -6,7 +6,7 @@ const index = require('./index-848434f1.js');
 const getActiveElement = require('./get-active-element-05f06ef1.js');
 const v4 = require('./v4-7014b8b0.js');
-const modalCss = "@keyframes ModalFadeIn{0%{opacity:0}100%{opacity:1}}*,*::after,*::before{box-sizing:border-box}:host{display:block}:host([fullscreen]) dialog{inline-size:100dvi;block-size:100dvb}:host([fullscreen]) dialog .dso-dialog{display:flex;flex-direction:column;inline-size:100%;block-size:100%}:host([fullscreen]) dialog .dso-dialog>dso-scrollable{flex-grow:1;max-block-size:unset}:host([fullscreen]) dialog .dso-footer{flex-shrink:0}@media screen and (max-width: 480px){:host dialog{inline-size:100dvi;block-size:100dvb}:host dialog .dso-dialog{display:flex;flex-direction:column;inline-size:100%;block-size:100%}:host dialog .dso-dialog>dso-scrollable{flex-grow:1;max-block-size:unset}:host dialog .dso-footer{flex-shrink:0}}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}button{-webkit-appearance:button;color:inherit;cursor:pointer;font:inherit;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;overflow:visible;text-transform:none}button[disabled]{cursor:default}button::-moz-focus-inner{border:0;padding:0}.dso-modal{overflow:visible;padding:0;border:0}.dso-modal::backdrop{background-color:rgba(255, 255, 255, 0.8)}.dso-modal .dso-dialog{inline-size:640px;background-color:#fff;opacity:1;box-shadow:0 8px 24px 0 rgba(25, 25, 25, 0.4);animation:200ms ease-out 0s 1 ModalFadeIn}.dso-modal .dso-header{position:relative;padding:16px;border-block-end:1px solid #ccc}.dso-modal .dso-header h2{max-inline-size:calc(100% - 24px);margin:0;color:#275937}.dso-modal .dso-header .dso-close{position:absolute;inset-block-start:16px;inset-inline-end:13px;block-size:32px;inline-size:32px;padding:0;background-color:transparent;border:0;text-align:center}.dso-modal>.dso-dialog>.dso-body{block-size:calc(100% - 96px - 1.5rem);max-block-size:calc(70vh - 144px - 1.5em);min-block-size:1.5rem;overflow-x:auto;padding:32px}.dso-modal>.dso-dialog>.dso-body p{margin-block:0 16px;margin-inline:0}.dso-modal>.dso-dialog>.dso-body ul,.dso-modal>.dso-dialog>.dso-body ol{margin-block-end:16px}.dso-modal>.dso-dialog>.dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),.dso-modal>.dso-dialog>.dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list){padding-inline-start:24px}.dso-modal>.dso-dialog>.dso-body ul ul,.dso-modal>.dso-dialog>.dso-body ul ol,.dso-modal>.dso-dialog>.dso-body ol ul,.dso-modal>.dso-dialog>.dso-body ol ol{margin-block-end:0}.dso-modal>.dso-dialog>.dso-body pre{margin-block:0 16px;margin-inline:0}.dso-modal>.dso-dialog>.dso-body blockquote{padding-block:16px;padding-inline:24px}.dso-modal>.dso-dialog>.dso-body dso-highlight-box,.dso-modal>.dso-dialog>.dso-body .dso-highlight-box{margin-block-end:24px}.dso-modal>.dso-dialog>.dso-body img{block-size:auto;max-inline-size:100%}.dso-modal>.dso-dialog>dso-scrollable{block-size:calc(100% - 96px - 1.5rem);max-block-size:calc(70vh - 144px - 1.5em);min-block-size:6.5rem}.dso-modal>.dso-dialog>dso-scrollable .dso-body{padding:32px}.dso-modal>.dso-dialog>dso-scrollable .dso-body p{margin-block:0 16px;margin-inline:0}.dso-modal>.dso-dialog>dso-scrollable .dso-body ul,.dso-modal>.dso-dialog>dso-scrollable .dso-body ol{margin-block-end:16px}.dso-modal>.dso-dialog>dso-scrollable .dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),.dso-modal>.dso-dialog>dso-scrollable .dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list){padding-inline-start:24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body ul ul,.dso-modal>.dso-dialog>dso-scrollable .dso-body ul ol,.dso-modal>.dso-dialog>dso-scrollable .dso-body ol ul,.dso-modal>.dso-dialog>dso-scrollable .dso-body ol ol{margin-block-end:0}.dso-modal>.dso-dialog>dso-scrollable .dso-body pre{margin-block:0 16px;margin-inline:0}.dso-modal>.dso-dialog>dso-scrollable .dso-body blockquote{padding-block:16px;padding-inline:24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body dso-highlight-box,.dso-modal>.dso-dialog>dso-scrollable .dso-body .dso-highlight-box{margin-block-end:24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body img{block-size:auto;max-inline-size:100%}.dso-modal .dso-body:focus-visible{outline:none}.dso-modal .dso-footer{min-block-size:80px;padding-block:16px;padding-inline:32px;text-align:end}@media screen and (max-width: 767px){.dso-modal .dso-footer .dso-primary+.dso-primary,.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.dso-primary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.dso-primary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-inline-start:0}.dso-modal .dso-footer button{inline-size:100%;text-align:center}.dso-modal .dso-footer button+button{margin-block-start:8px}.dso-modal .dso-footer button.dso-tertiary,.dso-modal .dso-footer button.dso-tertiary span{float:none}}@media screen and (min-width: 768px){.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary{margin-inline-start:16px}.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-inline-start:0}}@media screen and (max-width: 767px){.dso-modal .dso-dialog{max-inline-size:100%;margin-block-start:0}.dso-modal .dso-footer .dso-primary+.dso-primary,.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.dso-primary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.dso-primary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-inline-start:0}.dso-modal .dso-footer button{inline-size:100%;text-align:center}.dso-modal .dso-footer button+button{margin-block-start:8px}.dso-modal .dso-footer button.dso-tertiary,.dso-modal .dso-footer button.dso-tertiary span{float:none}}@media screen and (max-height: 380px){.dso-modal .dso-dialog{min-block-size:216px;margin-block-start:8px;margin-block-end:8px}.dso-modal .dso-header{padding-block:8px;padding-inline:16px}.dso-modal .dso-header .dso-close{inset-block-start:8px}.dso-modal .dso-body{padding-block:16px;padding-inline:24px}.dso-modal .dso-footer{min-block-size:auto;overflow:auto;padding-block:8px;padding-inline:32px}}.dso-close dso-icon{color:#39870c}";
+const modalCss = "@keyframes ModalFadeIn{0%{opacity:0}100%{opacity:1}}*,*::after,*::before{box-sizing:border-box}:host{display:block}:host([fullscreen]) dialog{inline-size:100dvi;block-size:100dvb}:host([fullscreen]) dialog .dso-dialog{display:flex;flex-direction:column;inline-size:100%;block-size:100%}:host([fullscreen]) dialog .dso-dialog>dso-scrollable{flex-grow:1;max-block-size:unset}:host([fullscreen]) dialog .dso-footer{flex-shrink:0}@media screen and (max-width: 480px){:host dialog{inline-size:100dvi;block-size:100dvb}:host dialog .dso-dialog{display:flex;flex-direction:column;inline-size:100%;block-size:100%}:host dialog .dso-dialog>dso-scrollable{flex-grow:1;max-block-size:unset}:host dialog .dso-footer{flex-shrink:0}}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}button{-webkit-appearance:button;color:inherit;cursor:pointer;font:inherit;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;overflow:visible;text-transform:none}button[disabled]{cursor:default}button::-moz-focus-inner{border:0;padding:0}.dso-modal{overflow:visible;padding:0;border:0}.dso-modal::backdrop{background-color:rgba(255, 255, 255, 0.8)}.dso-modal .dso-dialog{inline-size:640px;background-color:#fff;opacity:1;box-shadow:0 8px 24px 0 rgba(25, 25, 25, 0.4);animation:200ms ease-out 0s 1 ModalFadeIn}.dso-modal .dso-header{position:relative;padding:16px;border-block-end:1px solid #ccc}.dso-modal .dso-header h2{max-inline-size:calc(100% - 24px);margin:0;color:#275937}.dso-modal .dso-header .dso-close{position:absolute;inset-block-start:16px;inset-inline-end:13px;block-size:32px;inline-size:32px;padding:0;background-color:transparent;border:0;text-align:center}.dso-modal>.dso-dialog>.dso-body p{margin-block:0 16px;margin-inline:0}.dso-modal>.dso-dialog>.dso-body ul,.dso-modal>.dso-dialog>.dso-body ol{margin-block-end:16px}.dso-modal>.dso-dialog>.dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),.dso-modal>.dso-dialog>.dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list){padding-inline-start:24px}.dso-modal>.dso-dialog>.dso-body ul ul,.dso-modal>.dso-dialog>.dso-body ul ol,.dso-modal>.dso-dialog>.dso-body ol ul,.dso-modal>.dso-dialog>.dso-body ol ol{margin-block-end:0}.dso-modal>.dso-dialog>.dso-body pre{margin-block:0 16px;margin-inline:0}.dso-modal>.dso-dialog>.dso-body blockquote{padding-block:16px;padding-inline:24px}.dso-modal>.dso-dialog>.dso-body dso-highlight-box,.dso-modal>.dso-dialog>.dso-body .dso-highlight-box{margin-block-end:24px}.dso-modal>.dso-dialog>.dso-body img{block-size:auto;max-inline-size:100%}.dso-modal>.dso-dialog>.dso-body{block-size:calc(100% - 96px - 1.5rem);max-block-size:calc(70vh - 144px - 1.5em);min-block-size:1.5rem;overflow-x:auto;padding:32px}.dso-modal>.dso-dialog>dso-scrollable{block-size:calc(100% - 96px - 1.5rem);max-block-size:calc(70vh - 144px - 1.5em);min-block-size:6.5rem}.dso-modal>.dso-dialog>dso-scrollable .dso-body p{margin-block:0 16px;margin-inline:0}.dso-modal>.dso-dialog>dso-scrollable .dso-body ul,.dso-modal>.dso-dialog>dso-scrollable .dso-body ol{margin-block-end:16px}.dso-modal>.dso-dialog>dso-scrollable .dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),.dso-modal>.dso-dialog>dso-scrollable .dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list){padding-inline-start:24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body ul ul,.dso-modal>.dso-dialog>dso-scrollable .dso-body ul ol,.dso-modal>.dso-dialog>dso-scrollable .dso-body ol ul,.dso-modal>.dso-dialog>dso-scrollable .dso-body ol ol{margin-block-end:0}.dso-modal>.dso-dialog>dso-scrollable .dso-body pre{margin-block:0 16px;margin-inline:0}.dso-modal>.dso-dialog>dso-scrollable .dso-body blockquote{padding-block:16px;padding-inline:24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body dso-highlight-box,.dso-modal>.dso-dialog>dso-scrollable .dso-body .dso-highlight-box{margin-block-end:24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body img{block-size:auto;max-inline-size:100%}.dso-modal>.dso-dialog>dso-scrollable .dso-body{padding:32px}.dso-modal .dso-body:focus-visible{outline:none}@media screen and (max-width: 767px){.dso-modal .dso-footer .dso-primary+.dso-primary,.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.dso-primary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.dso-primary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-inline-start:0}.dso-modal .dso-footer button{inline-size:100%;text-align:center}.dso-modal .dso-footer button+button{margin-block-start:8px}.dso-modal .dso-footer button.dso-tertiary,.dso-modal .dso-footer button.dso-tertiary span{float:none}}.dso-modal .dso-footer{min-block-size:80px;padding-block:16px;padding-inline:32px;text-align:end}@media screen and (min-width: 768px){.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary{margin-inline-start:16px}.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-inline-start:0}}@media screen and (max-width: 767px){.dso-modal .dso-dialog{max-inline-size:100%;margin-block-start:0}.dso-modal .dso-footer .dso-primary+.dso-primary,.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.dso-primary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.dso-primary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-inline-start:0}.dso-modal .dso-footer button{inline-size:100%;text-align:center}.dso-modal .dso-footer button+button{margin-block-start:8px}.dso-modal .dso-footer button.dso-tertiary,.dso-modal .dso-footer button.dso-tertiary span{float:none}}@media screen and (max-height: 380px){.dso-modal .dso-dialog{min-block-size:216px;margin-block-start:8px;margin-block-end:8px}.dso-modal .dso-header{padding-block:8px;padding-inline:16px}.dso-modal .dso-header .dso-close{inset-block-start:8px}.dso-modal .dso-body{padding-block:16px;padding-inline:24px}.dso-modal .dso-footer{min-block-size:auto;overflow:auto;padding-block:8px;padding-inline:32px}}.dso-close dso-icon{color:#39870c}";
 const DsoModalStyle0 = modalCss;
 const Modal = class {

package/dist/cjs/dso-pagination.cjs.entry.js CHANGED Viewed

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-848434f1.js');
 const isModifiedEvent = require('./is-modified-event-f643edb2.js');
-const paginationCss = ":host{display:block}*,*::after,*::before{box-sizing:border-box}.pagination{padding-inline-start:initial;text-align:center}.pagination>li{display:inline-block;font-weight:bold;line-height:calc(2rem - 4px);text-align:center;vertical-align:middle}.pagination>li>a,.pagination>li>span{align-items:center;color:#39870c;display:flex;block-size:2rem;justify-content:center;position:relative;min-inline-size:2rem;padding:2px;padding-block:2px;padding-inline:2px}.pagination>li>a:active,.pagination>li>span:active{background-color:#ebf3e6}.pagination>li>span{border:2px solid transparent;border-radius:1rem}.pagination>li a{line-height:2rem;text-decoration:none}.pagination>li a:hover,.pagination>li a:focus{text-decoration:none}.pagination>li a:hover::after,.pagination>li a:focus::after{border-block-end-color:#39870c}.pagination>li a::after{border-block-end:3px solid transparent;inset-block-end:0;content:\"\";display:inline-block;inset-inline-start:0;position:absolute;inline-size:100%}.pagination>li.active span{background-color:#39870c;color:#fff}.pagination>li+li{margin-inline-start:8px}.dso-page-hidden{visibility:hidden}";
+const paginationCss = ":host{display:block}*,*::after,*::before{box-sizing:border-box}.pagination ul{padding-inline-start:initial;text-align:center}.pagination ul>li{display:inline-block;font-weight:bold;line-height:calc(2rem - 4px);text-align:center;vertical-align:middle}.pagination ul>li>a,.pagination ul>li>span{align-items:center;color:#39870c;display:flex;block-size:2rem;justify-content:center;position:relative;min-inline-size:2rem;padding:2px;padding-block:2px;padding-inline:2px}.pagination ul>li>a:active,.pagination ul>li>span:active{background-color:#ebf3e6}.pagination ul>li>span{border:2px solid transparent;border-radius:1rem}.pagination ul>li a{line-height:2rem;text-decoration:none}.pagination ul>li a:hover,.pagination ul>li a:focus{text-decoration:none}.pagination ul>li a:hover::after,.pagination ul>li a:focus::after{border-block-end-color:#39870c}.pagination ul>li a::after{border-block-end:3px solid transparent;inset-block-end:0;content:\"\";display:inline-block;inset-inline-start:0;position:absolute;inline-size:100%}.pagination ul>li.active span{background-color:#39870c;color:#fff}.pagination ul>li+li{margin-inline-start:8px}.dso-page-hidden{visibility:hidden}.sr-only.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}";
 const DsoPaginationStyle0 = paginationCss;
 const Pagination = class {
@@ -50,12 +50,12 @@ const Pagination = class {
         const availablePositions = this.availablePositions;
         const currentPage = (_a = this.currentPage) !== null && _a !== void 0 ? _a : 0;
         const pages = this.getPages(currentPage, this.availablePositions, this.totalPages);
-        return (index.h("dso-responsive-element", { ref: (element) => (this.responsiveElement = element) }, index.h("ul", { class: "pagination" }, index.h("li", { class: currentPage <= 1 || currentPage > this.totalPages ? "dso-page-hidden" : undefined }, index.h("a", { href: this.formatHref((_b = pages[pages.indexOf(currentPage) - 1]) !== null && _b !== void 0 ? _b : 1), "aria-label": "Vorige", onClick: (e) => { var _a; return currentPage && this.clickHandler(e, (_a = pages[pages.indexOf(currentPage) - 1]) !== null && _a !== void 0 ? _a : 1); } }, index.h("dso-icon", { icon: "chevron-left" }))), pages.map((page) => (index.h(index.Fragment, null, this.showEllipsisBeforeLast(pages, page, availablePositions) && (index.h("li", null, index.h("span", null, "..."))), index.h("li", { key: page, class: currentPage === page ? "active" : undefined }, currentPage === page ? (index.h("span", { "aria-current": "page" }, page)) : (index.h("a", { href: this.formatHref(page), onClick: (e) => this.clickHandler(e, page) }, page))), this.showEllipsisAfterFirst(pages, page, availablePositions) && (index.h("li", null, index.h("span", null, "...")))))), index.h("li", { class: currentPage < 1 || currentPage >= this.totalPages ? "dso-page-hidden" : undefined }, index.h("a", { href: this.formatHref((_c = pages[pages.indexOf(currentPage) + 1]) !== null && _c !== void 0 ? _c : this.totalPages), "aria-label": "Volgende", onClick: (e) => {
+        return (index.h("dso-responsive-element", { ref: (element) => (this.responsiveElement = element) }, index.h("nav", { class: "pagination", "aria-label": "Paginering" }, index.h("ul", null, index.h("li", { class: currentPage <= 1 || currentPage > this.totalPages ? "dso-page-hidden" : undefined }, index.h("a", { href: this.formatHref((_b = pages[pages.indexOf(currentPage) - 1]) !== null && _b !== void 0 ? _b : 1), "aria-label": "Vorige", onClick: (e) => { var _a; return currentPage && this.clickHandler(e, (_a = pages[pages.indexOf(currentPage) - 1]) !== null && _a !== void 0 ? _a : 1); } }, index.h("dso-icon", { icon: "chevron-left" }))), pages.map((page) => (index.h(index.Fragment, null, this.showEllipsisBeforeLast(pages, page, availablePositions) && (index.h("li", null, index.h("span", null, "..."))), index.h("li", { key: page, class: currentPage === page ? "active" : undefined }, currentPage === page ? (index.h("span", { "aria-current": "page" }, page)) : (index.h("a", { href: this.formatHref(page), onClick: (e) => this.clickHandler(e, page) }, page)), page === this.totalPages ? index.h("span", { class: "sr-only" }, " (laatste pagina)") : null), this.showEllipsisAfterFirst(pages, page, availablePositions) && (index.h("li", null, index.h("span", null, "...")))))), index.h("li", { class: currentPage < 1 || currentPage >= this.totalPages ? "dso-page-hidden" : undefined }, index.h("a", { href: this.formatHref((_c = pages[pages.indexOf(currentPage) + 1]) !== null && _c !== void 0 ? _c : this.totalPages), "aria-label": "Volgende", onClick: (e) => {
                 var _a;
                 return currentPage &&
                     this.totalPages &&
                     this.clickHandler(e, (_a = pages[pages.indexOf(currentPage) + 1]) !== null && _a !== void 0 ? _a : this.totalPages);
-            } }, index.h("dso-icon", { icon: "chevron-right" }))))));
+            } }, index.h("dso-icon", { icon: "chevron-right" })))))));
     }
     getAvailablePositions(sizePositions) {
         if (sizePositions % 2 === 0) {

package/dist/cjs/dso-pagination.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dso-pagination.entry.cjs.js","mappings":"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","names":["isModifiedEvent","h"],"sources":["src/components/pagination/pagination.scss?tag=dso-pagination&encapsulation=shadow","src/components/pagination/pagination.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/pagination\";\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.pagination {\r\n @include pagination.root();\r\n}\r\n\r\n.dso-page-hidden {\r\n visibility: hidden;\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 Listen,\r\n Prop,\r\n State,\r\n} from \"@stencil/core\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { ResponsiveElementSize } from \"../responsive-element/responsive-element.interfaces\";\r\nimport { PaginationSelectPageEvent } from \"./pagination.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-pagination\",\r\n styleUrl: \"pagination.scss\",\r\n shadow: true,\r\n})\r\nexport class Pagination implements ComponentInterface {\r\n private sizePositionsMap: Record<ResponsiveElementSize, number> = {\r\n small: 7,\r\n medium: 9,\r\n large: 11,\r\n };\r\n\r\n private responsiveElement?: HTMLDsoResponsiveElementElement;\r\n\r\n @Element()\r\n host!: HTMLDsoPaginationElement;\r\n\r\n @State()\r\n availablePositions?: number;\r\n /*\r\n Total pages\r\n /\r\n @Prop()\r\n totalPages?: number;\r\n\r\n /\r\n Current page\r\n /\r\n @Prop()\r\n currentPage?: number;\r\n\r\n /\r\n This function is called to format the href\r\n /\r\n @Prop()\r\n formatHref: (page: number) => string = (page) => \"#\" + page;\r\n\r\n /\r\n Emitted on page select\r\n /\r\n @Event()\r\n dsoSelectPage!: EventEmitter<PaginationSelectPageEvent>;\r\n\r\n /\r\n Listens to the dsoSizeChange event on Responsive Element\r\n */\r\n @Listen(\"dsoSizeChange\")\r\n sizeChangeHandler(event: CustomEvent<ResponsiveElementSize>) {\r\n this.availablePositions = this.getAvailablePositions(this.sizePositionsMap[event.detail]);\r\n }\r\n\r\n private clickHandler(e: MouseEvent, page: number) {\r\n this.dsoSelectPage.emit({\r\n originalEvent: e,\r\n page,\r\n isModifiedEvent: isModifiedEvent(e),\r\n });\r\n }\r\n\r\n componentDidLoad(): void {\r\n this.responsiveElement\r\n ?.getSize()\r\n .then(\r\n (size: ResponsiveElementSize) =>\r\n (this.availablePositions = this.getAvailablePositions(this.sizePositionsMap[size])),\r\n );\r\n }\r\n\r\n render() {\r\n if (!this.totalPages) {\r\n return null;\r\n }\r\n\r\n if (this.availablePositions === undefined) {\r\n return <dso-responsive-element ref={(element) => (this.responsiveElement = element)}></dso-responsive-element>;\r\n }\r\n\r\n const availablePositions = this.availablePositions;\r\n\r\n const currentPage = this.currentPage ?? 0;\r\n\r\n const pages: number[] = this.getPages(currentPage, this.availablePositions, this.totalPages);\r\n\r\n return (\r\n <dso-responsive-element ref={(element) => (this.responsiveElement = element)}>\r\n <ul class=\"pagination\">\r\n <li class={currentPage <= 1 \|\| currentPage > this.totalPages ? \"dso-page-hidden\" : undefined}>\r\n <a\r\n href={this.formatHref(pages[pages.indexOf(currentPage) - 1] ?? 1)}\r\n aria-label=\"Vorige\"\r\n onClick={(e) => currentPage && this.clickHandler(e, pages[pages.indexOf(currentPage) - 1] ?? 1)}\r\n >\r\n <dso-icon icon=\"chevron-left\"></dso-icon>\r\n </a>\r\n </li>\r\n {pages.map((page) => (\r\n <>\r\n {this.showEllipsisBeforeLast(pages, page, availablePositions) && (\r\n <li>\r\n <span>...</span>\r\n </li>\r\n )}\r\n\r\n <li key={page} class={currentPage === page ? \"active\" : undefined}>\r\n {currentPage === page ? (\r\n <span aria-current=\"page\">{page}</span>\r\n ) : (\r\n <a href={this.formatHref(page)} onClick={(e) => this.clickHandler(e, page)}>\r\n {page}\r\n </a>\r\n )}\r\n </li>\r\n\r\n {this.showEllipsisAfterFirst(pages, page, availablePositions) && (\r\n <li>\r\n <span>...</span>\r\n </li>\r\n )}\r\n </>\r\n ))}\r\n <li class={currentPage < 1 \|\| currentPage >= this.totalPages ? \"dso-page-hidden\" : undefined}>\r\n <a\r\n href={this.formatHref(pages[pages.indexOf(currentPage) + 1] ?? this.totalPages)}\r\n aria-label=\"Volgende\"\r\n onClick={(e) =>\r\n currentPage &&\r\n this.totalPages &&\r\n this.clickHandler(e, pages[pages.indexOf(currentPage) + 1] ?? this.totalPages)\r\n }\r\n >\r\n <dso-icon icon=\"chevron-right\"></dso-icon>\r\n </a>\r\n </li>\r\n </ul>\r\n </dso-responsive-element>\r\n );\r\n }\r\n\r\n private getAvailablePositions(sizePositions: number) {\r\n if (sizePositions % 2 === 0) {\r\n // Even aantal posities zorgt voor een scheve pagination\r\n return sizePositions - 1;\r\n }\r\n if (sizePositions <= 3) {\r\n // Voor het kunnen tonen van de vorige knop, volgende knop en 1 pagina zijn minimaal 3 posities nodig.\r\n return 3;\r\n }\r\n\r\n return sizePositions;\r\n }\r\n\r\n private getPages(currentPage: number, availablePositions: number, totalPages: number): number[] {\r\n if (totalPages + 2 <= availablePositions) {\r\n // + 2 voor de vorige en volgende knop\r\n return Array.from({ length: totalPages }, (_value, i) => i + 1);\r\n }\r\n\r\n if (availablePositions === 3) {\r\n return [currentPage];\r\n }\r\n\r\n if (availablePositions === 5) {\r\n return [1, currentPage, totalPages];\r\n }\r\n\r\n return [1, ...this.getPageRange(currentPage, availablePositions, totalPages), totalPages];\r\n }\r\n\r\n private getPageRange(currentPage: number, availablePositions: number, totalPages: number): number[] {\r\n const range: number[] = [];\r\n\r\n const positionRange = Math.floor(availablePositions / 2);\r\n\r\n if (currentPage <= positionRange) {\r\n for (let i = 2; i <= availablePositions - 4; i++) {\r\n range.push(i);\r\n }\r\n }\r\n\r\n if (currentPage >= positionRange && currentPage <= totalPages - positionRange) {\r\n if (positionRange === 1) {\r\n if (currentPage > totalPages - 2) {\r\n range.push(totalPages - 2);\r\n }\r\n\r\n range.push(currentPage);\r\n\r\n if (currentPage < 3) {\r\n range.push(3);\r\n }\r\n }\r\n\r\n if (positionRange > 1) {\r\n const pagesBeforeOrAfter = positionRange - 3;\r\n\r\n for (\r\n let i = Math.min(currentPage - pagesBeforeOrAfter, totalPages - positionRange);\r\n i <= Math.max(currentPage + pagesBeforeOrAfter, positionRange);\r\n i++\r\n ) {\r\n if (i > 2 && i < totalPages - 1) {\r\n range.push(i);\r\n }\r\n }\r\n }\r\n }\r\n\r\n if (currentPage > totalPages - positionRange) {\r\n for (let i = totalPages - (availablePositions - 5); i <= totalPages - 1; i++) {\r\n range.push(i);\r\n }\r\n }\r\n\r\n return range.filter((v, i, a) => a.indexOf(v) === i);\r\n }\r\n\r\n private showEllipsisAfterFirst(pages: number[], page: number, availablePositions: number): boolean {\r\n const totalPages = pages[pages.length - 1];\r\n if (!totalPages) {\r\n throw new Error(\"No totalPages\");\r\n }\r\n\r\n return (\r\n pages.indexOf(page) === 0 &&\r\n totalPages > availablePositions - 2 &&\r\n !pages.some((p) => p === 2) &&\r\n availablePositions >= 7\r\n );\r\n }\r\n\r\n private showEllipsisBeforeLast(pages: number[], page: number, availablePositions: number): boolean {\r\n const totalPages = pages[pages.length - 1];\r\n if (!totalPages) {\r\n throw new Error(\"No totalPages\");\r\n }\r\n\r\n return (\r\n pages.indexOf(page) === pages.length - 1 &&\r\n totalPages > availablePositions - 2 &&\r\n !pages.some((p) => p === totalPages - 1) &&\r\n availablePositions >= 7\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"dso-pagination.entry.cjs.js","mappings":"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","names":["isModifiedEvent","h"],"sources":["src/components/pagination/pagination.scss?tag=dso-pagination&encapsulation=shadow","src/components/pagination/pagination.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/pagination\";\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.pagination {\r\n @include pagination.root();\r\n}\r\n\r\n.dso-page-hidden {\r\n visibility: hidden;\r\n}\r\n\r\n.sr-only.sr-only {\r\n // class daisy-chained to prevent overwrites by other more specific styling set on this element.\r\n @include utilities.sr-only();\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 Listen,\r\n Prop,\r\n State,\r\n} from \"@stencil/core\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { ResponsiveElementSize } from \"../responsive-element/responsive-element.interfaces\";\r\nimport { PaginationSelectPageEvent } from \"./pagination.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-pagination\",\r\n styleUrl: \"pagination.scss\",\r\n shadow: true,\r\n})\r\nexport class Pagination implements ComponentInterface {\r\n private sizePositionsMap: Record<ResponsiveElementSize, number> = {\r\n small: 7,\r\n medium: 9,\r\n large: 11,\r\n };\r\n\r\n private responsiveElement?: HTMLDsoResponsiveElementElement;\r\n\r\n @Element()\r\n host!: HTMLDsoPaginationElement;\r\n\r\n @State()\r\n availablePositions?: number;\r\n /*\r\n Total pages\r\n /\r\n @Prop()\r\n totalPages?: number;\r\n\r\n /\r\n Current page\r\n /\r\n @Prop()\r\n currentPage?: number;\r\n\r\n /\r\n This function is called to format the href\r\n /\r\n @Prop()\r\n formatHref: (page: number) => string = (page) => \"#\" + page;\r\n\r\n /\r\n Emitted on page select\r\n /\r\n @Event()\r\n dsoSelectPage!: EventEmitter<PaginationSelectPageEvent>;\r\n\r\n /\r\n Listens to the dsoSizeChange event on Responsive Element\r\n */\r\n @Listen(\"dsoSizeChange\")\r\n sizeChangeHandler(event: CustomEvent<ResponsiveElementSize>) {\r\n this.availablePositions = this.getAvailablePositions(this.sizePositionsMap[event.detail]);\r\n }\r\n\r\n private clickHandler(e: MouseEvent, page: number) {\r\n this.dsoSelectPage.emit({\r\n originalEvent: e,\r\n page,\r\n isModifiedEvent: isModifiedEvent(e),\r\n });\r\n }\r\n\r\n componentDidLoad(): void {\r\n this.responsiveElement\r\n ?.getSize()\r\n .then(\r\n (size: ResponsiveElementSize) =>\r\n (this.availablePositions = this.getAvailablePositions(this.sizePositionsMap[size])),\r\n );\r\n }\r\n\r\n render() {\r\n if (!this.totalPages) {\r\n return null;\r\n }\r\n\r\n if (this.availablePositions === undefined) {\r\n return <dso-responsive-element ref={(element) => (this.responsiveElement = element)}></dso-responsive-element>;\r\n }\r\n\r\n const availablePositions = this.availablePositions;\r\n\r\n const currentPage = this.currentPage ?? 0;\r\n\r\n const pages: number[] = this.getPages(currentPage, this.availablePositions, this.totalPages);\r\n\r\n return (\r\n <dso-responsive-element ref={(element) => (this.responsiveElement = element)}>\r\n <nav class=\"pagination\" aria-label=\"Paginering\">\r\n <ul>\r\n <li class={currentPage <= 1 \|\| currentPage > this.totalPages ? \"dso-page-hidden\" : undefined}>\r\n <a\r\n href={this.formatHref(pages[pages.indexOf(currentPage) - 1] ?? 1)}\r\n aria-label=\"Vorige\"\r\n onClick={(e) => currentPage && this.clickHandler(e, pages[pages.indexOf(currentPage) - 1] ?? 1)}\r\n >\r\n <dso-icon icon=\"chevron-left\"></dso-icon>\r\n </a>\r\n </li>\r\n {pages.map((page) => (\r\n <>\r\n {this.showEllipsisBeforeLast(pages, page, availablePositions) && (\r\n <li>\r\n <span>...</span>\r\n </li>\r\n )}\r\n\r\n <li key={page} class={currentPage === page ? \"active\" : undefined}>\r\n {currentPage === page ? (\r\n <span aria-current=\"page\">{page}</span>\r\n ) : (\r\n <a href={this.formatHref(page)} onClick={(e) => this.clickHandler(e, page)}>\r\n {page}\r\n </a>\r\n )}\r\n {page === this.totalPages ? <span class=\"sr-only\"> (laatste pagina)</span> : null}\r\n </li>\r\n\r\n {this.showEllipsisAfterFirst(pages, page, availablePositions) && (\r\n <li>\r\n <span>...</span>\r\n </li>\r\n )}\r\n </>\r\n ))}\r\n <li class={currentPage < 1 \|\| currentPage >= this.totalPages ? \"dso-page-hidden\" : undefined}>\r\n <a\r\n href={this.formatHref(pages[pages.indexOf(currentPage) + 1] ?? this.totalPages)}\r\n aria-label=\"Volgende\"\r\n onClick={(e) =>\r\n currentPage &&\r\n this.totalPages &&\r\n this.clickHandler(e, pages[pages.indexOf(currentPage) + 1] ?? this.totalPages)\r\n }\r\n >\r\n <dso-icon icon=\"chevron-right\"></dso-icon>\r\n </a>\r\n </li>\r\n </ul>\r\n </nav>\r\n </dso-responsive-element>\r\n );\r\n }\r\n\r\n private getAvailablePositions(sizePositions: number) {\r\n if (sizePositions % 2 === 0) {\r\n // Even aantal posities zorgt voor een scheve pagination\r\n return sizePositions - 1;\r\n }\r\n if (sizePositions <= 3) {\r\n // Voor het kunnen tonen van de vorige knop, volgende knop en 1 pagina zijn minimaal 3 posities nodig.\r\n return 3;\r\n }\r\n\r\n return sizePositions;\r\n }\r\n\r\n private getPages(currentPage: number, availablePositions: number, totalPages: number): number[] {\r\n if (totalPages + 2 <= availablePositions) {\r\n // + 2 voor de vorige en volgende knop\r\n return Array.from({ length: totalPages }, (_value, i) => i + 1);\r\n }\r\n\r\n if (availablePositions === 3) {\r\n return [currentPage];\r\n }\r\n\r\n if (availablePositions === 5) {\r\n return [1, currentPage, totalPages];\r\n }\r\n\r\n return [1, ...this.getPageRange(currentPage, availablePositions, totalPages), totalPages];\r\n }\r\n\r\n private getPageRange(currentPage: number, availablePositions: number, totalPages: number): number[] {\r\n const range: number[] = [];\r\n\r\n const positionRange = Math.floor(availablePositions / 2);\r\n\r\n if (currentPage <= positionRange) {\r\n for (let i = 2; i <= availablePositions - 4; i++) {\r\n range.push(i);\r\n }\r\n }\r\n\r\n if (currentPage >= positionRange && currentPage <= totalPages - positionRange) {\r\n if (positionRange === 1) {\r\n if (currentPage > totalPages - 2) {\r\n range.push(totalPages - 2);\r\n }\r\n\r\n range.push(currentPage);\r\n\r\n if (currentPage < 3) {\r\n range.push(3);\r\n }\r\n }\r\n\r\n if (positionRange > 1) {\r\n const pagesBeforeOrAfter = positionRange - 3;\r\n\r\n for (\r\n let i = Math.min(currentPage - pagesBeforeOrAfter, totalPages - positionRange);\r\n i <= Math.max(currentPage + pagesBeforeOrAfter, positionRange);\r\n i++\r\n ) {\r\n if (i > 2 && i < totalPages - 1) {\r\n range.push(i);\r\n }\r\n }\r\n }\r\n }\r\n\r\n if (currentPage > totalPages - positionRange) {\r\n for (let i = totalPages - (availablePositions - 5); i <= totalPages - 1; i++) {\r\n range.push(i);\r\n }\r\n }\r\n\r\n return range.filter((v, i, a) => a.indexOf(v) === i);\r\n }\r\n\r\n private showEllipsisAfterFirst(pages: number[], page: number, availablePositions: number): boolean {\r\n const totalPages = pages[pages.length - 1];\r\n if (!totalPages) {\r\n throw new Error(\"No totalPages\");\r\n }\r\n\r\n return (\r\n pages.indexOf(page) === 0 &&\r\n totalPages > availablePositions - 2 &&\r\n !pages.some((p) => p === 2) &&\r\n availablePositions >= 7\r\n );\r\n }\r\n\r\n private showEllipsisBeforeLast(pages: number[], page: number, availablePositions: number): boolean {\r\n const totalPages = pages[pages.length - 1];\r\n if (!totalPages) {\r\n throw new Error(\"No totalPages\");\r\n }\r\n\r\n return (\r\n pages.indexOf(page) === pages.length - 1 &&\r\n totalPages > availablePositions - 2 &&\r\n !pages.some((p) => p === totalPages - 1) &&\r\n availablePositions >= 7\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/cjs/dso-project-item.cjs.entry.js ADDED Viewed

@@ -0,0 +1,23 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+const index = require('./index-848434f1.js');
+const projectItemCss = ":host{display:block;padding:16px;border:1px solid #ccc;border-radius:4px}*,*::after,*::before{box-sizing:border-box}::slotted(dl[slot=progress]),::slotted(dl[slot=status]){--_dt-dl-margin-block-end:0;--_dt-dl-before-display:none;--_dt-dl-dt-font-weight:normal;--_dt-dl-dd-margin-block-start:0;--_dt-dl-dd-margin-inline-start:units.$u1;--_dt-dl-dd-padding-inline-start:0;--_dt-dl-dt-inline-size:auto;--_dt-dl-dd-last-margin-block-end:0;--_dt-mark-bg-color:none;--_dt-mark-padding-block:0;--_dt-mark-color:inherit;--_dt-mark-font-weight:600;display:flex !important;flex-wrap:wrap;column-gap:16px}::slotted([slot=status]){--_dt-dl-font-size:0.875rem}::slotted([slot=title]){margin-block:0 !important;font-size:1.25rem !important}::slotted([slot=actions]){display:flex}.project-item-header{display:flex;gap:16px;flex-wrap:nowrap;align-items:flex-start;margin-block-end:16px}.project-item-title{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;flex-grow:1}.project-item-actions{display:flex;flex-shrink:0;flex-wrap:nowrap}.project-item-info{display:flex;gap:16px;justify-content:space-between;flex-wrap:wrap;align-items:flex-end}";
+const DsoProjectItemStyle0 = projectItemCss;
+const ProjectItem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.label = undefined;
+    }
+    render() {
+        return (index.h(index.Fragment, null, index.h("div", { key: '7e8ce0768a4d29b8f0e0870e514fb0cb839dca70', class: "project-item-header" }, index.h("div", { key: '5c7b01e378c96a972b1780aff226af0437569148', class: "project-item-title" }, index.h("slot", { key: 'e8af48f1b1ef400f6598b299dc424e1c068c493a', name: "title" }), this.label && (index.h("dso-label", { key: '7d4d6bfb4104391af6feeef50c8abfdf0112a19c', status: "danger", compact: true }, this.label))), index.h("div", { key: 'cb66a125f18494e5504a86a530a92fc07b972fd9', class: "project-item-actions" }, index.h("slot", { key: '3fd674fe94215b163cbd741febf8a255d2e69ee6', name: "actions" }))), index.h("div", { key: 'cee317bf938c9d5f3943f2f5df46377748963108', class: "project-item-info" }, index.h("div", { key: '91402c05f20e06d21e219be63da508c2116beb45', class: "project-item-progress" }, index.h("slot", { key: '60fe0fa198bd97e757ce867460ef1b0124a56129', name: "progress" })), index.h("div", { key: '2f2252fe030f12d87d956848aca9bd6559794fbf', class: "project-item-status" }, index.h("slot", { key: '7e15b524f5ca6d20dc8b9550dd80162614e1c3c6', name: "status" })))));
+    }
+};
+ProjectItem.style = DsoProjectItemStyle0;
+exports.dso_project_item = ProjectItem;
+//# sourceMappingURL=dso-project-item.cjs.entry.js.map

package/dist/cjs/dso-project-item.cjs.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"dso-project-item.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,2oCAA2oC,CAAC;AACnqC,6BAAe,cAAc;;MCMhB,WAAW;;;;;IAOtB,MAAM;QACJ,QACEA,8BACEA,kEAAK,KAAK,EAAC,qBAAqB,IAC9BA,kEAAK,KAAK,EAAC,oBAAoB,IAC7BA,mEAAM,IAAI,EAAC,OAAO,GAAG,EACpB,IAAI,CAAC,KAAK,KACTA,wEAAW,MAAM,EAAC,QAAQ,EAAC,OAAO,UAC/B,IAAI,CAAC,KAAK,CACD,CACb,CACG,EACNA,kEAAK,KAAK,EAAC,sBAAsB,IAC/BA,mEAAM,IAAI,EAAC,SAAS,GAAG,CACnB,CACF,EACNA,kEAAK,KAAK,EAAC,mBAAmB,IAC5BA,kEAAK,KAAK,EAAC,uBAAuB,IAChCA,mEAAM,IAAI,EAAC,UAAU,GAAG,CACpB,EACNA,kEAAK,KAAK,EAAC,qBAAqB,IAC9BA,mEAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACF,CACL,EACH;KACH;;;;;;","names":["h"],"sources":["src/components/project-item/project-item.scss?tag=dso-project-item&encapsulation=shadow","src/components/project-item/project-item.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n\r\n:host {\r\n display: block;\r\n\r\n padding: units.$u2;\r\n\r\n border: 1px solid colors.$grijs-20;\r\n border-radius: calc(units.$u1 / 2);\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n::slotted(dl[slot=\"progress\"]),\r\n::slotted(dl[slot=\"status\"]) {\r\n --_dt-dl-margin-block-end: 0;\r\n --_dt-dl-before-display: none;\r\n --_dt-dl-dt-font-weight: normal;\r\n --_dt-dl-dd-margin-block-start: 0;\r\n --_dt-dl-dd-margin-inline-start: units.$u1;\r\n --_dt-dl-dd-padding-inline-start: 0;\r\n --_dt-dl-dt-inline-size: auto;\r\n --_dt-dl-dd-last-margin-block-end: 0;\r\n\r\n --_dt-mark-bg-color: none;\r\n --_dt-mark-padding-block: 0;\r\n --_dt-mark-color: inherit;\r\n --_dt-mark-font-weight: 600;\r\n\r\n display: flex !important;\r\n flex-wrap: wrap;\r\n column-gap: units.$u2;\r\n}\r\n\r\n::slotted([slot=\"status\"]) {\r\n --_dt-dl-font-size: 0.875rem;\r\n}\r\n\r\n::slotted([slot=\"title\"]) {\r\n margin-block: 0 !important;\r\n font-size: 1.25rem !important;\r\n}\r\n\r\n::slotted([slot=\"actions\"]) {\r\n display: flex;\r\n}\r\n\r\n.project-item-header {\r\n display: flex;\r\n gap: units.$u2;\r\n flex-wrap: nowrap;\r\n align-items: flex-start;\r\n\r\n margin-block-end: units.$u2;\r\n}\r\n\r\n.project-item-title {\r\n display: flex;\r\n gap: units.$u2;\r\n align-items: center;\r\n justify-content: space-between;\r\n flex-wrap: wrap;\r\n flex-grow: 1;\r\n}\r\n\r\n.project-item-actions {\r\n display: flex;\r\n flex-shrink: 0;\r\n flex-wrap: nowrap;\r\n}\r\n\r\n.project-item-info {\r\n display: flex;\r\n gap: units.$u2;\r\n justify-content: space-between;\r\n flex-wrap: wrap;\r\n align-items: flex-end;\r\n}\r\n","import { Component, ComponentInterface, h, Prop, Fragment } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: \"dso-project-item\",\r\n styleUrl: \"project-item.scss\",\r\n shadow: true,\r\n})\r\nexport class ProjectItem implements ComponentInterface {\r\n /**\r\n * The label of the project item.\r\n */\r\n @Prop()\r\n label?: string;\r\n\r\n render() {\r\n return (\r\n <>\r\n <div class=\"project-item-header\">\r\n <div class=\"project-item-title\">\r\n <slot name=\"title\" />\r\n {this.label && (\r\n <dso-label status=\"danger\" compact>\r\n {this.label}\r\n </dso-label>\r\n )}\r\n </div>\r\n <div class=\"project-item-actions\">\r\n <slot name=\"actions\" />\r\n </div>\r\n </div>\r\n <div class=\"project-item-info\">\r\n <div class=\"project-item-progress\">\r\n <slot name=\"progress\" />\r\n </div>\r\n <div class=\"project-item-status\">\r\n <slot name=\"status\" />\r\n </div>\r\n </div>\r\n </>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/cjs/dso-renvooi_2.cjs.entry.js CHANGED Viewed

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-848434f1.js');
 const v4 = require('./v4-7014b8b0.js');
-const renvooiCss = "ins{text-decoration:none;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#e4f1d4;border-color:#e4f1d4;color:#191919;box-shadow:0 1px 3px 1px rgba(0, 0, 0, 0.25)}ins a:is(.download,.download:hover,.download:focus-visible){background-image:url(\"./dso-icons.svg#img-download-zwart\")}ins a:is(.extern,.extern:hover,.extern:focus-visible){background-image:url(\"./dso-icons.svg#img-external-link-zwart\")}ins a:is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:url(\"./dso-icons.svg#img-call-zwart\")}ins a:is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:url(\"./dso-icons.svg#img-email-zwart\")}del{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#f5d8dc;border-color:#f5d8dc;color:#191919;text-decoration:line-through}del a:is(.download,.download:hover,.download:focus-visible){background-image:url(\"./dso-icons.svg#img-download-zwart\")}del a:is(.extern,.extern:hover,.extern:focus-visible){background-image:url(\"./dso-icons.svg#img-external-link-zwart\")}del a:is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:url(\"./dso-icons.svg#img-call-zwart\")}del a:is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:url(\"./dso-icons.svg#img-email-zwart\")}:host{display:inline}*,*::after,*::before{box-sizing:border-box}";
+const renvooiCss = "ins{text-decoration:none}ins{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#e4f1d4;border-color:#e4f1d4;color:#191919}ins a:is(.download,.download:hover,.download:focus-visible){background-image:url(\"./dso-icons.svg#img-download-zwart\")}ins a:is(.extern,.extern:hover,.extern:focus-visible){background-image:url(\"./dso-icons.svg#img-external-link-zwart\")}ins a:is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:url(\"./dso-icons.svg#img-call-zwart\")}ins a:is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:url(\"./dso-icons.svg#img-email-zwart\")}ins{box-shadow:0 1px 3px 1px rgba(0, 0, 0, 0.25)}del{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#f5d8dc;border-color:#f5d8dc;color:#191919}del a:is(.download,.download:hover,.download:focus-visible){background-image:url(\"./dso-icons.svg#img-download-zwart\")}del a:is(.extern,.extern:hover,.extern:focus-visible){background-image:url(\"./dso-icons.svg#img-external-link-zwart\")}del a:is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:url(\"./dso-icons.svg#img-call-zwart\")}del a:is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:url(\"./dso-icons.svg#img-email-zwart\")}del{text-decoration:line-through}:host{display:inline}*,*::after,*::before{box-sizing:border-box}";
 const DsoRenvooiStyle0 = renvooiCss;
 const Renvooi = class {
@@ -56,7 +56,7 @@ const SlideToggle = class {
         this.hasVisibleLabel = this.host.querySelector("*") !== null;
     }
     render() {
-        return (index.h(index.Fragment, null, index.h("button", Object.assign({ key: '7ce2d8bf2bb8ba405449eaefc5762cb67a4ac4dc', id: this.identifier, role: "switch", class: "dso-slider", "aria-checked": "" + this.checked, disabled: this.disabled, onClick: (e) => this.handleSwitch(e) }, (this.accessibleLabel ? { "aria-label": this.accessibleLabel } : {}), (this.labelledbyId ? { "aria-labelledby": this.labelledbyId } : {})), index.h("svg", { key: '12e21116b6fc68e0bf49c53496940bd580e6f10b', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, index.h("g", { key: 'aca7818aa5260621fc58279481b312ada6dbddc7', fill: "none", "fill-rule": "evenodd" }, index.h("rect", { key: 'dfbc32a846cea43c346f10d70076a261db8d5d96', width: "40", height: "20", fill: "currentColor", rx: "10" }), index.h("circle", { key: '9497b94ec12c7629550c95228fc975c9fdd9520c', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (index.h("label", { key: 'b5859b19eb2aaddc36b39bb57874f0ae8bf637fc', htmlFor: this.identifier }, index.h("slot", { key: 'd98d76eb907c33f5a1bb0427a3fa5d9b2a99b32a' })))));
+        return (index.h(index.Fragment, null, index.h("button", Object.assign({ key: '2a589d57cb3a34fbc7d545ba463eb5dfdc7c8e3b', id: this.identifier, role: "switch", class: "dso-slider", "aria-checked": "" + this.checked, disabled: this.disabled, onClick: (e) => this.handleSwitch(e) }, (this.accessibleLabel ? { "aria-label": this.accessibleLabel } : {}), (this.labelledbyId ? { "aria-labelledby": this.labelledbyId } : {})), index.h("svg", { key: 'daeae3ad7945cca85dbcfcd0393088c2247d3063', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, index.h("g", { key: '1dc77f9db7e0c8e8a4118a12dd7e153092fd7c3d', fill: "none", "fill-rule": "evenodd" }, index.h("rect", { key: '44f1f0491a5e32eea07435b4bb5d2ac5e10e5dc1', width: "40", height: "20", fill: "currentColor", rx: "10" }), index.h("circle", { key: '4a5c4a0f67804163ae09155e1fa1bad50d7b6202', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (index.h("label", { key: '4a68fb9b36dc403cfb3f48614b603a218453454f', htmlFor: this.identifier }, index.h("slot", { key: 'b41750cfec394016cfd4b9dd75b5ffa8c8dad754' })))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/dso-renvooi_2.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dso-renvooi.dso-slide-toggle.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,UAAU,GAAG,~~u/CAAu/C~~,CAAC;~~AAC3gD~~,yBAAe,UAAU;;MCWZ,OAAO;;;;;IAOlB,MAAM;QACJ,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QAEvB,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,CAAC,KAAK,EAAE;YACvC,OAAO,KAAK,CAAC;SACd;QAED,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;YACxB,QACEA,8BACG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,MAC1BA,8BACEA,yBAAa,KAAK,EAAE,CAAC,GAAI,EACxB,CAAC,GAAG,MAAM,GAAG,CAAC,GAAG,IAAI,GAAG,EAAE,CAC1B,CACJ,CAAC,CACD,EACH;SACH;QAED,IAAI,YAAY,IAAI,KAAK,EAAE;YACzB,OAAOA,qBAAM,KAAK,CAAC,UAAU,CAAO,CAAC;SACtC;QAED,IAAI,YAAY,IAAI,KAAK,EAAE;YACzB,OAAOA,qBAAM,KAAK,CAAC,UAAU,CAAO,CAAC;SACtC;QAED,QACEA,8BACEA,qBAAM,KAAK,CAAC,GAAG,CAAO,OAACA,qBAAM,KAAK,CAAC,KAAK,CAAO,CAC9C,EACH;KACH;;;;ACpDH,MAAM,cAAc,GAAG,4vBAA4vB,CAAC;AACpxB,6BAAe,cAAc;;MCQhB,WAAW;;;;uBAQZ,KAAK;wBAMJ,KAAK;;;;0BAqBHC,KAAE,EAAE;;IAQT,YAAY,CAAC,CAAQ;QAC3B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;YACxB,aAAa,EAAE,CAAC;YAChB,OAAO,EAAE,CAAC,IAAI,CAAC,OAAO;SACvB,CAAC,CAAC;KACJ;IAED,iBAAiB;QACf,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC;KAC9D;IAED,MAAM;QACJ,QACED,8BACEA,mFACE,EAAE,EAAE,IAAI,CAAC,UAAU,EACnB,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,YAAY,kBACJ,EAAE,GAAG,IAAI,CAAC,OAAO,EAC/B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,KAC/B,IAAI,CAAC,eAAe,GAAG,EAAE,YAAY,EAAE,IAAI,CAAC,eAAe,EAAE,GAAG,EAAE,IAClE,IAAI,CAAC,YAAY,GAAG,EAAE,iBAAiB,EAAE,IAAI,CAAC,YAAY,EAAE,GAAG,EAAE,IAEtEA,kEAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,IAChFA,gEAAG,IAAI,EAAC,MAAM,eAAW,SAAS,IAChCA,mEAAM,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,EAAC,cAAc,EAAC,EAAE,EAAC,IAAI,GAAG,EAC3DA,qEAAQ,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,GAAG,EAAC,IAAI,EAAC,cAAc,GAAG,CAC1C,CACA,CACC,EACR,IAAI,CAAC,eAAe,KACnBA,oEAAO,OAAO,EAAE,IAAI,CAAC,UAAU,IAC7BA,oEAAQ,CACF,CACT,CACA,EACH;KACH;;;;;;;;","names":["h","v4"],"sources":["src/components/renvooi/renvooi.scss?tag=dso-renvooi&encapsulation=shadow","src/components/renvooi/renvooi.tsx","src/components/slide-toggle/slide-toggle.scss?tag=dso-slide-toggle","src/components/slide-toggle/slide-toggle.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n\r\n@use \"~dso-toolkit/src/components/insert/insert\";\r\n@use \"~dso-toolkit/src/components/delete/delete\";\r\n\r\n:host {\r\n display: inline;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n","import { Component, ComponentInterface, Fragment, Prop, h } from \"@stencil/core\";\r\n\r\nimport { RenvooiValue } from \"./renvooi.interfaces\";\r\n\r\n/*\r\n Met dit component kan een `RenvooiValue` worden gepresenteerd.\r\n /\r\n@Component({\r\n tag: \"dso-renvooi\",\r\n styleUrl: \"renvooi.scss\",\r\n shadow: true,\r\n})\r\nexport class Renvooi implements ComponentInterface {\r\n /\r\n The renvooi value to render.\r\n /\r\n @Prop()\r\n value?: RenvooiValue \| RenvooiValue[];\r\n\r\n render() {\r\n const { value } = this;\r\n\r\n if (typeof value === \"string\" \|\| !value) {\r\n return value;\r\n }\r\n\r\n if (Array.isArray(value)) {\r\n return (\r\n <>\r\n {value.map((v, i, { length }) => (\r\n <>\r\n <dso-renvooi value={v} />\r\n {i < length - 1 ? \", \" : \"\"}\r\n </>\r\n ))}\r\n </>\r\n );\r\n }\r\n\r\n if (\"toegevoegd\" in value) {\r\n return <ins>{value.toegevoegd}</ins>;\r\n }\r\n\r\n if (\"verwijderd\" in value) {\r\n return <del>{value.verwijderd}</del>;\r\n }\r\n\r\n return (\r\n <>\r\n <del>{value.was}</del> <ins>{value.wordt}</ins>\r\n </>\r\n );\r\n }\r\n}\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\nbutton.dso-slider {\r\n border: 0;\r\n padding: 0;\r\n\r\n &:focus-visible {\r\n outline: 2px solid colors.$grijs-80;\r\n outline-offset: 1px;\r\n }\r\n\r\n svg {\r\n rect {\r\n fill: colors.$grijs-40;\r\n transition: fill 0.25s;\r\n }\r\n\r\n circle {\r\n @include utilities.transition(transform);\r\n\r\n transform: translateX(10px);\r\n fill: colors.$wit;\r\n }\r\n }\r\n\r\n &[aria-checked=\"true\"] svg {\r\n rect {\r\n fill: colors.$bosgroen;\r\n }\r\n\r\n circle {\r\n transform: translateX(30px);\r\n fill: colors.$wit;\r\n }\r\n }\r\n\r\n &[disabled] svg {\r\n rect {\r\n fill: colors.$grijs-20;\r\n }\r\n\r\n circle {\r\n fill: colors.$grijs-10;\r\n }\r\n }\r\n\r\n &[disabled][aria-checked=\"true\"] svg {\r\n rect {\r\n fill: colors.$bosgroen-40;\r\n }\r\n\r\n circle {\r\n fill: colors.$grijs-10;\r\n }\r\n }\r\n}\r\n\r\n.dso-slider {\r\n border-radius: units.$u3;\r\n display: inline-flex;\r\n\r\n &:hover {\r\n cursor: pointer;\r\n }\r\n}\r\n","import { h, Component, ComponentInterface, Event, Fragment, Prop, EventEmitter, Element, State } from \"@stencil/core\";\r\nimport { v4 } from \"uuid\";\r\nimport { SlideToggleActiveEvent } from \"./slide-toggle.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-slide-toggle\",\r\n styleUrl: \"slide-toggle.scss\",\r\n shadow: false,\r\n})\r\nexport class SlideToggle implements ComponentInterface {\r\n @Element()\r\n private host!: HTMLDsoSlideToggleElement;\r\n\r\n /\r\n Set to true if Slide Toggle is checked.\r\n /\r\n @Prop()\r\n checked = false;\r\n\r\n /\r\n Disables the Slide Toggle, preventing it from checking/unchecking and therefor not emitting any events.\r\n /\r\n @Prop()\r\n disabled = false;\r\n\r\n /\r\n When provided the `<button>` will be labelled with `aria-label`. For a visible label provide a `<span>` inside the component.\r\n /\r\n @Prop()\r\n accessibleLabel?: string;\r\n\r\n /\r\n Provide the `id` of the element that labels this element. this property sets the `aria-labelledby` on the switch button.\r\n /\r\n @Prop()\r\n labelledbyId?: string;\r\n\r\n @State()\r\n hasVisibleLabel?: boolean;\r\n\r\n /\r\n Provide an `id` for the `<button>`. Useful for placing your to place your own `<label for=\"id\">`.\r\n /\r\n @Prop()\r\n identifier = v4();\r\n\r\n /\r\n Emitted when user checks or unchecks the Slide Toggle.\r\n /\r\n @Event({ composed: false })\r\n dsoActiveChange!: EventEmitter<SlideToggleActiveEvent>;\r\n\r\n private handleSwitch(e: Event): void {\r\n this.dsoActiveChange.emit({\r\n originalEvent: e,\r\n checked: !this.checked,\r\n });\r\n }\r\n\r\n componentWillLoad(): void {\r\n this.hasVisibleLabel = this.host.querySelector(\"\") !== null;\r\n }\r\n\r\n render() {\r\n return (\r\n <>\r\n <button\r\n id={this.identifier}\r\n role=\"switch\"\r\n class=\"dso-slider\"\r\n aria-checked={\"\" + this.checked}\r\n disabled={this.disabled}\r\n onClick={(e) => this.handleSwitch(e)}\r\n {...(this.accessibleLabel ? { \"aria-label\": this.accessibleLabel } : {})}\r\n {...(this.labelledbyId ? { \"aria-labelledby\": this.labelledbyId } : {})}\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"20\" viewBox=\"0 0 40 20\">\r\n <g fill=\"none\" fill-rule=\"evenodd\">\r\n <rect width=\"40\" height=\"20\" fill=\"currentColor\" rx=\"10\" />\r\n <circle cy=\"10\" r=\"8\" fill=\"currentColor\" />\r\n </g>\r\n </svg>\r\n </button>\r\n {this.hasVisibleLabel && (\r\n <label htmlFor={this.identifier}>\r\n <slot />\r\n </label>\r\n )}\r\n </>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"dso-renvooi.dso-slide-toggle.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,UAAU,GAAG,mgDAAmgD,CAAC;AACvhD,yBAAe,UAAU;;MCWZ,OAAO;;;;;IAOlB,MAAM;QACJ,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QAEvB,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,CAAC,KAAK,EAAE;YACvC,OAAO,KAAK,CAAC;SACd;QAED,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;YACxB,QACEA,8BACG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,MAC1BA,8BACEA,yBAAa,KAAK,EAAE,CAAC,GAAI,EACxB,CAAC,GAAG,MAAM,GAAG,CAAC,GAAG,IAAI,GAAG,EAAE,CAC1B,CACJ,CAAC,CACD,EACH;SACH;QAED,IAAI,YAAY,IAAI,KAAK,EAAE;YACzB,OAAOA,qBAAM,KAAK,CAAC,UAAU,CAAO,CAAC;SACtC;QAED,IAAI,YAAY,IAAI,KAAK,EAAE;YACzB,OAAOA,qBAAM,KAAK,CAAC,UAAU,CAAO,CAAC;SACtC;QAED,QACEA,8BACEA,qBAAM,KAAK,CAAC,GAAG,CAAO,OAACA,qBAAM,KAAK,CAAC,KAAK,CAAO,CAC9C,EACH;KACH;;;;ACpDH,MAAM,cAAc,GAAG,4vBAA4vB,CAAC;AACpxB,6BAAe,cAAc;;MCQhB,WAAW;;;;uBAQZ,KAAK;wBAMJ,KAAK;;;;0BAqBHC,KAAE,EAAE;;IAQT,YAAY,CAAC,CAAQ;QAC3B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;YACxB,aAAa,EAAE,CAAC;YAChB,OAAO,EAAE,CAAC,IAAI,CAAC,OAAO;SACvB,CAAC,CAAC;KACJ;IAED,iBAAiB;QACf,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC;KAC9D;IAED,MAAM;QACJ,QACED,8BACEA,mFACE,EAAE,EAAE,IAAI,CAAC,UAAU,EACnB,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,YAAY,kBACJ,EAAE,GAAG,IAAI,CAAC,OAAO,EAC/B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,KAC/B,IAAI,CAAC,eAAe,GAAG,EAAE,YAAY,EAAE,IAAI,CAAC,eAAe,EAAE,GAAG,EAAE,IAClE,IAAI,CAAC,YAAY,GAAG,EAAE,iBAAiB,EAAE,IAAI,CAAC,YAAY,EAAE,GAAG,EAAE,IAEtEA,kEAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,IAChFA,gEAAG,IAAI,EAAC,MAAM,eAAW,SAAS,IAChCA,mEAAM,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,EAAC,cAAc,EAAC,EAAE,EAAC,IAAI,GAAG,EAC3DA,qEAAQ,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,GAAG,EAAC,IAAI,EAAC,cAAc,GAAG,CAC1C,CACA,CACC,EACR,IAAI,CAAC,eAAe,KACnBA,oEAAO,OAAO,EAAE,IAAI,CAAC,UAAU,IAC7BA,oEAAQ,CACF,CACT,CACA,EACH;KACH;;;;;;;;","names":["h","v4"],"sources":["src/components/renvooi/renvooi.scss?tag=dso-renvooi&encapsulation=shadow","src/components/renvooi/renvooi.tsx","src/components/slide-toggle/slide-toggle.scss?tag=dso-slide-toggle","src/components/slide-toggle/slide-toggle.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n\r\n@use \"~dso-toolkit/src/components/insert/insert\";\r\n@use \"~dso-toolkit/src/components/delete/delete\";\r\n\r\n:host {\r\n display: inline;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n","import { Component, ComponentInterface, Fragment, Prop, h } from \"@stencil/core\";\r\n\r\nimport { RenvooiValue } from \"./renvooi.interfaces\";\r\n\r\n/*\r\n Met dit component kan een `RenvooiValue` worden gepresenteerd.\r\n /\r\n@Component({\r\n tag: \"dso-renvooi\",\r\n styleUrl: \"renvooi.scss\",\r\n shadow: true,\r\n})\r\nexport class Renvooi implements ComponentInterface {\r\n /\r\n The renvooi value to render.\r\n /\r\n @Prop()\r\n value?: RenvooiValue \| RenvooiValue[];\r\n\r\n render() {\r\n const { value } = this;\r\n\r\n if (typeof value === \"string\" \|\| !value) {\r\n return value;\r\n }\r\n\r\n if (Array.isArray(value)) {\r\n return (\r\n <>\r\n {value.map((v, i, { length }) => (\r\n <>\r\n <dso-renvooi value={v} />\r\n {i < length - 1 ? \", \" : \"\"}\r\n </>\r\n ))}\r\n </>\r\n );\r\n }\r\n\r\n if (\"toegevoegd\" in value) {\r\n return <ins>{value.toegevoegd}</ins>;\r\n }\r\n\r\n if (\"verwijderd\" in value) {\r\n return <del>{value.verwijderd}</del>;\r\n }\r\n\r\n return (\r\n <>\r\n <del>{value.was}</del> <ins>{value.wordt}</ins>\r\n </>\r\n );\r\n }\r\n}\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\nbutton.dso-slider {\r\n border: 0;\r\n padding: 0;\r\n\r\n &:focus-visible {\r\n outline: 2px solid colors.$grijs-80;\r\n outline-offset: 1px;\r\n }\r\n\r\n svg {\r\n rect {\r\n fill: colors.$grijs-40;\r\n transition: fill 0.25s;\r\n }\r\n\r\n circle {\r\n @include utilities.transition(transform);\r\n\r\n transform: translateX(10px);\r\n fill: colors.$wit;\r\n }\r\n }\r\n\r\n &[aria-checked=\"true\"] svg {\r\n rect {\r\n fill: colors.$bosgroen;\r\n }\r\n\r\n circle {\r\n transform: translateX(30px);\r\n fill: colors.$wit;\r\n }\r\n }\r\n\r\n &[disabled] svg {\r\n rect {\r\n fill: colors.$grijs-20;\r\n }\r\n\r\n circle {\r\n fill: colors.$grijs-10;\r\n }\r\n }\r\n\r\n &[disabled][aria-checked=\"true\"] svg {\r\n rect {\r\n fill: colors.$bosgroen-40;\r\n }\r\n\r\n circle {\r\n fill: colors.$grijs-10;\r\n }\r\n }\r\n}\r\n\r\n.dso-slider {\r\n border-radius: units.$u3;\r\n display: inline-flex;\r\n\r\n &:hover {\r\n cursor: pointer;\r\n }\r\n}\r\n","import { h, Component, ComponentInterface, Event, Fragment, Prop, EventEmitter, Element, State } from \"@stencil/core\";\r\nimport { v4 } from \"uuid\";\r\nimport { SlideToggleActiveEvent } from \"./slide-toggle.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-slide-toggle\",\r\n styleUrl: \"slide-toggle.scss\",\r\n shadow: false,\r\n})\r\nexport class SlideToggle implements ComponentInterface {\r\n @Element()\r\n private host!: HTMLDsoSlideToggleElement;\r\n\r\n /\r\n Set to true if Slide Toggle is checked.\r\n /\r\n @Prop()\r\n checked = false;\r\n\r\n /\r\n Disables the Slide Toggle, preventing it from checking/unchecking and therefor not emitting any events.\r\n /\r\n @Prop()\r\n disabled = false;\r\n\r\n /\r\n When provided the `<button>` will be labelled with `aria-label`. For a visible label provide a `<span>` inside the component.\r\n /\r\n @Prop()\r\n accessibleLabel?: string;\r\n\r\n /\r\n Provide the `id` of the element that labels this element. this property sets the `aria-labelledby` on the switch button.\r\n /\r\n @Prop()\r\n labelledbyId?: string;\r\n\r\n @State()\r\n hasVisibleLabel?: boolean;\r\n\r\n /\r\n Provide an `id` for the `<button>`. Useful for placing your to place your own `<label for=\"id\">`.\r\n /\r\n @Prop()\r\n identifier = v4();\r\n\r\n /\r\n Emitted when user checks or unchecks the Slide Toggle.\r\n /\r\n @Event({ composed: false })\r\n dsoActiveChange!: EventEmitter<SlideToggleActiveEvent>;\r\n\r\n private handleSwitch(e: Event): void {\r\n this.dsoActiveChange.emit({\r\n originalEvent: e,\r\n checked: !this.checked,\r\n });\r\n }\r\n\r\n componentWillLoad(): void {\r\n this.hasVisibleLabel = this.host.querySelector(\"\") !== null;\r\n }\r\n\r\n render() {\r\n return (\r\n <>\r\n <button\r\n id={this.identifier}\r\n role=\"switch\"\r\n class=\"dso-slider\"\r\n aria-checked={\"\" + this.checked}\r\n disabled={this.disabled}\r\n onClick={(e) => this.handleSwitch(e)}\r\n {...(this.accessibleLabel ? { \"aria-label\": this.accessibleLabel } : {})}\r\n {...(this.labelledbyId ? { \"aria-labelledby\": this.labelledbyId } : {})}\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"20\" viewBox=\"0 0 40 20\">\r\n <g fill=\"none\" fill-rule=\"evenodd\">\r\n <rect width=\"40\" height=\"20\" fill=\"currentColor\" rx=\"10\" />\r\n <circle cy=\"10\" r=\"8\" fill=\"currentColor\" />\r\n </g>\r\n </svg>\r\n </button>\r\n {this.hasVisibleLabel && (\r\n <label htmlFor={this.identifier}>\r\n <slot />\r\n </label>\r\n )}\r\n </>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/cjs/dso-responsive-element.cjs.entry.js CHANGED Viewed

@@ -50,7 +50,7 @@ const ResponsiveElement = class {
         this.observer.unobserve(this.host);
     }
     render() {
-        return (index.h(index.Host, { key: '4d5e917e2e7a46743621de2c38e124b9ddd6821f', small: this.sizeAlias === "small", medium: this.sizeAlias === "medium", large: this.sizeAlias === "large" }, index.h("slot", { key: 'ff4856f719b596eeb4caab380f22afd386c63ab7' })));
+        return (index.h(index.Host, { key: 'da7d53fadbf366d94af9b81a7fbe82d5b841fae6', small: this.sizeAlias === "small", medium: this.sizeAlias === "medium", large: this.sizeAlias === "large" }, index.h("slot", { key: '7f5760e962121bb49d6df0bbec7480f8cdca2e0b' })));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/dso-scrollable.cjs.entry.js CHANGED Viewed

@@ -91,9 +91,9 @@ const Scrollable = class {
         this.slottedElements.forEach((element) => resizeObserver.unobserve(element));
     }
     render() {
-        return (index$1.h("div", { key: 'd9c73f524fa17860c1cad8a0ca960d7db540dbab', ref: (el) => (this.shadowContainerDiv = el), class: "dso-shadow-container" }, index$1.h("div", { key: 'b2ce5ba340f7907fcb111c0395d7e22324e58237', ref: (el) => (this.scrollContainerDiv = el), class: clsx.clsx("dso-scroll-container", {
+        return (index$1.h("div", { key: 'b786c2765a723299a16956239d0a3f2814bdb365', ref: (el) => (this.shadowContainerDiv = el), class: "dso-shadow-container" }, index$1.h("div", { key: '32629e90bd713faf99192825f4d5f6b730949724', ref: (el) => (this.scrollContainerDiv = el), class: clsx.clsx("dso-scroll-container", {
                 [`dso-scroll-${this.scrollPosition}`]: this.scrollPosition !== "noScroll",
-            }), onScroll: () => this._setScrollState() }, index$1.h("slot", { key: '47cf6e7432017040b5e3c5815427f11d10f1b8e8' }))));
+            }), onScroll: () => this._setScrollState() }, index$1.h("slot", { key: '3d02e6603fb849f9535529ae5143452e0ee0484e' }))));
     }
     get host() { return index$1.getElement(this); }
 };

package/dist/cjs/dso-tab.cjs.entry.js ADDED Viewed

@@ -0,0 +1,54 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+const index = require('./index-848434f1.js');
+const isModifiedEvent = require('./is-modified-event-f643edb2.js');
+const tabCss = "*,*::after,*::before{box-sizing:border-box}:host{display:block;border-color:#39870c;margin-block-end:-1px}@media screen and (max-width: 767px){:host{margin-block:10px}:host(:first-child){margin-block-start:0}}:host([active]:not([active=false])) [role=tab],:host([active]:not([active=false])) [role=tab]:active,:host([active]:not([active=false])) [role=tab]:focus,:host([active]:not([active=false])) [role=tab]:hover,:host([active]:not([active=false])) [role=tab]:visited{background-color:#fff;border:1px solid #39870c;border-block-end-color:#fff;color:#39870c;cursor:default}@media screen and (max-width: 767px){:host([active]:not([active=false])) [role=tab],:host([active]:not([active=false])) [role=tab]:active,:host([active]:not([active=false])) [role=tab]:focus,:host([active]:not([active=false])) [role=tab]:hover,:host([active]:not([active=false])) [role=tab]:visited{border-block-end-color:#39870c}}:host([disabled]:not([disabled=false])) [role=tab]{color:#999}:host([disabled]:not([disabled=false])) [role=tab]:hover,:host([disabled]:not([disabled=false])) [role=tab]:focus{color:#999;text-decoration:none;cursor:default;background-color:transparent}@media screen and (max-width: 767px){:host([disabled]:not([disabled=false])) [role=tab]:hover,:host([disabled]:not([disabled=false])) [role=tab]:focus{border-block-end-color:#fff}}a{text-decoration:none}a:hover,a:focus-visible{text-decoration:none}a:active{text-decoration:underline}a:visited{color:#666}button{font-family:inherit;font-size:inherit;background-color:transparent}[role=tab]{font-weight:bold;cursor:pointer;display:block;min-block-size:56px;border:1px solid transparent;border-radius:4px 4px 0 0;color:#666;line-height:1.5;padding-block:15px;padding-inline:23px}[role=tab]:hover{border-color:#e5e5e5 #e5e5e5 #e5e5e5}[role=tab]:hover,[role=tab]:focus{text-decoration:none;background-color:#e5e5e5}[role=tab]:active,[role=tab]:focus,[role=tab]:hover{background-color:#f2f2f2;border:1px solid transparent;border-block-end-color:#39870c;text-decoration:none}@media screen and (max-width: 767px){[role=tab]:active,[role=tab]:focus,[role=tab]:hover{border-block-end-color:#fff}}@media screen and (max-width: 767px){[role=tab]{border-color:#fff;border-radius:8px;padding-block:18px;padding-inline:20px;inline-size:100%;text-align:start}}";
+const DsoTabStyle0 = tabCss;
+const Tab = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.dsoTabSwitch = index.createEvent(this, "dsoTabSwitch", 7);
+        this.emitEvent = (e) => {
+            this.dsoTabSwitch.emit({
+                originalEvent: e,
+                isModifiedEvent: e instanceof MouseEvent ? isModifiedEvent.isModifiedEvent(e) : false,
+            });
+        };
+        this.keyUpHandler = (e) => {
+            if (e.key === " " && !this.disabled && !this.active) {
+                this.emitEvent(e);
+            }
+        };
+        this.clickHandler = (e) => {
+            if ((this.disabled && this.href) || this.active) {
+                e.preventDefault();
+            }
+            else {
+                this.emitEvent(e);
+            }
+        };
+        this.active = undefined;
+        this.disabled = undefined;
+        this.href = undefined;
+    }
+    /**
+     * @internal
+     */
+    async _dsoFocus() {
+        var _a;
+        (_a = this.anchorOrButtonRef) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    render() {
+        return this.href ? (index.h("a", Object.assign({ role: "tab", href: this.href, onKeyUp: this.keyUpHandler, onClick: this.clickHandler, "aria-selected": this.active ? "true" : "false" }, (!this.active ? { tabIndex: -1 } : {}), { ref: (element) => (this.anchorOrButtonRef = element) }), index.h("slot", null))) : (index.h("button", Object.assign({ role: "tab", type: "button", disabled: this.disabled, onClick: this.clickHandler, "aria-selected": this.active ? "true" : "false" }, (!this.active ? { tabIndex: -1 } : {}), { ref: (element) => (this.anchorOrButtonRef = element) }), index.h("slot", null)));
+    }
+    get host() { return index.getElement(this); }
+};
+Tab.style = DsoTabStyle0;
+exports.dso_tab = Tab;
+//# sourceMappingURL=dso-tab.cjs.entry.js.map

package/dist/cjs/dso-tab.cjs.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"dso-tab.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,MAAM,GAAG,gwEAAgwE,CAAC;AAChxE,qBAAe,MAAM;;MCWR,GAAG;;;;QAsCN,cAAS,GAAG,CAAC,CAA6B;YAChD,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;gBACrB,aAAa,EAAE,CAAC;gBAChB,eAAe,EAAE,CAAC,YAAY,UAAU,GAAGA,+BAAe,CAAC,CAAC,CAAC,GAAG,KAAK;aACtE,CAAC,CAAC;SACJ,CAAC;QAEM,iBAAY,GAAG,CAAC,CAAgB;YACtC,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;gBACnD,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;aACnB;SACF,CAAC;QAEM,iBAAY,GAAG,CAAC,CAAa;YACnC,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,MAAM,EAAE;gBAC/C,CAAC,CAAC,cAAc,EAAE,CAAC;aACpB;iBAAM;gBACL,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;aACnB;SACF,CAAC;;;;;;;;IAzBF,MAAM,SAAS;;QACb,MAAA,IAAI,CAAC,iBAAiB,0CAAE,KAAK,EAAE,CAAC;KACjC;IAyBD,MAAM;QACJ,OAAO,IAAI,CAAC,IAAI,IACdC,6BACE,IAAI,EAAC,KAAK,EACV,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,OAAO,EAAE,IAAI,CAAC,YAAY,mBACX,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,KACxC,CAAC,IAAI,CAAC,MAAM,GAAG,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,KACzC,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,iBAAiB,GAAG,OAAO,CAAC,KAEpDA,qBAAQ,CACN,KAEJA,kCACE,IAAI,EAAC,KAAK,EACV,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,YAAY,mBACX,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,KACxC,CAAC,IAAI,CAAC,MAAM,GAAG,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,KACzC,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,iBAAiB,GAAG,OAAO,CAAC,KAEpDA,qBAAQ,CACD,CACV,CAAC;KACH;;;;;;;","names":["isModifiedEvent","h"],"sources":["src/components/tabs/components/tab.scss?tag=dso-tab&encapsulation=shadow","src/components/tabs/components/tab.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n\r\n@use \"~dso-toolkit/src/components/anchor\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/scaffolding\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n\r\n@use \"tab.variables\" as tab-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n display: block;\r\n border-color: tab-variables.$color;\r\n // Make the list-items overlay the bottom border\r\n margin-block-end: -1px;\r\n}\r\n\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n :host {\r\n margin-block: 10px;\r\n }\r\n\r\n :host(:first-child) {\r\n margin-block-start: 0;\r\n }\r\n}\r\n\r\n:host([active]:not([active=\"false\"])) {\r\n [role=\"tab\"] {\r\n &,\r\n &:active,\r\n &:focus,\r\n &:hover,\r\n &:visited {\r\n background-color: colors.$wit;\r\n border: 1px solid tab-variables.$color;\r\n border-block-end-color: colors.$wit;\r\n color: tab-variables.$color;\r\n cursor: default;\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n border-block-end-color: tab-variables.$color;\r\n }\r\n }\r\n }\r\n}\r\n\r\n:host([disabled]:not([disabled=\"false\"])) {\r\n [role=\"tab\"] {\r\n color: tab-variables.$nav-disabled-link-color;\r\n\r\n &:hover,\r\n &:focus {\r\n color: tab-variables.$nav-disabled-link-hover-color;\r\n text-decoration: none;\r\n cursor: scaffolding.$cursor-disabled;\r\n background-color: transparent;\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n border-block-end-color: colors.$wit;\r\n }\r\n }\r\n }\r\n}\r\n\r\na {\r\n @include anchor.clean();\r\n\r\n &:visited {\r\n color: tab-variables.$text-color;\r\n }\r\n}\r\n\r\nbutton {\r\n font-family: inherit;\r\n font-size: inherit;\r\n background-color: transparent;\r\n}\r\n\r\n[role=\"tab\"] {\r\n font-weight: bold;\r\n cursor: pointer;\r\n display: block;\r\n min-block-size: tab-variables.$block-size;\r\n border: 1px solid transparent;\r\n border-radius: tab-variables.$border-radius tab-variables.$border-radius 0 0;\r\n color: tab-variables.$text-color;\r\n line-height: typography.$line-height-base;\r\n padding-block: tab-variables.$block-padding;\r\n padding-inline: tab-variables.$inline-padding;\r\n\r\n &:hover {\r\n border-color: tab-variables.$link-hover-border-color tab-variables.$link-hover-border-color\r\n tab-variables.$border-color;\r\n }\r\n\r\n &:hover,\r\n &:focus {\r\n text-decoration: none;\r\n background-color: tab-variables.$nav-link-hover-bg;\r\n }\r\n\r\n &:active,\r\n &:focus,\r\n &:hover {\r\n background-color: tab-variables.$hover-color;\r\n border: 1px solid transparent;\r\n border-block-end-color: tab-variables.$color;\r\n text-decoration: none;\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n border-block-end-color: colors.$wit;\r\n }\r\n }\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n border-color: colors.$wit;\r\n border-radius: 8px;\r\n padding-block: 18px;\r\n padding-inline: 20px;\r\n inline-size: 100%;\r\n text-align: start;\r\n }\r\n}\r\n","import { Component, Element, Event, EventEmitter, Prop, h, Method } from \"@stencil/core\";\r\nimport { isModifiedEvent } from \"../../../utils/is-modified-event\";\r\nimport { TabsSwitchEvent } from \"../tabs.interfaces\";\r\n\r\n/**\r\n * @slot - The label for this tab\r\n */\r\n@Component({\r\n tag: \"dso-tab\",\r\n styleUrl: \"tab.scss\",\r\n shadow: true,\r\n})\r\nexport class Tab {\r\n @Element()\r\n host!: HTMLDsoTabElement;\r\n\r\n /**\r\n * Makes the tab active. The tab for which the tabpanel is visible is the active tab.\r\n */\r\n @Prop({ reflect: true })\r\n active?: boolean;\r\n\r\n /**\r\n * Disables the tab. A disabled tab cannot be activated and it's tabpanel cannot be shown.\r\n */\r\n @Prop({ reflect: true })\r\n disabled?: boolean;\r\n\r\n /**\r\n * The optional href of the tab. Creates an anchor if present. Creates a button if absent.\r\n */\r\n @Prop()\r\n href?: string;\r\n\r\n /**\r\n * Emitted when the user activates tab via click or arrow keys followed by space or enter.\r\n */\r\n @Event()\r\n dsoTabSwitch!: EventEmitter<TabsSwitchEvent>;\r\n\r\n /**\r\n * @internal\r\n */\r\n @Method()\r\n async _dsoFocus() {\r\n this.anchorOrButtonRef?.focus();\r\n }\r\n\r\n private anchorOrButtonRef?: HTMLAnchorElement | HTMLButtonElement;\r\n\r\n private emitEvent = (e: MouseEvent | KeyboardEvent) => {\r\n this.dsoTabSwitch.emit({\r\n originalEvent: e,\r\n isModifiedEvent: e instanceof MouseEvent ? isModifiedEvent(e) : false,\r\n });\r\n };\r\n\r\n private keyUpHandler = (e: KeyboardEvent) => {\r\n if (e.key === \" \" && !this.disabled && !this.active) {\r\n this.emitEvent(e);\r\n }\r\n };\r\n\r\n private clickHandler = (e: MouseEvent) => {\r\n if ((this.disabled && this.href) || this.active) {\r\n e.preventDefault();\r\n } else {\r\n this.emitEvent(e);\r\n }\r\n };\r\n\r\n render() {\r\n return this.href ? (\r\n <a\r\n role=\"tab\"\r\n href={this.href}\r\n onKeyUp={this.keyUpHandler}\r\n onClick={this.clickHandler}\r\n aria-selected={this.active ? \"true\" : \"false\"}\r\n {...(!this.active ? { tabIndex: -1 } : {})}\r\n ref={(element) => (this.anchorOrButtonRef = element)}\r\n >\r\n <slot />\r\n </a>\r\n ) : (\r\n <button\r\n role=\"tab\"\r\n type=\"button\"\r\n disabled={this.disabled}\r\n onClick={this.clickHandler}\r\n aria-selected={this.active ? \"true\" : \"false\"}\r\n {...(!this.active ? { tabIndex: -1 } : {})}\r\n ref={(element) => (this.anchorOrButtonRef = element)}\r\n >\r\n <slot />\r\n </button>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/cjs/dso-tabs.cjs.entry.js ADDED Viewed

@@ -0,0 +1,80 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+const index = require('./index-848434f1.js');
+const tabsCss = "*,*::after,*::before{box-sizing:border-box}.tabs{border-block-end:1px solid #39870c;display:flex;gap:2px;flex-wrap:wrap;margin-block-end:24px;padding-inline-start:0}@media screen and (max-width: 767px){.tabs{border:0;display:block}}";
+const DsoTabsStyle0 = tabsCss;
+const Tabs = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        // Keep track of tabs to set focus on next or previous enabled (not disabled) tab.
+        this.keyUpHandler = (e) => {
+            if (!(e.target instanceof HTMLElement)) {
+                return;
+            }
+            switch (e.key) {
+                case "ArrowRight":
+                case "ArrowDown":
+                    this.moveFocusToNextTab(e.target);
+                    break;
+                case "ArrowLeft":
+                case "ArrowUp":
+                    this.moveFocusToPreviousTab(e.target);
+                    break;
+                default:
+                    return;
+            }
+        };
+    }
+    get enabledTabs() {
+        // Only enabled tabs (not disabled) are needed for setting focus via ArrowRight and ArrowLeft
+        return Array.from(this.host.querySelectorAll(":scope > dso-tab")).reduce((tabs, tab) => {
+            if (!tab.disabled) {
+                tabs.push(tab);
+            }
+            return tabs;
+        }, []);
+    }
+    get firstTab() {
+        return this.enabledTabs[0];
+    }
+    get lastTab() {
+        return this.enabledTabs[this.enabledTabs.length - 1];
+    }
+    moveFocusToTab(tab) {
+        tab === null || tab === void 0 ? void 0 : tab._dsoFocus();
+    }
+    moveFocusToPreviousTab(focussedTab) {
+        var _a;
+        const index = this.enabledTabs.findIndex((tab) => tab === focussedTab);
+        const next = (_a = this.enabledTabs[index - 1]) !== null && _a !== void 0 ? _a : this.lastTab;
+        this.moveFocusToTab(next);
+    }
+    moveFocusToNextTab(focussedTab) {
+        var _a;
+        const index = this.enabledTabs.findIndex((tab) => tab === focussedTab);
+        const next = (_a = this.enabledTabs[index + 1]) !== null && _a !== void 0 ? _a : this.firstTab;
+        this.moveFocusToTab(next);
+    }
+    connectedCallback() {
+        var _a;
+        (_a = this.mutationObserver) !== null && _a !== void 0 ? _a : (this.mutationObserver = new MutationObserver(() => index.forceUpdate(this.host)));
+        this.mutationObserver.observe(this.host, { childList: true });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    render() {
+        return (index.h(index.Host, { key: 'ce49553d33f63de258e8ff3466fa37d539e4734f' }, index.h("div", { key: '22a863b05306509b718237a071a072a52c3cfd73', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, index.h("slot", { key: '75d01af59d70f79e059948d9239c7c9ccdef297b' })), index.h("div", { key: '2304bbce1b0c27566ae04f7c1c5dd13cd9e588eb', role: "tabpanel", tabindex: "0" }, index.h("slot", { key: 'bc1a82a606d37dd50beb5f5acd575cc57b41182e', name: "panel" }))));
+    }
+    get host() { return index.getElement(this); }
+};
+Tabs.style = DsoTabsStyle0;
+exports.dso_tabs = Tabs;
+//# sourceMappingURL=dso-tabs.cjs.entry.js.map

package/dist/cjs/dso-tabs.cjs.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"dso-tabs.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,OAAO,GAAG,0OAA0O,CAAC;AAC3P,sBAAe,OAAO;;MCUT,IAAI;IALjB;;;QAoDU,iBAAY,GAAG,CAAC,CAAgB;YACtC,IAAI,EAAE,CAAC,CAAC,MAAM,YAAY,WAAW,CAAC,EAAE;gBACtC,OAAO;aACR;YAED,QAAQ,CAAC,CAAC,GAAG;gBACX,KAAK,YAAY,CAAC;gBAClB,KAAK,WAAW;oBACd,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;oBAClC,MAAM;gBACR,KAAK,WAAW,CAAC;gBACjB,KAAK,SAAS;oBACZ,IAAI,CAAC,sBAAsB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;oBACtC,MAAM;gBACR;oBACE,OAAO;aACV;SACF,CAAC;KAwBH;IAlFC,IAAY,WAAW;;QAErB,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAoB,kBAAkB,CAAC,CAAC,CAAC,MAAM,CACzF,CAAC,IAAI,EAAE,GAAG;YACR,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE;gBACjB,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;aAChB;YAED,OAAO,IAAI,CAAC;SACb,EACD,EAAE,CACH,CAAC;KACH;IAED,IAAY,QAAQ;QAClB,OAAO,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;KAC5B;IAED,IAAY,OAAO;QACjB,OAAO,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;KACtD;IAEO,cAAc,CAAC,GAAkC;QACvD,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,SAAS,EAAE,CAAC;KAClB;IAEO,sBAAsB,CAAC,WAAwB;;QACrD,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,GAAG,KAAK,GAAG,KAAK,WAAW,CAAC,CAAC;QACvE,MAAM,IAAI,GAAG,MAAA,IAAI,CAAC,WAAW,CAAC,KAAK,GAAG,CAAC,CAAC,mCAAI,IAAI,CAAC,OAAO,CAAC;QAEzD,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;KAC3B;IAEO,kBAAkB,CAAC,WAAwB;;QACjD,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,GAAG,KAAK,GAAG,KAAK,WAAW,CAAC,CAAC;QACvE,MAAM,IAAI,GAAG,MAAA,IAAI,CAAC,WAAW,CAAC,KAAK,GAAG,CAAC,CAAC,mCAAI,IAAI,CAAC,QAAQ,CAAC;QAE1D,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;KAC3B;IAsBD,iBAAiB;;QACf,MAAA,IAAI,CAAC,gBAAgB,oCAArB,IAAI,CAAC,gBAAgB,GAAK,IAAI,gBAAgB,CAAC,MAAMA,iBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,EAAC;QAE7E,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;KAC/D;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,gBAAgB,0CAAE,UAAU,EAAE,CAAC;KACrC;IAED,MAAM;QACJ,QACEC,QAACC,UAAI,uDACHD,kEAAK,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS,EAAC,OAAO,EAAE,IAAI,CAAC,YAAY,IACzDA,oEAAQ,CACJ,EACNA,kEAAK,IAAI,EAAC,UAAU,EAAC,QAAQ,EAAC,GAAG,IAC/BA,mEAAM,IAAI,EAAC,OAAO,GAAG,CACjB,CACD,EACP;KACH;;;;;;;","names":["forceUpdate","h","Host"],"sources":["src/components/tabs/tabs.scss?tag=dso-tabs&encapsulation=shadow","src/components/tabs/tabs.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/scaffolding\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/components/anchor\";\r\n\r\n@use \"~dso-toolkit/src/components/tabs/tabs.variables\" as tab-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n.tabs {\r\n border-block-end: 1px solid colors.$grasgroen;\r\n display: flex;\r\n gap: 2px;\r\n flex-wrap: wrap;\r\n margin-block-end: tab-variables.$margin-block-end;\r\n padding-inline-start: 0;\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n border: 0;\r\n display: block;\r\n }\r\n}\r\n","import { Element, Component, h, Host, forceUpdate } from \"@stencil/core\";\r\n\r\n/**\r\n * @slot - The dso-tab elements. These should be direct children of the dso-tabs element.\r\n * @slot panel - The panel with the content for the active tab\r\n */\r\n@Component({\r\n tag: \"dso-tabs\",\r\n styleUrl: \"tabs.scss\",\r\n shadow: true,\r\n})\r\nexport class Tabs {\r\n private mutationObserver?: MutationObserver;\r\n\r\n @Element()\r\n host!: HTMLDsoTabsElement;\r\n\r\n private get enabledTabs() {\r\n // Only enabled tabs (not disabled) are needed for setting focus via ArrowRight and ArrowLeft\r\n return Array.from(this.host.querySelectorAll<HTMLDsoTabElement>(\":scope > dso-tab\")).reduce<HTMLDsoTabElement[]>(\r\n (tabs, tab) => {\r\n if (!tab.disabled) {\r\n tabs.push(tab);\r\n }\r\n\r\n return tabs;\r\n },\r\n [],\r\n );\r\n }\r\n\r\n private get firstTab() {\r\n return this.enabledTabs[0];\r\n }\r\n\r\n private get lastTab() {\r\n return this.enabledTabs[this.enabledTabs.length - 1];\r\n }\r\n\r\n private moveFocusToTab(tab: HTMLDsoTabElement | undefined) {\r\n tab?._dsoFocus();\r\n }\r\n\r\n private moveFocusToPreviousTab(focussedTab: HTMLElement) {\r\n const index = this.enabledTabs.findIndex((tab) => tab === focussedTab);\r\n const next = this.enabledTabs[index - 1] ?? this.lastTab;\r\n\r\n this.moveFocusToTab(next);\r\n }\r\n\r\n private moveFocusToNextTab(focussedTab: HTMLElement) {\r\n const index = this.enabledTabs.findIndex((tab) => tab === focussedTab);\r\n const next = this.enabledTabs[index + 1] ?? this.firstTab;\r\n\r\n this.moveFocusToTab(next);\r\n }\r\n\r\n // Keep track of tabs to set focus on next or previous enabled (not disabled) tab.\r\n private keyUpHandler = (e: KeyboardEvent) => {\r\n if (!(e.target instanceof HTMLElement)) {\r\n return;\r\n }\r\n\r\n switch (e.key) {\r\n case \"ArrowRight\":\r\n case \"ArrowDown\":\r\n this.moveFocusToNextTab(e.target);\r\n break;\r\n case \"ArrowLeft\":\r\n case \"ArrowUp\":\r\n this.moveFocusToPreviousTab(e.target);\r\n break;\r\n default:\r\n return;\r\n }\r\n };\r\n\r\n connectedCallback(): void {\r\n this.mutationObserver ??= new MutationObserver(() => forceUpdate(this.host));\r\n\r\n this.mutationObserver.observe(this.host, { childList: true });\r\n }\r\n\r\n disconnectedCallback(): void {\r\n this.mutationObserver?.disconnect();\r\n }\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <div class=\"tabs\" role=\"tablist\" onKeyUp={this.keyUpHandler}>\r\n <slot />\r\n </div>\r\n <div role=\"tabpanel\" tabindex=\"0\">\r\n <slot name=\"panel\" />\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/cjs/dso-toggletip.cjs.entry.js CHANGED Viewed

@@ -49,7 +49,7 @@ const Toggletip = class {
         this.secondary = undefined;
     }
     render() {
-        return (index.h(index.Fragment, null, index.h("dso-info-button", { key: '3304cffaef15d2628de0d345889ba52dbf60514a', "aria-describedby": "toggle", onClick: this.click, label: this.label, active: this.active, secondary: this.secondary, ref: (element) => (this.infoButton = element) }), index.h("dso-tooltip", { key: '4d120364ab6288ded65ea048f7dd7ec18b4f16e0', stateless: true, descriptive: true, id: "toggle", strategy: "absolute", active: this.active, position: this.position, small: this.small }, index.h("slot", { key: 'ab233a002b03fa23345df374366d2ba8f08b2b63' }))));
+        return (index.h(index.Fragment, null, index.h("dso-info-button", { key: 'd814dd230c0a2b7dd143f0c461a7c35c5a0e8256', "aria-describedby": "toggle", onClick: this.click, label: this.label, active: this.active, secondary: this.secondary, ref: (element) => (this.infoButton = element) }), index.h("dso-tooltip", { key: '8335db4a80d8bf7fdec4251caa9a3d4c5520b8f4', stateless: true, descriptive: true, id: "toggle", strategy: "absolute", active: this.active, position: this.position, small: this.small }, index.h("slot", { key: 'e4f9747977cd810999eb63ee413e63827ce106e3' }))));
     }
     get host() { return index.getElement(this); }
 };