@gomusdev/web-components 1.28.0 → 1.29.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.
@@ -933,7 +933,7 @@
933
933
  }
934
934
  /*END CALENDARUI CSS*/
935
935
 
936
- ul[data-go-timeslots] {
936
+ go-timeslots > ul {
937
937
  max-width: 650px;
938
938
  list-style: none;
939
939
  padding: 0;
@@ -942,12 +942,12 @@ ul[data-go-timeslots] {
942
942
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
943
943
  }
944
944
 
945
- ul[data-go-timeslots] li {
945
+ go-timeslots > ul li {
946
946
  margin: 5px;
947
947
  display: flex;
948
948
  }
949
949
 
950
- ul[data-go-timeslots] label {
950
+ go-timeslots > ul label {
951
951
  display: inline-block;
952
952
  padding: 10px 20px;
953
953
  border: 1px solid #ddd;
@@ -962,18 +962,18 @@ ul[data-go-timeslots] label {
962
962
 
963
963
  /* Available timeslot */
964
964
 
965
- ul[data-go-timeslots] .available {
965
+ go-timeslots > ul .available {
966
966
  background-color: #fff;
967
967
  color: #333;
968
968
  }
969
969
 
970
- ul[data-go-timeslots] input[type='radio'] {
970
+ go-timeslots > ul input[type='radio'] {
971
971
  display: none; /* Hide the radio button */
972
972
  }
973
973
 
974
974
  /* When a timeslot is selected (checked radio button) */
975
975
 
976
- ul[data-go-timeslots] label:has(input[type='radio']:checked) {
976
+ go-timeslots > ul label:has(input[type='radio']:checked) {
977
977
  background-color: #12826a;
978
978
  background-color: var(--primary); /* blue-green color */
979
979
  border-color: #12826a;
@@ -985,29 +985,29 @@ ul[data-go-timeslots] label:has(input[type='radio']:checked) {
985
985
 
986
986
  /* Finished (unavailable) timeslot */
987
987
 
988
- ul[data-go-timeslots] .finished {
988
+ go-timeslots > ul .finished {
989
989
  background-color: #f0f0f0;
990
990
  color: #999;
991
991
  }
992
992
 
993
- ul[data-go-timeslots] .finished input {
993
+ go-timeslots > ul .finished input {
994
994
  display: none;
995
995
  }
996
996
 
997
- ul[data-go-timeslots] .finished {
997
+ go-timeslots > ul .finished {
998
998
  pointer-events: none;
999
999
  }
1000
1000
 
1001
1001
  /* Disabled radio button appearance */
1002
1002
 
1003
- ul[data-go-timeslots] input:disabled + label {
1003
+ go-timeslots > ul input:disabled + label {
1004
1004
  background-color: #e0e0e0;
1005
1005
  color: #bbb;
1006
1006
  cursor: not-allowed;
1007
1007
  border-color: #ddd;
1008
1008
  }
1009
1009
 
1010
- ul[data-go-timeslots] label:hover {
1010
+ go-timeslots > ul label:hover {
1011
1011
  /*background-color: #f0f0f0;*/
1012
1012
  border-color: #12826a;
1013
1013
  border-color: var(--primary);
@@ -1017,7 +1017,7 @@ ul[data-go-timeslots] label:hover {
1017
1017
 
1018
1018
  /* Focus state for better accessibility */
1019
1019
 
1020
- ul[data-go-timeslots] input:focus + label {
1020
+ go-timeslots > ul input:focus + label {
1021
1021
  outline: 2px solid #0052cc;
1022
1022
  }
1023
1023
 
@@ -31208,18 +31208,8 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
31208
31208
  return ret;
31209
31209
  }
31210
31210
  };
31211
- function dataAttr(name, condition, value = "") {
31212
- return function(element) {
31213
- const n = "data-go-" + name;
31214
- if (condition) {
31215
- element.setAttribute(n, value);
31216
- } else {
31217
- element.removeAttribute(n);
31218
- }
31219
- };
31220
- }
31221
31211
  var root_2$1 = /* @__PURE__ */ from_html(`<li><label> <input type="radio" name="timeslot"/></label></li>`);
31222
- var root_1$1 = /* @__PURE__ */ from_html(`<ul data-testid="timeslots" data-go-timeslots=""></ul>`);
31212
+ var root_1$1 = /* @__PURE__ */ from_html(`<ul data-testid="timeslots"></ul>`);
31223
31213
  function Timeslots($$anchor, $$props) {
31224
31214
  push($$props, true);
31225
31215
  const binding_group = [];
@@ -31249,10 +31239,12 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
31249
31239
  var input_value;
31250
31240
  reset(label);
31251
31241
  reset(li);
31252
- attach(li, () => dataAttr("selected", get$2(selected)));
31253
31242
  template_effect(() => {
31254
- set_class(li, 1, clsx(timeslot.capacity == 0 ? "sold-out" : ""));
31255
- set_class(label, 1, clsx(timeslot.available ? "" : "disabled"));
31243
+ set_class(li, 1, clsx([
31244
+ timeslot.capacity === 0 && "is-sold-out",
31245
+ !timeslot.available && "is-disabled",
31246
+ get$2(selected) && "is-selected"
31247
+ ]));
31256
31248
  set_text(text2, `${timeslot.timeFormatted ?? ""} `);
31257
31249
  input.disabled = timeslot.capacity == 0;
31258
31250
  set_attribute(input, "aria-disabled", timeslot.capacity == 0);
@@ -31540,18 +31532,28 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
31540
31532
  children: ($$anchor13, $$slotProps4) => {
31541
31533
  var fragment_11 = comment();
31542
31534
  var node_16 = first_child(fragment_11);
31543
- component(node_16, () => Calendar_day, ($$anchor14, Calendar_Day) => {
31544
- Calendar_Day($$anchor14, {
31545
- class: "go-calendar-day",
31546
- children: ($$anchor15, $$slotProps5) => {
31547
- next();
31548
- var text_3 = text();
31549
- template_effect(() => set_text(text_3, get$2(date2).day));
31550
- append($$anchor15, text_3);
31551
- },
31552
- $$slots: { default: true }
31535
+ {
31536
+ let $0 = /* @__PURE__ */ user_derived(() => [
31537
+ "go-calendar-day",
31538
+ calendarClass().isDateUnavailable(get$2(date2)) && "is-unavailable",
31539
+ calendarClass().isDateDisabled(get$2(date2)) && "is-disabled",
31540
+ calendarClass().selected === get$2(date2) && "is-selected"
31541
+ ]);
31542
+ component(node_16, () => Calendar_day, ($$anchor14, Calendar_Day) => {
31543
+ Calendar_Day($$anchor14, {
31544
+ get class() {
31545
+ return get$2($0);
31546
+ },
31547
+ children: ($$anchor15, $$slotProps5) => {
31548
+ next();
31549
+ var text_3 = text();
31550
+ template_effect(() => set_text(text_3, get$2(date2).day));
31551
+ append($$anchor15, text_3);
31552
+ },
31553
+ $$slots: { default: true }
31554
+ });
31553
31555
  });
31554
- });
31556
+ }
31555
31557
  append($$anchor13, fragment_11);
31556
31558
  },
31557
31559
  $$slots: { default: true }
@@ -31692,7 +31694,7 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
31692
31694
  return ret;
31693
31695
  }
31694
31696
  }
31695
- var root = /* @__PURE__ */ from_html(`<button data-add-to-cart-button="" data-testid="go-add-to-cart-button__button">Add to cart</button>`);
31697
+ var root = /* @__PURE__ */ from_html(`<button data-add-to-cart-button="" data-testid="go-add-to-cart-button__button"> </button>`);
31696
31698
  function AddToCartButton($$anchor, $$props) {
31697
31699
  push($$props, true);
31698
31700
  const _tsd = getTicketSelectionDetails($$props.$$host);
@@ -31700,14 +31702,18 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
31700
31702
  var $$exports = { details };
31701
31703
  var button = root();
31702
31704
  button.__click = () => details.addToCart();
31705
+ var text2 = child(button, true);
31706
+ reset(button);
31703
31707
  template_effect(
31704
- ($0, $1) => {
31708
+ ($0, $1, $2) => {
31705
31709
  button.disabled = $0;
31706
31710
  set_attribute(button, "data-x", $1);
31711
+ set_text(text2, $2);
31707
31712
  },
31708
31713
  [
31709
31714
  () => !details.anyTicketsSelected(),
31710
- () => !details.anyTicketsSelected()
31715
+ () => !details.anyTicketsSelected(),
31716
+ () => shop.t("common.actions.cart")
31711
31717
  ]
31712
31718
  );
31713
31719
  append($$anchor, button);
@@ -31208,18 +31208,8 @@ let Details$1 = class Details {
31208
31208
  return ret;
31209
31209
  }
31210
31210
  };
31211
- function dataAttr(name, condition, value = "") {
31212
- return function(element) {
31213
- const n = "data-go-" + name;
31214
- if (condition) {
31215
- element.setAttribute(n, value);
31216
- } else {
31217
- element.removeAttribute(n);
31218
- }
31219
- };
31220
- }
31221
31211
  var root_2$1 = /* @__PURE__ */ from_html(`<li><label> <input type="radio" name="timeslot"/></label></li>`);
31222
- var root_1$1 = /* @__PURE__ */ from_html(`<ul data-testid="timeslots" data-go-timeslots=""></ul>`);
31212
+ var root_1$1 = /* @__PURE__ */ from_html(`<ul data-testid="timeslots"></ul>`);
31223
31213
  function Timeslots($$anchor, $$props) {
31224
31214
  push($$props, true);
31225
31215
  const binding_group = [];
@@ -31249,10 +31239,12 @@ function Timeslots($$anchor, $$props) {
31249
31239
  var input_value;
31250
31240
  reset(label);
31251
31241
  reset(li);
31252
- attach(li, () => dataAttr("selected", get$2(selected)));
31253
31242
  template_effect(() => {
31254
- set_class(li, 1, clsx(timeslot.capacity == 0 ? "sold-out" : ""));
31255
- set_class(label, 1, clsx(timeslot.available ? "" : "disabled"));
31243
+ set_class(li, 1, clsx([
31244
+ timeslot.capacity === 0 && "is-sold-out",
31245
+ !timeslot.available && "is-disabled",
31246
+ get$2(selected) && "is-selected"
31247
+ ]));
31256
31248
  set_text(text2, `${timeslot.timeFormatted ?? ""} `);
31257
31249
  input.disabled = timeslot.capacity == 0;
31258
31250
  set_attribute(input, "aria-disabled", timeslot.capacity == 0);
@@ -31540,18 +31532,28 @@ function CalendarUI($$anchor, $$props) {
31540
31532
  children: ($$anchor13, $$slotProps4) => {
31541
31533
  var fragment_11 = comment();
31542
31534
  var node_16 = first_child(fragment_11);
31543
- component(node_16, () => Calendar_day, ($$anchor14, Calendar_Day) => {
31544
- Calendar_Day($$anchor14, {
31545
- class: "go-calendar-day",
31546
- children: ($$anchor15, $$slotProps5) => {
31547
- next();
31548
- var text_3 = text();
31549
- template_effect(() => set_text(text_3, get$2(date2).day));
31550
- append($$anchor15, text_3);
31551
- },
31552
- $$slots: { default: true }
31535
+ {
31536
+ let $0 = /* @__PURE__ */ user_derived(() => [
31537
+ "go-calendar-day",
31538
+ calendarClass().isDateUnavailable(get$2(date2)) && "is-unavailable",
31539
+ calendarClass().isDateDisabled(get$2(date2)) && "is-disabled",
31540
+ calendarClass().selected === get$2(date2) && "is-selected"
31541
+ ]);
31542
+ component(node_16, () => Calendar_day, ($$anchor14, Calendar_Day) => {
31543
+ Calendar_Day($$anchor14, {
31544
+ get class() {
31545
+ return get$2($0);
31546
+ },
31547
+ children: ($$anchor15, $$slotProps5) => {
31548
+ next();
31549
+ var text_3 = text();
31550
+ template_effect(() => set_text(text_3, get$2(date2).day));
31551
+ append($$anchor15, text_3);
31552
+ },
31553
+ $$slots: { default: true }
31554
+ });
31553
31555
  });
31554
- });
31556
+ }
31555
31557
  append($$anchor13, fragment_11);
31556
31558
  },
31557
31559
  $$slots: { default: true }
@@ -31692,7 +31694,7 @@ class Details2 {
31692
31694
  return ret;
31693
31695
  }
31694
31696
  }
31695
- var root = /* @__PURE__ */ from_html(`<button data-add-to-cart-button="" data-testid="go-add-to-cart-button__button">Add to cart</button>`);
31697
+ var root = /* @__PURE__ */ from_html(`<button data-add-to-cart-button="" data-testid="go-add-to-cart-button__button"> </button>`);
31696
31698
  function AddToCartButton($$anchor, $$props) {
31697
31699
  push($$props, true);
31698
31700
  const _tsd = getTicketSelectionDetails($$props.$$host);
@@ -31700,14 +31702,18 @@ function AddToCartButton($$anchor, $$props) {
31700
31702
  var $$exports = { details };
31701
31703
  var button = root();
31702
31704
  button.__click = () => details.addToCart();
31705
+ var text2 = child(button, true);
31706
+ reset(button);
31703
31707
  template_effect(
31704
- ($0, $1) => {
31708
+ ($0, $1, $2) => {
31705
31709
  button.disabled = $0;
31706
31710
  set_attribute(button, "data-x", $1);
31711
+ set_text(text2, $2);
31707
31712
  },
31708
31713
  [
31709
31714
  () => !details.anyTicketsSelected(),
31710
- () => !details.anyTicketsSelected()
31715
+ () => !details.anyTicketsSelected(),
31716
+ () => shop.t("common.actions.cart")
31711
31717
  ]
31712
31718
  );
31713
31719
  append($$anchor, button);
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "name": "Giantmonkey GmbH"
5
5
  },
6
6
  "license": "MIT",
7
- "version": "1.28.0",
7
+ "version": "1.29.0",
8
8
  "type": "module",
9
9
  "main": "./dist-js/gomus-webcomponents.iife.js",
10
10
  "module": "./dist-js/gomus-webcomponents.iife.js",