npm - @dso-toolkit/core - Versions diffs - 56.1.0 → 57.0.0 - Mend

@dso-toolkit/core 56.1.0 → 57.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (122) hide show

package/dist/collection/components/helpcenter-panel/helpcenter-panel.css CHANGED Viewed

@@ -79,19 +79,19 @@
   border-color: #afcf9d;
   color: #fff;
 }
-.open-button.btn-sm {
+.open-button.dso-small {
   line-height: 1rem;
 }
-.open-button.btn-sm dso-icon,
-.open-button.btn-sm svg.di, .open-button.btn-sm.extern::after, .open-button.btn-sm.download::after, .open-button.btn-sm.dso-spinner::before {
+.open-button.dso-small dso-icon,
+.open-button.dso-small svg.di, .open-button.dso-small.extern::after, .open-button.dso-small.download::after, .open-button.dso-small.dso-spinner::before {
   margin-bottom: -4px;
   margin-top: -4px;
 }
-.open-button.btn-sm.dso-spinner-left::before {
+.open-button.dso-small.dso-spinner-left::before {
   height: 16px;
   width: 16px;
 }
-.open-button.btn-sm.dso-spinner-right::after {
+.open-button.dso-small.dso-spinner-right::after {
   height: 16px;
   width: 16px;
 }
@@ -188,19 +188,19 @@
   border-color: #afcf9d;
   color: #afcf9d;
 }
-.close-button.btn-sm {
+.close-button.dso-small {
   line-height: 1rem;
 }
-.close-button.btn-sm dso-icon,
-.close-button.btn-sm svg.di, .close-button.btn-sm.extern::after, .close-button.btn-sm.download::after, .close-button.btn-sm.dso-spinner::before {
+.close-button.dso-small dso-icon,
+.close-button.dso-small svg.di, .close-button.dso-small.extern::after, .close-button.dso-small.download::after, .close-button.dso-small.dso-spinner::before {
   margin-bottom: -4px;
   margin-top: -4px;
 }
-.close-button.btn-sm.dso-spinner-left::before {
+.close-button.dso-small.dso-spinner-left::before {
   height: 16px;
   width: 16px;
 }
-.close-button.btn-sm.dso-spinner-right::after {
+.close-button.dso-small.dso-spinner-right::after {
   height: 16px;
   width: 16px;
 }
@@ -239,7 +239,7 @@
   width: 24px;
   margin-right: 8px;
 }
-.close-button.dso-spinner-left:not([disabled]).btn-sm:hover::before {
+.close-button.dso-spinner-left:not([disabled]).dso-small:hover::before {
   height: 16px;
   width: 16px;
 }
@@ -263,7 +263,7 @@
   width: 24px;
   margin-left: 8px;
 }
-.close-button.dso-spinner-right:not([disabled]).btn-sm:hover::after {
+.close-button.dso-spinner-right:not([disabled]).dso-small:hover::after {
   height: 16px;
   width: 16px;
 }

package/dist/collection/components/image-overlay/image-overlay.css CHANGED Viewed

@@ -77,19 +77,19 @@ button::-moz-focus-inner {
   border-color: #afcf9d;
   color: #afcf9d;
 }
-.open.btn-sm {
+.open.dso-small {
   line-height: 1rem;
 }
-.open.btn-sm dso-icon,
-.open.btn-sm svg.di, .open.btn-sm.extern::after, .open.btn-sm.download::after, .open.btn-sm.dso-spinner::before {
+.open.dso-small dso-icon,
+.open.dso-small svg.di, .open.dso-small.extern::after, .open.dso-small.download::after, .open.dso-small.dso-spinner::before {
   margin-bottom: -4px;
   margin-top: -4px;
 }
-.open.btn-sm.dso-spinner-left::before {
+.open.dso-small.dso-spinner-left::before {
   height: 16px;
   width: 16px;
 }
-.open.btn-sm.dso-spinner-right::after {
+.open.dso-small.dso-spinner-right::after {
   height: 16px;
   width: 16px;
 }
@@ -128,7 +128,7 @@ button::-moz-focus-inner {
   width: 24px;
   margin-right: 8px;
 }
-.open.dso-spinner-left:not([disabled]).btn-sm:hover::before {
+.open.dso-spinner-left:not([disabled]).dso-small:hover::before {
   height: 16px;
   width: 16px;
 }
@@ -152,7 +152,7 @@ button::-moz-focus-inner {
   width: 24px;
   margin-left: 8px;
 }
-.open.dso-spinner-right:not([disabled]).btn-sm:hover::after {
+.open.dso-spinner-right:not([disabled]).dso-small:hover::after {
   height: 16px;
   width: 16px;
 }
@@ -247,19 +247,19 @@ button::-moz-focus-inner {
   border-color: #afcf9d;
   color: #afcf9d;
 }
-.close.btn-sm {
+.close.dso-small {
   line-height: 1rem;
 }
-.close.btn-sm dso-icon,
-.close.btn-sm svg.di, .close.btn-sm.extern::after, .close.btn-sm.download::after, .close.btn-sm.dso-spinner::before {
+.close.dso-small dso-icon,
+.close.dso-small svg.di, .close.dso-small.extern::after, .close.dso-small.download::after, .close.dso-small.dso-spinner::before {
   margin-bottom: -4px;
   margin-top: -4px;
 }
-.close.btn-sm.dso-spinner-left::before {
+.close.dso-small.dso-spinner-left::before {
   height: 16px;
   width: 16px;
 }
-.close.btn-sm.dso-spinner-right::after {
+.close.dso-small.dso-spinner-right::after {
   height: 16px;
   width: 16px;
 }
@@ -298,7 +298,7 @@ button::-moz-focus-inner {
   width: 24px;
   margin-right: 8px;
 }
-.close.dso-spinner-left:not([disabled]).btn-sm:hover::before {
+.close.dso-spinner-left:not([disabled]).dso-small:hover::before {
   height: 16px;
   width: 16px;
 }
@@ -322,7 +322,7 @@ button::-moz-focus-inner {
   width: 24px;
   margin-left: 8px;
 }
-.close.dso-spinner-right:not([disabled]).btn-sm:hover::after {
+.close.dso-spinner-right:not([disabled]).dso-small:hover::after {
   height: 16px;
   width: 16px;
 }

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

@@ -19,7 +19,7 @@ export class InfoButton {
     this.dsoToggle.emit({ originalEvent: e, active: this.active });
   }
   render() {
-    return (h(Host, { onMouseenter: () => (this.hover = true), onMouseleave: () => (this.hover = false) }, h("button", { type: "button", class: clsx("btn", { "dso-open": !!this.active, "dso-info-secondary": !!this.secondary }), "aria-expanded": typeof this.active === "boolean" ? this.active.toString() : undefined, onClick: (e) => this.handleToggle(e), ref: (element) => (this.button = element) }, h("dso-icon", { icon: this.active || this.hover ? "info-active" : "info" }), h("span", { class: "sr-only" }, this.label))));
+    return (h(Host, { onMouseenter: () => (this.hover = true), onMouseleave: () => (this.hover = false) }, h("button", { type: "button", class: clsx({ "dso-open": !!this.active, "dso-info-secondary": !!this.secondary }), "aria-expanded": typeof this.active === "boolean" ? this.active.toString() : undefined, onClick: (e) => this.handleToggle(e), ref: (element) => (this.button = element) }, h("dso-icon", { icon: this.active || this.hover ? "info-active" : "info" }), h("span", { class: "sr-only" }, this.label))));
   }
   static get is() { return "dso-info-button"; }
   static get encapsulation() { return "shadow"; }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"info-button.js","sourceRoot":"","sources":["../../../src/components/info-button/info-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAgB,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC7F,OAAO,IAAI,MAAM,MAAM,CAAC;AASxB,MAAM,OAAO,UAAU;;;iBAUb,KAAK;;iBAYL,uBAAuB;;EAQ/B;;KAEG;EAEH,KAAK,CAAC,QAAQ;;IACZ,MAAA,IAAI,CAAC,MAAM,0CAAE,KAAK,EAAE,CAAC;EACvB,CAAC;EAEO,YAAY,CAAC,CAAa;IAChC,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;IAC3B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;EACjE,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,YAAY,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,YAAY,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;MACrF,cACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,IAAI,CAAC,~~KAAK,~~EAAE,~~EAAE,~~UAAU,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,EAAE,oBAAoB,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC,~~mBAC1E~~,OAAO,IAAI,CAAC,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,SAAS,EACpF,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EACpC,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC;QAEzC,gBAAU,IAAI,EAAE,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,GAAa;QAC/E,YAAM,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,KAAK,CAAQ,CAClC,CACJ,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { h, Component, Event, Prop, EventEmitter, Method, Host, State } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\nimport { InfoButtonToggleEvent } from \"./info-button.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-info-button\",\r\n shadow: true,\r\n styleUrl: \"info-button.scss\",\r\n})\r\nexport class InfoButton {\r\n private button?: HTMLButtonElement;\r\n\r\n /*\r\n Whether the InfoButton is active.\r\n /\r\n @Prop({ mutable: true, reflect: true })\r\n active?: boolean;\r\n\r\n @State()\r\n hover = false;\r\n\r\n /\r\n For secondary Info Button.\r\n /\r\n @Prop()\r\n secondary?: boolean;\r\n\r\n /\r\n The label.\r\n /\r\n @Prop()\r\n label = \"Toelichting bij optie\";\r\n\r\n /\r\n Emitted when the user activates the Info Button.\r\n /\r\n @Event()\r\n dsoToggle!: EventEmitter<InfoButtonToggleEvent>;\r\n\r\n /\r\n To set focus to the toggle button.\r\n */\r\n @Method()\r\n async setFocus() {\r\n this.button?.focus();\r\n }\r\n\r\n private handleToggle(e: MouseEvent) {\r\n this.active = !this.active;\r\n this.dsoToggle.emit({ originalEvent: e, active: this.active });\r\n }\r\n\r\n render() {\r\n return (\r\n <Host onMouseenter={() => (this.hover = true)} onMouseleave={() => (this.hover = false)}>\r\n <button\r\n type=\"button\"\r\n class={clsx(~~\"btn\",~~ { \"dso-open\": !!this.active, \"dso-info-secondary\": !!this.secondary })}\r\n aria-expanded={typeof this.active === \"boolean\" ? this.active.toString() : undefined}\r\n onClick={(e) => this.handleToggle(e)}\r\n ref={(element) => (this.button = element)}\r\n >\r\n <dso-icon icon={this.active \|\| this.hover ? \"info-active\" : \"info\"}></dso-icon>\r\n <span class=\"sr-only\">{this.label}</span>\r\n </button>\r\n </Host>\r\n );\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"info-button.js","sourceRoot":"","sources":["../../../src/components/info-button/info-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAgB,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC7F,OAAO,IAAI,MAAM,MAAM,CAAC;AASxB,MAAM,OAAO,UAAU;;;iBAUb,KAAK;;iBAYL,uBAAuB;;EAQ/B;;KAEG;EAEH,KAAK,CAAC,QAAQ;;IACZ,MAAA,IAAI,CAAC,MAAM,0CAAE,KAAK,EAAE,CAAC;EACvB,CAAC;EAEO,YAAY,CAAC,CAAa;IAChC,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;IAC3B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;EACjE,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,YAAY,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,YAAY,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;MACrF,cACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,IAAI,CAAC,EAAE,UAAU,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,EAAE,oBAAoB,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC,mBACnE,OAAO,IAAI,CAAC,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,SAAS,EACpF,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EACpC,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC;QAEzC,gBAAU,IAAI,EAAE,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,GAAa;QAC/E,YAAM,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,KAAK,CAAQ,CAClC,CACJ,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { h, Component, Event, Prop, EventEmitter, Method, Host, State } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\nimport { InfoButtonToggleEvent } from \"./info-button.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-info-button\",\r\n shadow: true,\r\n styleUrl: \"info-button.scss\",\r\n})\r\nexport class InfoButton {\r\n private button?: HTMLButtonElement;\r\n\r\n /*\r\n Whether the InfoButton is active.\r\n /\r\n @Prop({ mutable: true, reflect: true })\r\n active?: boolean;\r\n\r\n @State()\r\n hover = false;\r\n\r\n /\r\n For secondary Info Button.\r\n /\r\n @Prop()\r\n secondary?: boolean;\r\n\r\n /\r\n The label.\r\n /\r\n @Prop()\r\n label = \"Toelichting bij optie\";\r\n\r\n /\r\n Emitted when the user activates the Info Button.\r\n /\r\n @Event()\r\n dsoToggle!: EventEmitter<InfoButtonToggleEvent>;\r\n\r\n /\r\n To set focus to the toggle button.\r\n */\r\n @Method()\r\n async setFocus() {\r\n this.button?.focus();\r\n }\r\n\r\n private handleToggle(e: MouseEvent) {\r\n this.active = !this.active;\r\n this.dsoToggle.emit({ originalEvent: e, active: this.active });\r\n }\r\n\r\n render() {\r\n return (\r\n <Host onMouseenter={() => (this.hover = true)} onMouseleave={() => (this.hover = false)}>\r\n <button\r\n type=\"button\"\r\n class={clsx({ \"dso-open\": !!this.active, \"dso-info-secondary\": !!this.secondary })}\r\n aria-expanded={typeof this.active === \"boolean\" ? this.active.toString() : undefined}\r\n onClick={(e) => this.handleToggle(e)}\r\n ref={(element) => (this.button = element)}\r\n >\r\n <dso-icon icon={this.active \|\| this.hover ? \"info-active\" : \"info\"}></dso-icon>\r\n <span class=\"sr-only\">{this.label}</span>\r\n </button>\r\n </Host>\r\n );\r\n }\r\n}\r\n"]}

package/dist/collection/components/list-button/list-button.css CHANGED Viewed

@@ -60,11 +60,17 @@
 .dso-tertiary:not([disabled]):active {
   color: #173521;
 }
-.dso-tertiary.btn-align {
+.dso-tertiary.dso-align {
   line-height: calc(1.5em - 1px);
   padding: 11px 0;
   position: relative;
 }
+.dso-tertiary.dso-truncate {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .dso-tertiary.dso-spinner-left::before {
   background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
   background-repeat: no-repeat;
@@ -141,32 +147,32 @@
   -moz-appearance: textfield;
 }
-.dso-btn-group {
+.dso-button-group {
   display: flex;
   flex-direction: row;
 }
-.dso-btn-group.dso-disabled > * {
+.dso-button-group.dso-disabled > * {
   background-color: #fff;
   border-color: #e5e5e5;
   color: #666;
   pointer-events: none;
 }
-.dso-btn-group > * {
+.dso-button-group > * {
   border-radius: 0;
 }
-.dso-btn-group > *:first-child {
+.dso-button-group > *:first-child {
   border-radius: 4px 0 0 4px;
 }
-.dso-btn-group > *:not(:first-child) {
+.dso-button-group > *:not(:first-child) {
   border-left-style: none !important;
 }
-.dso-btn-group > *:last-child {
+.dso-button-group > *:last-child {
   border-radius: 0 4px 4px 0;
 }
-.dso-btn-group > *:only-child {
+.dso-button-group > *:only-child {
   border-radius: 4px;
 }
-.dso-btn-group > .dso-input-number {
+.dso-button-group > .dso-input-number {
   background-color: #fff;
   border-color: #ccc;
   color: #191919;
@@ -176,38 +182,38 @@
   padding: 0 16px;
 }
 @media screen and (max-width: 767px) {
-  .dso-btn-group > .dso-input-number {
+  .dso-button-group > .dso-input-number {
     justify-content: center;
   }
 }
-.dso-btn-group > *:hover + .dso-input-number,
-.dso-btn-group > *:focus + .dso-input-number {
+.dso-button-group > *:hover + .dso-input-number,
+.dso-button-group > *:focus + .dso-input-number {
   background-color: #fff;
   border-color: #39870c;
   color: #191919;
 }
-.dso-btn-group > *.dso-selected + .dso-input-number {
+.dso-button-group > *.dso-selected + .dso-input-number {
   background-color: #fff;
   border-color: #39870c;
   color: #191919;
   box-shadow: inset 0 -1px 0 0 #39870c, inset 0 1px 0 0 #39870c, inset -1px 0 0 0 #39870c;
 }
-.dso-btn-group > *:active + .dso-input-number, .dso-btn-group > *:active + .dso-input-number:hover,
-.dso-btn-group > *.active + .dso-input-number,
-.dso-btn-group > *.active + .dso-input-number:hover {
+.dso-button-group > *:active + .dso-input-number, .dso-button-group > *:active + .dso-input-number:hover,
+.dso-button-group > *.active + .dso-input-number,
+.dso-button-group > *.active + .dso-input-number:hover {
   background-color: #fff;
   border-color: #39870c;
   color: #191919;
 }
-.dso-btn-group > *.disabled + .dso-input-number, .dso-btn-group > *.disabled + .dso-input-number:hover,
-.dso-btn-group > *[disabled] + .dso-input-number,
-.dso-btn-group > *[disabled] + .dso-input-number:hover {
+.dso-button-group > *.disabled + .dso-input-number, .dso-button-group > *.disabled + .dso-input-number:hover,
+.dso-button-group > *[disabled] + .dso-input-number,
+.dso-button-group > *[disabled] + .dso-input-number:hover {
   background-color: #fff;
   border-color: #ccc;
   color: #666;
   opacity: 1;
 }
-.dso-btn-group .dso-list-button {
+.dso-button-group .dso-list-button {
   padding-right: 15px;
 }
@@ -444,9 +450,9 @@
 }
 .dso-list-button + .dso-list-button,
-.dso-list-button + .dso-btn-group,
-.dso-btn-group + .dso-list-button,
-.dso-btn-group + .dso-btn-group {
+.dso-list-button + .dso-button-group,
+.dso-button-group + .dso-list-button,
+.dso-button-group + .dso-button-group {
   margin-top: 4px;
 }

package/dist/collection/components/list-button/list-button.js CHANGED Viewed

@@ -100,7 +100,7 @@ export class ListButton {
   render() {
     const showButtonInputs = this.manualCount === undefined;
     const selected = this.checked || (this.count !== undefined && this.count > 0);
-    return (h("div", { class: clsx(["dso-btn-group", { "dso-disabled": this.disabled }]) }, h("div", { class: clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, h("div", { class: "dso-selectable" }, h("input", { id: "dso-list-button-checkbox", type: "checkbox", value: "list-button", name: "naam", checked: selected, disabled: this.disabled, "aria-label": this.label }), h("label", { htmlFor: "dso-list-button-checkbox" }, this.label)), this.sublabel && h("span", { class: "dso-sublabel" }, this.sublabel), h("slot", { name: "subcontent" })), this.count !== undefined && this.count > 0 && (h("div", { class: "dso-input-number" }, this.manualCount === undefined && this.count > 1 && (h("button", { type: "button", class: "dso-tertiary", disabled: this.count === Number(this.min) || this.disabled, onClick: (e) => this.stepValue(e, "decrement") }, h("dso-icon", { icon: "minus-circle" }), h("span", { class: "sr-only" }, "Aantal verlagen"))), h("div", { class: "dso-input-wrapper" }, this.manualCount === undefined && this.count > 1 && (h("input", { class: "dso-input-step-counter", type: "number", tabIndex: -1, "aria-label": "Aantal", value: this.count, readOnly: true })), h("form", { onSubmit: (e) => this.setCount(e) }, h("div", { ref: (element) => (this.manualInputWrapperElement = element) }, h("input", { class: clsx("form-control", { hidden: showButtonInputs }), type: "number", "aria-label": "Aantal", value: this.manualCount, min: this.min, max: this.max, onInput: (e) => this.handleOnChange(e) })), this.manual === true && (h("button", { class: clsx("dso-manual-input-button", { "sr-only": !showButtonInputs }), type: !showButtonInputs ? "submit" : "button", disabled: this.disabled, onClick: () => showButtonInputs && this.startManualCountInput() }, showButtonInputs ? (h("span", { class: "sr-only" }, "Handmatig aantal invullen")) : (h("span", { class: "sr-only" }, "Zet waarde")))))), showButtonInputs && (h("button", { type: "button", class: "dso-tertiary", disabled: this.count === Number(this.max) || this.disabled, onClick: (e) => this.stepValue(e, "increment") }, h("dso-icon", { icon: "plus-circle" }), h("span", { class: "sr-only" }, "Aantal verhogen")))))));
+    return (h("div", { class: clsx(["dso-button-group", { "dso-disabled": this.disabled }]) }, h("div", { class: clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, h("div", { class: "dso-selectable" }, h("input", { id: "dso-list-button-checkbox", type: "checkbox", value: "list-button", name: "naam", checked: selected, disabled: this.disabled, "aria-label": this.label }), h("label", { htmlFor: "dso-list-button-checkbox" }, this.label)), this.sublabel && h("span", { class: "dso-sublabel" }, this.sublabel), h("slot", { name: "subcontent" })), this.count !== undefined && this.count > 0 && (h("div", { class: "dso-input-number" }, this.manualCount === undefined && this.count > 1 && (h("button", { type: "button", class: "dso-tertiary", disabled: this.count === Number(this.min) || this.disabled, onClick: (e) => this.stepValue(e, "decrement") }, h("dso-icon", { icon: "minus-circle" }), h("span", { class: "sr-only" }, "Aantal verlagen"))), h("div", { class: "dso-input-wrapper" }, this.manualCount === undefined && this.count > 1 && (h("input", { class: "dso-input-step-counter", type: "number", tabIndex: -1, "aria-label": "Aantal", value: this.count, readOnly: true })), h("form", { onSubmit: (e) => this.setCount(e) }, h("div", { ref: (element) => (this.manualInputWrapperElement = element) }, h("input", { class: clsx("form-control", { hidden: showButtonInputs }), type: "number", "aria-label": "Aantal", value: this.manualCount, min: this.min, max: this.max, onInput: (e) => this.handleOnChange(e) })), this.manual === true && (h("button", { class: clsx("dso-manual-input-button", { "sr-only": !showButtonInputs }), type: !showButtonInputs ? "submit" : "button", disabled: this.disabled, onClick: () => showButtonInputs && this.startManualCountInput() }, showButtonInputs ? (h("span", { class: "sr-only" }, "Handmatig aantal invullen")) : (h("span", { class: "sr-only" }, "Zet waarde")))))), showButtonInputs && (h("button", { type: "button", class: "dso-tertiary", disabled: this.count === Number(this.max) || this.disabled, onClick: (e) => this.stepValue(e, "increment") }, h("dso-icon", { icon: "plus-circle" }), h("span", { class: "sr-only" }, "Aantal verhogen")))))));
   }
   static get is() { return "dso-list-button"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/list-button/list-button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"list-button.js","sourceRoot":"","sources":["../../../src/components/list-button/list-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, h, Prop, Event, EventEmitter, State, Watch } from \"@stencil/core\";\r\nimport { ListButtonChangeEvent, ListButtonSelectedEvent } from \"./list-button.interfaces\";\r\n\r\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\r\nimport clsx from \"clsx\";\r\n\r\n@Component({\r\n tag: \"dso-list-button\",\r\n shadow: true,\r\n styleUrl: \"list-button.scss\",\r\n})\r\nexport class ListButton implements ComponentInterface {\r\n private trap?: FocusTrap;\r\n\r\n @State()\r\n private manualInputWrapperElement?: HTMLDivElement;\r\n\r\n private manualInputButtonElement?: HTMLButtonElement;\r\n\r\n @State()\r\n manualCount?: number;\r\n\r\n /*\r\n The label of the List Button.\r\n /\r\n @Prop()\r\n label?: string;\r\n\r\n /\r\n The sublabel of the List Button.\r\n /\r\n @Prop()\r\n sublabel?: string;\r\n\r\n /\r\n When defined the count can show on the List Button.\r\n /\r\n @Prop()\r\n count?: number;\r\n\r\n /\r\n The minimum value.\r\n /\r\n @Prop()\r\n min?: string \| number;\r\n\r\n /\r\n The maximum value.\r\n /\r\n @Prop()\r\n max?: string \| number;\r\n\r\n /\r\n Whether the List Button is checked.\r\n /\r\n @Prop({ reflect: true })\r\n checked = false;\r\n\r\n /\r\n Whether the List Button is disabled.\r\n /\r\n @Prop({ reflect: true })\r\n disabled = false;\r\n\r\n /\r\n Allow user to directly input a value.\r\n \r\n Set to `false` to force users to use plus/minus buttons.\r\n /\r\n @Prop()\r\n manual = true;\r\n\r\n /\r\n Emitted when the user changes the count.\r\n /\r\n @Event()\r\n dsoCountChange!: EventEmitter<ListButtonChangeEvent>;\r\n\r\n /\r\n Emitted when the user activates the List Button itself.\r\n \r\n Does not fire when the user activates the count controls.\r\n */\r\n @Event()\r\n dsoSelectedChange!: EventEmitter<ListButtonSelectedEvent>;\r\n\r\n @Watch(\"manual\")\r\n watchManualCallback() {\r\n if (!this.manual && this.manualCount) {\r\n this.stopManualCountInput();\r\n }\r\n }\r\n\r\n componentDidRender(): void {\r\n if (this.manualCount !== undefined && this.manualInputWrapperElement && !this.trap) {\r\n this.trap = createFocusTrap(this.manualInputWrapperElement, {\r\n escapeDeactivates: true,\r\n setReturnFocus: false,\r\n\r\n clickOutsideDeactivates: (e) => {\r\n this.setCount(e);\r\n\r\n return true;\r\n },\r\n onDeactivate: () => this.stopManualCountInput(),\r\n onPostDeactivate: () => this.manualInputButtonElement?.focus(),\r\n }).activate();\r\n } else if (this.manualCount === undefined && this.trap) {\r\n this.trap?.deactivate();\r\n\r\n delete this.trap;\r\n }\r\n }\r\n\r\n disconnectedCallback(): void {\r\n this.trap?.deactivate();\r\n }\r\n\r\n private handleOnChange({ target }: Event): void {\r\n if (target instanceof HTMLInputElement) {\r\n this.manualCount = target.valueAsNumber;\r\n }\r\n }\r\n\r\n private stepValue(e: Event, direction: \"increment\" \| \"decrement\"): void {\r\n if (typeof this.count === \"number\") {\r\n const newValue = direction === \"increment\" ? this.count + 1 : this.count - 1;\r\n\r\n if (this.isNewCountValid(newValue) === false) {\r\n return;\r\n }\r\n\r\n this.dsoCountChange.emit({\r\n originalEvent: e,\r\n count: newValue,\r\n });\r\n }\r\n }\r\n\r\n private setCount(e: Event): void {\r\n e.preventDefault();\r\n\r\n if (typeof this.manualCount === \"number\" && this.isNewCountValid(this.manualCount)) {\r\n this.dsoCountChange.emit({\r\n originalEvent: e,\r\n count: this.manualCount,\r\n });\r\n this.stopManualCountInput();\r\n }\r\n }\r\n\r\n private handleSelectClick(e: Event): void {\r\n e.preventDefault();\r\n\r\n if (this.count !== undefined) {\r\n this.dsoCountChange.emit({\r\n originalEvent: e,\r\n count: this.count > 0 ? 0 : 1,\r\n });\r\n\r\n return;\r\n }\r\n\r\n this.dsoSelectedChange.emit({\r\n originalEvent: e,\r\n checked: !this.checked,\r\n });\r\n }\r\n\r\n private startManualCountInput(): void {\r\n this.manualCount = this.count;\r\n }\r\n\r\n private stopManualCountInput(): void {\r\n this.manualCount = undefined;\r\n }\r\n\r\n private isNewCountValid(newValue: number): boolean {\r\n if (\r\n this.min !== undefined &&\r\n this.max !== undefined &&\r\n (newValue < Number(this.min) \|\| newValue > Number(this.max))\r\n ) {\r\n return false;\r\n }\r\n\r\n return true;\r\n }\r\n\r\n render() {\r\n const showButtonInputs = this.manualCount === undefined;\r\n\r\n const selected = this.checked \|\| (this.count !== undefined && this.count > 0);\r\n\r\n return (\r\n <div class={clsx([\"dso-btn-group\", { \"dso-disabled\": this.disabled }])}>\r\n <div\r\n class={clsx([\"dso-list-button\", { \"dso-selected\": selected, \"dso-single-count\": this.count === 1 }])}\r\n onClick={(e) => this.handleSelectClick(e)}\r\n >\r\n <div class=\"dso-selectable\">\r\n <input\r\n id=\"dso-list-button-checkbox\"\r\n type=\"checkbox\"\r\n value=\"list-button\"\r\n name=\"naam\"\r\n checked={selected}\r\n disabled={this.disabled}\r\n aria-label={this.label}\r\n />\r\n <label htmlFor=\"dso-list-button-checkbox\">{this.label}</label>\r\n </div>\r\n {this.sublabel && <span class=\"dso-sublabel\">{this.sublabel}</span>}\r\n <slot name=\"subcontent\" />\r\n </div>\r\n\r\n {this.count !== undefined && this.count > 0 && (\r\n <div class=\"dso-input-number\">\r\n {this.manualCount === undefined && this.count > 1 && (\r\n <button\r\n type=\"button\"\r\n class=\"dso-tertiary\"\r\n disabled={this.count === Number(this.min) \|\| this.disabled}\r\n onClick={(e) => this.stepValue(e, \"decrement\")}\r\n >\r\n <dso-icon icon=\"minus-circle\"></dso-icon>\r\n <span class=\"sr-only\">Aantal verlagen</span>\r\n </button>\r\n )}\r\n\r\n <div class=\"dso-input-wrapper\">\r\n {this.manualCount === undefined && this.count > 1 && (\r\n <input\r\n class=\"dso-input-step-counter\"\r\n type=\"number\"\r\n tabIndex={-1}\r\n aria-label=\"Aantal\"\r\n value={this.count}\r\n readOnly\r\n />\r\n )}\r\n\r\n <form onSubmit={(e) => this.setCount(e)}>\r\n <div ref={(element) => (this.manualInputWrapperElement = element)}>\r\n <input\r\n class={clsx(\"form-control\", { hidden: showButtonInputs })}\r\n type=\"number\"\r\n aria-label=\"Aantal\"\r\n value={this.manualCount}\r\n min={this.min}\r\n max={this.max}\r\n onInput={(e) => this.handleOnChange(e)}\r\n />\r\n </div>\r\n\r\n {this.manual === true && (\r\n <button\r\n class={clsx(\"dso-manual-input-button\", { \"sr-only\": !showButtonInputs })}\r\n type={!showButtonInputs ? \"submit\" : \"button\"}\r\n disabled={this.disabled}\r\n onClick={() => showButtonInputs && this.startManualCountInput()}\r\n >\r\n {showButtonInputs ? (\r\n <span class=\"sr-only\">Handmatig aantal invullen</span>\r\n ) : (\r\n <span class=\"sr-only\">Zet waarde</span>\r\n )}\r\n </button>\r\n )}\r\n </form>\r\n </div>\r\n\r\n {showButtonInputs && (\r\n <button\r\n type=\"button\"\r\n class=\"dso-tertiary\"\r\n disabled={this.count === Number(this.max) \|\| this.disabled}\r\n onClick={(e) => this.stepValue(e, \"increment\")}\r\n >\r\n <dso-icon icon=\"plus-circle\"></dso-icon>\r\n <span class=\"sr-only\">Aantal verhogen</span>\r\n </button>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n );\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"list-button.js","sourceRoot":"","sources":["../../../src/components/list-button/list-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, h, Prop, Event, EventEmitter, State, Watch } from \"@stencil/core\";\r\nimport { ListButtonChangeEvent, ListButtonSelectedEvent } from \"./list-button.interfaces\";\r\n\r\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\r\nimport clsx from \"clsx\";\r\n\r\n@Component({\r\n tag: \"dso-list-button\",\r\n shadow: true,\r\n styleUrl: \"list-button.scss\",\r\n})\r\nexport class ListButton implements ComponentInterface {\r\n private trap?: FocusTrap;\r\n\r\n @State()\r\n private manualInputWrapperElement?: HTMLDivElement;\r\n\r\n private manualInputButtonElement?: HTMLButtonElement;\r\n\r\n @State()\r\n manualCount?: number;\r\n\r\n /*\r\n The label of the List Button.\r\n /\r\n @Prop()\r\n label?: string;\r\n\r\n /\r\n The sublabel of the List Button.\r\n /\r\n @Prop()\r\n sublabel?: string;\r\n\r\n /\r\n When defined the count can show on the List Button.\r\n /\r\n @Prop()\r\n count?: number;\r\n\r\n /\r\n The minimum value.\r\n /\r\n @Prop()\r\n min?: string \| number;\r\n\r\n /\r\n The maximum value.\r\n /\r\n @Prop()\r\n max?: string \| number;\r\n\r\n /\r\n Whether the List Button is checked.\r\n /\r\n @Prop({ reflect: true })\r\n checked = false;\r\n\r\n /\r\n Whether the List Button is disabled.\r\n /\r\n @Prop({ reflect: true })\r\n disabled = false;\r\n\r\n /\r\n Allow user to directly input a value.\r\n \r\n Set to `false` to force users to use plus/minus buttons.\r\n /\r\n @Prop()\r\n manual = true;\r\n\r\n /\r\n Emitted when the user changes the count.\r\n /\r\n @Event()\r\n dsoCountChange!: EventEmitter<ListButtonChangeEvent>;\r\n\r\n /\r\n Emitted when the user activates the List Button itself.\r\n \r\n Does not fire when the user activates the count controls.\r\n */\r\n @Event()\r\n dsoSelectedChange!: EventEmitter<ListButtonSelectedEvent>;\r\n\r\n @Watch(\"manual\")\r\n watchManualCallback() {\r\n if (!this.manual && this.manualCount) {\r\n this.stopManualCountInput();\r\n }\r\n }\r\n\r\n componentDidRender(): void {\r\n if (this.manualCount !== undefined && this.manualInputWrapperElement && !this.trap) {\r\n this.trap = createFocusTrap(this.manualInputWrapperElement, {\r\n escapeDeactivates: true,\r\n setReturnFocus: false,\r\n\r\n clickOutsideDeactivates: (e) => {\r\n this.setCount(e);\r\n\r\n return true;\r\n },\r\n onDeactivate: () => this.stopManualCountInput(),\r\n onPostDeactivate: () => this.manualInputButtonElement?.focus(),\r\n }).activate();\r\n } else if (this.manualCount === undefined && this.trap) {\r\n this.trap?.deactivate();\r\n\r\n delete this.trap;\r\n }\r\n }\r\n\r\n disconnectedCallback(): void {\r\n this.trap?.deactivate();\r\n }\r\n\r\n private handleOnChange({ target }: Event): void {\r\n if (target instanceof HTMLInputElement) {\r\n this.manualCount = target.valueAsNumber;\r\n }\r\n }\r\n\r\n private stepValue(e: Event, direction: \"increment\" \| \"decrement\"): void {\r\n if (typeof this.count === \"number\") {\r\n const newValue = direction === \"increment\" ? this.count + 1 : this.count - 1;\r\n\r\n if (this.isNewCountValid(newValue) === false) {\r\n return;\r\n }\r\n\r\n this.dsoCountChange.emit({\r\n originalEvent: e,\r\n count: newValue,\r\n });\r\n }\r\n }\r\n\r\n private setCount(e: Event): void {\r\n e.preventDefault();\r\n\r\n if (typeof this.manualCount === \"number\" && this.isNewCountValid(this.manualCount)) {\r\n this.dsoCountChange.emit({\r\n originalEvent: e,\r\n count: this.manualCount,\r\n });\r\n this.stopManualCountInput();\r\n }\r\n }\r\n\r\n private handleSelectClick(e: Event): void {\r\n e.preventDefault();\r\n\r\n if (this.count !== undefined) {\r\n this.dsoCountChange.emit({\r\n originalEvent: e,\r\n count: this.count > 0 ? 0 : 1,\r\n });\r\n\r\n return;\r\n }\r\n\r\n this.dsoSelectedChange.emit({\r\n originalEvent: e,\r\n checked: !this.checked,\r\n });\r\n }\r\n\r\n private startManualCountInput(): void {\r\n this.manualCount = this.count;\r\n }\r\n\r\n private stopManualCountInput(): void {\r\n this.manualCount = undefined;\r\n }\r\n\r\n private isNewCountValid(newValue: number): boolean {\r\n if (\r\n this.min !== undefined &&\r\n this.max !== undefined &&\r\n (newValue < Number(this.min) \|\| newValue > Number(this.max))\r\n ) {\r\n return false;\r\n }\r\n\r\n return true;\r\n }\r\n\r\n render() {\r\n const showButtonInputs = this.manualCount === undefined;\r\n\r\n const selected = this.checked \|\| (this.count !== undefined && this.count > 0);\r\n\r\n return (\r\n <div class={clsx([\"dso-button-group\", { \"dso-disabled\": this.disabled }])}>\r\n <div\r\n class={clsx([\"dso-list-button\", { \"dso-selected\": selected, \"dso-single-count\": this.count === 1 }])}\r\n onClick={(e) => this.handleSelectClick(e)}\r\n >\r\n <div class=\"dso-selectable\">\r\n <input\r\n id=\"dso-list-button-checkbox\"\r\n type=\"checkbox\"\r\n value=\"list-button\"\r\n name=\"naam\"\r\n checked={selected}\r\n disabled={this.disabled}\r\n aria-label={this.label}\r\n />\r\n <label htmlFor=\"dso-list-button-checkbox\">{this.label}</label>\r\n </div>\r\n {this.sublabel && <span class=\"dso-sublabel\">{this.sublabel}</span>}\r\n <slot name=\"subcontent\" />\r\n </div>\r\n\r\n {this.count !== undefined && this.count > 0 && (\r\n <div class=\"dso-input-number\">\r\n {this.manualCount === undefined && this.count > 1 && (\r\n <button\r\n type=\"button\"\r\n class=\"dso-tertiary\"\r\n disabled={this.count === Number(this.min) \|\| this.disabled}\r\n onClick={(e) => this.stepValue(e, \"decrement\")}\r\n >\r\n <dso-icon icon=\"minus-circle\"></dso-icon>\r\n <span class=\"sr-only\">Aantal verlagen</span>\r\n </button>\r\n )}\r\n\r\n <div class=\"dso-input-wrapper\">\r\n {this.manualCount === undefined && this.count > 1 && (\r\n <input\r\n class=\"dso-input-step-counter\"\r\n type=\"number\"\r\n tabIndex={-1}\r\n aria-label=\"Aantal\"\r\n value={this.count}\r\n readOnly\r\n />\r\n )}\r\n\r\n <form onSubmit={(e) => this.setCount(e)}>\r\n <div ref={(element) => (this.manualInputWrapperElement = element)}>\r\n <input\r\n class={clsx(\"form-control\", { hidden: showButtonInputs })}\r\n type=\"number\"\r\n aria-label=\"Aantal\"\r\n value={this.manualCount}\r\n min={this.min}\r\n max={this.max}\r\n onInput={(e) => this.handleOnChange(e)}\r\n />\r\n </div>\r\n\r\n {this.manual === true && (\r\n <button\r\n class={clsx(\"dso-manual-input-button\", { \"sr-only\": !showButtonInputs })}\r\n type={!showButtonInputs ? \"submit\" : \"button\"}\r\n disabled={this.disabled}\r\n onClick={() => showButtonInputs && this.startManualCountInput()}\r\n >\r\n {showButtonInputs ? (\r\n <span class=\"sr-only\">Handmatig aantal invullen</span>\r\n ) : (\r\n <span class=\"sr-only\">Zet waarde</span>\r\n )}\r\n </button>\r\n )}\r\n </form>\r\n </div>\r\n\r\n {showButtonInputs && (\r\n <button\r\n type=\"button\"\r\n class=\"dso-tertiary\"\r\n disabled={this.count === Number(this.max) \|\| this.disabled}\r\n onClick={(e) => this.stepValue(e, \"increment\")}\r\n >\r\n <dso-icon icon=\"plus-circle\"></dso-icon>\r\n <span class=\"sr-only\">Aantal verhogen</span>\r\n </button>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n );\r\n }\r\n}\r\n"]}

package/dist/collection/components/map-controls/map-controls.css CHANGED Viewed

@@ -98,19 +98,19 @@ button::-moz-focus-inner {
   border-color: #afcf9d;
   color: #afcf9d;
 }
-.toggle-visibility-button.btn-sm {
+.toggle-visibility-button.dso-small {
   line-height: 1rem;
 }
-.toggle-visibility-button.btn-sm dso-icon,
-.toggle-visibility-button.btn-sm svg.di, .toggle-visibility-button.btn-sm.extern::after, .toggle-visibility-button.btn-sm.download::after, .toggle-visibility-button.btn-sm.dso-spinner::before {
+.toggle-visibility-button.dso-small dso-icon,
+.toggle-visibility-button.dso-small svg.di, .toggle-visibility-button.dso-small.extern::after, .toggle-visibility-button.dso-small.download::after, .toggle-visibility-button.dso-small.dso-spinner::before {
   margin-bottom: -4px;
   margin-top: -4px;
 }
-.toggle-visibility-button.btn-sm.dso-spinner-left::before {
+.toggle-visibility-button.dso-small.dso-spinner-left::before {
   height: 16px;
   width: 16px;
 }
-.toggle-visibility-button.btn-sm.dso-spinner-right::after {
+.toggle-visibility-button.dso-small.dso-spinner-right::after {
   height: 16px;
   width: 16px;
 }
@@ -149,7 +149,7 @@ button::-moz-focus-inner {
   width: 24px;
   margin-right: 8px;
 }
-.toggle-visibility-button.dso-spinner-left:not([disabled]).btn-sm:hover::before {
+.toggle-visibility-button.dso-spinner-left:not([disabled]).dso-small:hover::before {
   height: 16px;
   width: 16px;
 }
@@ -173,7 +173,7 @@ button::-moz-focus-inner {
   width: 24px;
   margin-left: 8px;
 }
-.toggle-visibility-button.dso-spinner-right:not([disabled]).btn-sm:hover::after {
+.toggle-visibility-button.dso-spinner-right:not([disabled]).dso-small:hover::after {
   height: 16px;
   width: 16px;
 }
@@ -244,19 +244,19 @@ button::-moz-focus-inner {
   border-color: #afcf9d;
   color: #afcf9d;
 }
-.zoom-buttons button.btn-sm {
+.zoom-buttons button.dso-small {
   line-height: 1rem;
 }
-.zoom-buttons button.btn-sm dso-icon,
-.zoom-buttons button.btn-sm svg.di, .zoom-buttons button.btn-sm.extern::after, .zoom-buttons button.btn-sm.download::after, .zoom-buttons button.btn-sm.dso-spinner::before {
+.zoom-buttons button.dso-small dso-icon,
+.zoom-buttons button.dso-small svg.di, .zoom-buttons button.dso-small.extern::after, .zoom-buttons button.dso-small.download::after, .zoom-buttons button.dso-small.dso-spinner::before {
   margin-bottom: -4px;
   margin-top: -4px;
 }
-.zoom-buttons button.btn-sm.dso-spinner-left::before {
+.zoom-buttons button.dso-small.dso-spinner-left::before {
   height: 16px;
   width: 16px;
 }
-.zoom-buttons button.btn-sm.dso-spinner-right::after {
+.zoom-buttons button.dso-small.dso-spinner-right::after {
   height: 16px;
   width: 16px;
 }
@@ -295,7 +295,7 @@ button::-moz-focus-inner {
   width: 24px;
   margin-right: 8px;
 }
-.zoom-buttons button.dso-spinner-left:not([disabled]).btn-sm:hover::before {
+.zoom-buttons button.dso-spinner-left:not([disabled]).dso-small:hover::before {
   height: 16px;
   width: 16px;
 }
@@ -319,7 +319,7 @@ button::-moz-focus-inner {
   width: 24px;
   margin-left: 8px;
 }
-.zoom-buttons button.dso-spinner-right:not([disabled]).btn-sm:hover::after {
+.zoom-buttons button.dso-spinner-right:not([disabled]).dso-small:hover::after {
   height: 16px;
   width: 16px;
 }
@@ -376,11 +376,17 @@ button::-moz-focus-inner {
 .close-button:not([disabled]):active {
   color: #173521;
 }
-.close-button.btn-align {
+.close-button.dso-align {
   line-height: calc(1.5em - 1px);
   padding: 11px 0;
   position: relative;
 }
+.close-button.dso-truncate {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .close-button.dso-spinner-left::before {
   background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
   background-repeat: no-repeat;

package/dist/collection/components/modal/modal.css CHANGED Viewed

@@ -154,7 +154,7 @@ button::-moz-focus-inner {
   text-align: right;
 }
 @media screen and (max-width: 767px) {
-  .dso-modal .dso-footer .btn + .btn, .dso-modal .dso-footer .btn + .dso-primary, .dso-modal .dso-footer .btn + .dso-secondary, .dso-modal .dso-footer .btn + .dso-tertiary, .dso-modal .dso-footer .dso-primary + .btn, .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 + .btn, .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 + .btn, .dso-modal .dso-footer .dso-tertiary + .dso-primary, .dso-modal .dso-footer .dso-tertiary + .dso-secondary, .dso-modal .dso-footer .dso-tertiary + .dso-tertiary {
+  .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-left: 0;
   }
   .dso-modal .dso-footer button {
@@ -165,16 +165,15 @@ button::-moz-focus-inner {
     margin-top: 8px;
   }
   .dso-modal .dso-footer button.dso-tertiary,
-  .dso-modal .dso-footer button.dso-tertiary span, .dso-modal .dso-footer button.btn-link,
-  .dso-modal .dso-footer button.btn-link span {
+  .dso-modal .dso-footer button.dso-tertiary span {
     float: none;
   }
 }
 @media screen and (min-width: 768px) {
-  .dso-modal .dso-footer .btn + .dso-secondary, .dso-modal .dso-footer .btn + .btn-default, .dso-modal .dso-footer .dso-primary + .dso-secondary, .dso-modal .dso-footer .dso-primary + .btn-default, .dso-modal .dso-footer .dso-secondary + .dso-secondary, .dso-modal .dso-footer .dso-secondary + .btn-default, .dso-modal .dso-footer .dso-tertiary + .dso-secondary, .dso-modal .dso-footer .dso-tertiary + .btn-default {
+  .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-left: 16px;
   }
-  .dso-modal .dso-footer .btn + .dso-tertiary, .dso-modal .dso-footer .btn + .btn-link, .dso-modal .dso-footer .dso-primary + .dso-tertiary, .dso-modal .dso-footer .dso-primary + .btn-link, .dso-modal .dso-footer .dso-secondary + .dso-tertiary, .dso-modal .dso-footer .dso-secondary + .btn-link, .dso-modal .dso-footer .dso-tertiary + .dso-tertiary, .dso-modal .dso-footer .dso-tertiary + .btn-link {
+  .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-left: 0;
   }
 }
@@ -183,7 +182,7 @@ button::-moz-focus-inner {
     max-width: 100%;
     margin-top: 0;
   }
-  .dso-modal .dso-footer .btn + .btn, .dso-modal .dso-footer .btn + .dso-primary, .dso-modal .dso-footer .btn + .dso-secondary, .dso-modal .dso-footer .btn + .dso-tertiary, .dso-modal .dso-footer .dso-primary + .btn, .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 + .btn, .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 + .btn, .dso-modal .dso-footer .dso-tertiary + .dso-primary, .dso-modal .dso-footer .dso-tertiary + .dso-secondary, .dso-modal .dso-footer .dso-tertiary + .dso-tertiary {
+  .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-left: 0;
   }
   .dso-modal .dso-footer button {
@@ -194,8 +193,7 @@ button::-moz-focus-inner {
     margin-top: 8px;
   }
   .dso-modal .dso-footer button.dso-tertiary,
-  .dso-modal .dso-footer button.dso-tertiary span, .dso-modal .dso-footer button.btn-link,
-  .dso-modal .dso-footer button.btn-link span {
+  .dso-modal .dso-footer button.dso-tertiary span {
     float: none;
   }
 }

package/dist/collection/components/ozon-content/ozon-content.css CHANGED Viewed

@@ -92,11 +92,17 @@ button.toggle-note:not([disabled]):hover {
 button.toggle-note:not([disabled]):active {
   color: #173521;
 }
-button.toggle-note.btn-align {
+button.toggle-note.dso-align {
   line-height: calc(1.5em - 1px);
   padding: 11px 0;
   position: relative;
 }
+button.toggle-note.dso-truncate {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 button.toggle-note.dso-spinner-left::before {
   background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
   background-repeat: no-repeat;