@salla.sa/twilight-components 2.11.27 → 2.11.28

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.
@@ -23277,7 +23277,7 @@ const SallaProductSizeGuide = class {
23277
23277
  };
23278
23278
  SallaProductSizeGuide.style = sallaProductSizeGuideCss;
23279
23279
 
23280
- const sallaProgressBarCss = ".s-progress-bar-header{font-size:0.875rem;line-height:1.25rem;color:#6b7280;font-weight:bold}.s-progress-bar-target-section{display:-ms-flexbox;display:flex;margin-bottom:0.625rem;font-size:0.875rem;line-height:1.25rem;-ms-flex-pack:justify;justify-content:space-between}.s-progress-bar-container{margin-bottom:0.625rem}.s-progress-bar-wrapper{background-color:#E5E7EB;width:100%;height:0.625rem;border-radius:9999px;margin-bottom:0.375rem}.s-progress-bar-progress{height:0.625rem;border-radius:9999px}.s-progress-bar-message{color:#a2a8b4;font-size:0.75rem;line-height:1rem;display:block;margin-bottom:0.625rem}";
23280
+ const sallaProgressBarCss = ".s-progress-bar-wrapper{background-color:#E5E7EB;width:100%;height:0.625rem;border-radius:9999px;margin-bottom:0.375rem}.s-progress-bar-progress{height:0.625rem;border-radius:9999px}.s-progress-bar-message{color:#a2a8b4;font-size:0.75rem;line-height:1rem;display:block;margin-bottom:0.625rem}";
23281
23281
 
23282
23282
  const SallaProgressBar = class {
23283
23283
  constructor(hostRef) {
@@ -24181,6 +24181,7 @@ const sallaSliderCss = "@font-face{font-family:\"swiper-icons\";src:url(\"data:a
24181
24181
  const SallaSwiper = class {
24182
24182
  constructor(hostRef) {
24183
24183
  index.registerInstance(this, hostRef);
24184
+ this.afterInit = index.createEvent(this, "afterInit", 7);
24184
24185
  this.slideChange = index.createEvent(this, "slideChange", 7);
24185
24186
  this.reachBeginning = index.createEvent(this, "reachBeginning", 7);
24186
24187
  this.reachEnd = index.createEvent(this, "reachEnd", 7);
@@ -24507,6 +24508,7 @@ const SallaSwiper = class {
24507
24508
  // then it re appended it as is,in this case the image is loaded but class not added.
24508
24509
  afterInit: (slider) => {
24509
24510
  var _a;
24511
+ this.afterInit.emit(slider);
24510
24512
  (_a = document.lazyLoadInstance) === null || _a === void 0 ? void 0 : _a.update();
24511
24513
  this.loop && slider.slides.map(slide => {
24512
24514
  if (!slide.classList.contains('swiper-slide-duplicate')) {
@@ -24568,7 +24570,6 @@ const SallaSwiper = class {
24568
24570
  }
24569
24571
  initSlider() {
24570
24572
  for (const slide of this.sliderWrapper.children) {
24571
- //todo:: use `s-slider-slide`
24572
24573
  slide.classList.add('swiper-slide');
24573
24574
  }
24574
24575
  // @ts-ignore
@@ -1,19 +1,3 @@
1
- .s-progress-bar-header {
2
- font-size: 0.875rem;
3
- line-height: 1.25rem;
4
- color: #6b7280;
5
- font-weight: bold;
6
- }
7
- .s-progress-bar-target-section {
8
- display: flex;
9
- margin-bottom: 0.625rem;
10
- font-size: 0.875rem;
11
- line-height: 1.25rem;
12
- justify-content: space-between;
13
- }
14
- .s-progress-bar-container {
15
- margin-bottom: 0.625rem;
16
- }
17
1
  .s-progress-bar-wrapper {
18
2
  background-color: #E5E7EB;
19
3
  width: 100%;
@@ -321,6 +321,7 @@ export class SallaSwiper {
321
321
  // then it re appended it as is,in this case the image is loaded but class not added.
322
322
  afterInit: (slider) => {
323
323
  var _a;
324
+ this.afterInit.emit(slider);
324
325
  (_a = document.lazyLoadInstance) === null || _a === void 0 ? void 0 : _a.update();
325
326
  this.loop && slider.slides.map(slide => {
326
327
  if (!slide.classList.contains('swiper-slide-duplicate')) {
@@ -382,7 +383,6 @@ export class SallaSwiper {
382
383
  }
383
384
  initSlider() {
384
385
  for (const slide of this.sliderWrapper.children) {
385
- //todo:: use `s-slider-slide`
386
386
  slide.classList.add('swiper-slide');
387
387
  }
388
388
  // @ts-ignore
@@ -822,6 +822,21 @@ export class SallaSwiper {
822
822
  "displayAllTitle": {}
823
823
  }; }
824
824
  static get events() { return [{
825
+ "method": "afterInit",
826
+ "name": "afterInit",
827
+ "bubbles": true,
828
+ "cancelable": true,
829
+ "composed": true,
830
+ "docs": {
831
+ "tags": [],
832
+ "text": "Event will fired right after initialization."
833
+ },
834
+ "complexType": {
835
+ "original": "any",
836
+ "resolved": "any",
837
+ "references": {}
838
+ }
839
+ }, {
825
840
  "method": "slideChange",
826
841
  "name": "slideChange",
827
842
  "bubbles": true,
@@ -3,7 +3,7 @@
3
3
  */
4
4
  import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
5
5
 
6
- const sallaProgressBarCss = ".s-progress-bar-header{font-size:0.875rem;line-height:1.25rem;color:#6b7280;font-weight:bold}.s-progress-bar-target-section{display:-ms-flexbox;display:flex;margin-bottom:0.625rem;font-size:0.875rem;line-height:1.25rem;-ms-flex-pack:justify;justify-content:space-between}.s-progress-bar-container{margin-bottom:0.625rem}.s-progress-bar-wrapper{background-color:#E5E7EB;width:100%;height:0.625rem;border-radius:9999px;margin-bottom:0.375rem}.s-progress-bar-progress{height:0.625rem;border-radius:9999px}.s-progress-bar-message{color:#a2a8b4;font-size:0.75rem;line-height:1rem;display:block;margin-bottom:0.625rem}";
6
+ const sallaProgressBarCss = ".s-progress-bar-wrapper{background-color:#E5E7EB;width:100%;height:0.625rem;border-radius:9999px;margin-bottom:0.375rem}.s-progress-bar-progress{height:0.625rem;border-radius:9999px}.s-progress-bar-message{color:#a2a8b4;font-size:0.75rem;line-height:1rem;display:block;margin-bottom:0.625rem}";
7
7
 
8
8
  const SallaProgressBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
9
9
  constructor() {
@@ -17,6 +17,7 @@ const SallaSwiper = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
17
17
  constructor() {
18
18
  super();
19
19
  this.__registerHost();
20
+ this.afterInit = createEvent(this, "afterInit", 7);
20
21
  this.slideChange = createEvent(this, "slideChange", 7);
21
22
  this.reachBeginning = createEvent(this, "reachBeginning", 7);
22
23
  this.reachEnd = createEvent(this, "reachEnd", 7);
@@ -343,6 +344,7 @@ const SallaSwiper = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
343
344
  // then it re appended it as is,in this case the image is loaded but class not added.
344
345
  afterInit: (slider) => {
345
346
  var _a;
347
+ this.afterInit.emit(slider);
346
348
  (_a = document.lazyLoadInstance) === null || _a === void 0 ? void 0 : _a.update();
347
349
  this.loop && slider.slides.map(slide => {
348
350
  if (!slide.classList.contains('swiper-slide-duplicate')) {
@@ -404,7 +406,6 @@ const SallaSwiper = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
404
406
  }
405
407
  initSlider() {
406
408
  for (const slide of this.sliderWrapper.children) {
407
- //todo:: use `s-slider-slide`
408
409
  slide.classList.add('swiper-slide');
409
410
  }
410
411
  // @ts-ignore
@@ -23273,7 +23273,7 @@ const SallaProductSizeGuide = class {
23273
23273
  };
23274
23274
  SallaProductSizeGuide.style = sallaProductSizeGuideCss;
23275
23275
 
23276
- const sallaProgressBarCss = ".s-progress-bar-header{font-size:0.875rem;line-height:1.25rem;color:#6b7280;font-weight:bold}.s-progress-bar-target-section{display:-ms-flexbox;display:flex;margin-bottom:0.625rem;font-size:0.875rem;line-height:1.25rem;-ms-flex-pack:justify;justify-content:space-between}.s-progress-bar-container{margin-bottom:0.625rem}.s-progress-bar-wrapper{background-color:#E5E7EB;width:100%;height:0.625rem;border-radius:9999px;margin-bottom:0.375rem}.s-progress-bar-progress{height:0.625rem;border-radius:9999px}.s-progress-bar-message{color:#a2a8b4;font-size:0.75rem;line-height:1rem;display:block;margin-bottom:0.625rem}";
23276
+ const sallaProgressBarCss = ".s-progress-bar-wrapper{background-color:#E5E7EB;width:100%;height:0.625rem;border-radius:9999px;margin-bottom:0.375rem}.s-progress-bar-progress{height:0.625rem;border-radius:9999px}.s-progress-bar-message{color:#a2a8b4;font-size:0.75rem;line-height:1rem;display:block;margin-bottom:0.625rem}";
23277
23277
 
23278
23278
  const SallaProgressBar = class {
23279
23279
  constructor(hostRef) {
@@ -24177,6 +24177,7 @@ const sallaSliderCss = "@font-face{font-family:\"swiper-icons\";src:url(\"data:a
24177
24177
  const SallaSwiper = class {
24178
24178
  constructor(hostRef) {
24179
24179
  registerInstance(this, hostRef);
24180
+ this.afterInit = createEvent(this, "afterInit", 7);
24180
24181
  this.slideChange = createEvent(this, "slideChange", 7);
24181
24182
  this.reachBeginning = createEvent(this, "reachBeginning", 7);
24182
24183
  this.reachEnd = createEvent(this, "reachEnd", 7);
@@ -24503,6 +24504,7 @@ const SallaSwiper = class {
24503
24504
  // then it re appended it as is,in this case the image is loaded but class not added.
24504
24505
  afterInit: (slider) => {
24505
24506
  var _a;
24507
+ this.afterInit.emit(slider);
24506
24508
  (_a = document.lazyLoadInstance) === null || _a === void 0 ? void 0 : _a.update();
24507
24509
  this.loop && slider.slides.map(slide => {
24508
24510
  if (!slide.classList.contains('swiper-slide-duplicate')) {
@@ -24564,7 +24566,6 @@ const SallaSwiper = class {
24564
24566
  }
24565
24567
  initSlider() {
24566
24568
  for (const slide of this.sliderWrapper.children) {
24567
- //todo:: use `s-slider-slide`
24568
24569
  slide.classList.add('swiper-slide');
24569
24570
  }
24570
24571
  // @ts-ignore