@awell-health/ui-library 0.1.56 → 0.1.58
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.
package/dist/index.css
CHANGED
|
@@ -4232,42 +4232,387 @@ html {
|
|
|
4232
4232
|
line-height: var(--awell-leading-7);
|
|
4233
4233
|
}
|
|
4234
4234
|
}
|
|
4235
|
-
.
|
|
4236
|
-
|
|
4237
|
-
--
|
|
4235
|
+
@import 'https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap';
|
|
4236
|
+
:root {
|
|
4237
|
+
--awell-accent100: #fdb833;
|
|
4238
|
+
--awell-accent40: #fee2ad;
|
|
4239
|
+
--awell-accent60: #fdd484;
|
|
4240
|
+
--awell-blue: #2E87FC;
|
|
4241
|
+
--awell-blue50: #DEEBFF;
|
|
4242
|
+
--awell-blue300: #0065FF;
|
|
4243
|
+
--awell-blue400: #0052CC;
|
|
4244
|
+
--awell-blue500: #0747A6;
|
|
4245
|
+
--awell-blueBorder: #126DEF;
|
|
4246
|
+
--awell-brand10: #e6edf9;
|
|
4247
|
+
--awell-brand40: #99b6e6;
|
|
4248
|
+
--awell-brand50: #739FE7;
|
|
4249
|
+
--awell-brand60: #4E7AC2;
|
|
4250
|
+
--awell-brand75: #B3D4FF;
|
|
4251
|
+
--awell-brand80: #3476E0;
|
|
4252
|
+
--awell-brand100: #004ac2;
|
|
4253
|
+
--awell-brand200: #2684FF;
|
|
4254
|
+
--awell-brand300: #0065FF;
|
|
4255
|
+
--awell-green: #67D172;
|
|
4256
|
+
--awell-green25: #EBFDF7;
|
|
4257
|
+
--awell-green50: #E3FCEF;
|
|
4258
|
+
--awell-green100: #27AB83;
|
|
4259
|
+
--awell-green500: #064;
|
|
4260
|
+
--awell-greenBorder: #5DB566;
|
|
4261
|
+
--awell-neutralDark500: #42526E;
|
|
4262
|
+
--awell-neutralDark600: #344563;
|
|
4263
|
+
--awell-neutralDark700: #253858;
|
|
4264
|
+
--awell-neutralDark800: #172B4D;
|
|
4265
|
+
--awell-neutralDark900: #091E42;
|
|
4266
|
+
--awell-neutralLight0: #fff;
|
|
4267
|
+
--awell-neutralLight10: #fafbfc;
|
|
4268
|
+
--awell-neutralLight100: #7A869A;
|
|
4269
|
+
--awell-neutralLight20: #f4f5f7;
|
|
4270
|
+
--awell-neutralLight30: #ebecf0;
|
|
4271
|
+
--awell-neutralLight40: #dfe1e6;
|
|
4272
|
+
--awell-neutralLight50: #c1c7d0;
|
|
4273
|
+
--awell-neutralMid100: #7a869a;
|
|
4274
|
+
--awell-neutralMid200: #6b778c;
|
|
4275
|
+
--awell-neutralMid300: #5e6c84;
|
|
4276
|
+
--awell-neutralMid400: #505F79;
|
|
4277
|
+
--awell-neutralMid60: #b3bac5;
|
|
4278
|
+
--awell-neutralMid70: #a5adba;
|
|
4279
|
+
--awell-neutralMid80: #97a0af;
|
|
4280
|
+
--awell-neutralMid90: #8993a4;
|
|
4281
|
+
--awell-orange: #FEC32D;
|
|
4282
|
+
--awell-orangeBorder: #CB9C22;
|
|
4283
|
+
--awell-purple: #6558BE;
|
|
4284
|
+
--awell-purpleBorder: #4F4498;
|
|
4285
|
+
--awell-red: #FF3A54;
|
|
4286
|
+
--awell-red100: #E12D39;
|
|
4287
|
+
--awell-red400: #DE350B;
|
|
4288
|
+
--awell-red50: #FFEBE6;
|
|
4289
|
+
--awell-red500: #BF2600;
|
|
4290
|
+
--awell-redBorder: #D12D43;
|
|
4291
|
+
--awell-secondaryAqua100: #01c5e3;
|
|
4292
|
+
--awell-secondaryBrown100: #df692f;
|
|
4293
|
+
--awell-secondaryLightblue100: #2590fb;
|
|
4294
|
+
--awell-secondaryLimegreen100: #86e34b;
|
|
4295
|
+
--awell-secondaryMagenta100: #e255ff;
|
|
4296
|
+
--awell-secondaryOrange100: #ff6000;
|
|
4297
|
+
--awell-secondaryPink100: #ff37be;
|
|
4298
|
+
--awell-secondaryPink40: #ffafe5;
|
|
4299
|
+
--awell-secondaryYellow100: #f7d32b;
|
|
4300
|
+
--awell-secondaryYellow20: #fdf6d5;
|
|
4301
|
+
--awell-secondaryYellow40: #f4edcb;
|
|
4302
|
+
--awell-signalError100: #e12d39;
|
|
4303
|
+
--awell-signalError60: #ed8188;
|
|
4304
|
+
--awell-signalError20: #F9D5D7;
|
|
4305
|
+
--awell-signalInformative100: #001d4d;
|
|
4306
|
+
--awell-signalInformative60: #667794;
|
|
4307
|
+
--awell-signalSuccess100: #27ab83;
|
|
4308
|
+
--awell-signalSuccess60: #7dccb4;
|
|
4309
|
+
--awell-signalWarning100: #fdd333;
|
|
4310
|
+
--awell-signalWarning60: #fde484;
|
|
4311
|
+
--awell-teal: #21C7E4;
|
|
4312
|
+
--awell-teal400: #00A3BF;
|
|
4313
|
+
--awell-teal50: #E6FCFF;
|
|
4314
|
+
--awell-tealBorder: #179BB2;
|
|
4315
|
+
--awell-yellow100: #FFE380;
|
|
4316
|
+
--awell-yellow75: #FFF0B3;
|
|
4317
|
+
--awell-primary-color: var(--awell-accent-color)
|
|
4318
|
+
/** Slate (grayscale color palette) **/
|
|
4319
|
+
--awell-slate50: #f8fafc;
|
|
4320
|
+
--awell-slate100: #f1f5f9;
|
|
4321
|
+
--awell-slate200:#e2e8f0;
|
|
4322
|
+
--awell-slate300:#cbd5e1;
|
|
4323
|
+
--awell-slate400:#94a3b8;
|
|
4324
|
+
--awell-slate500:#64748b;
|
|
4325
|
+
--awell-slate600:#475569;
|
|
4326
|
+
--awell-slate700:#334155;
|
|
4327
|
+
--awell-slate800:#1e293b;
|
|
4328
|
+
--awell-slate900:#0f172a;
|
|
4329
|
+
}
|
|
4330
|
+
|
|
4331
|
+
html {
|
|
4332
|
+
/*
|
|
4333
|
+
FONT
|
|
4334
|
+
*/
|
|
4335
|
+
--awell-font: roboto;
|
|
4336
|
+
/*
|
|
4337
|
+
Misc
|
|
4338
|
+
*/
|
|
4339
|
+
--awell-header-height: 94px;
|
|
4340
|
+
--awell-mobile-footer-height: 60px;
|
|
4341
|
+
--awell-footer-height: 80px;
|
|
4342
|
+
/*
|
|
4343
|
+
FONT SIZES
|
|
4344
|
+
Based on https://tailwindcss.com/docs/font-size
|
|
4345
|
+
*/
|
|
4346
|
+
--font-size-xs: 0.75rem;
|
|
4347
|
+
/* 12px */
|
|
4348
|
+
--font-size-sm: 0.875rem;
|
|
4349
|
+
/* 14px */
|
|
4350
|
+
--font-size-base: 1rem;
|
|
4351
|
+
/* 16px */
|
|
4352
|
+
--font-size-lg: 1.125rem;
|
|
4353
|
+
/* 18px */
|
|
4354
|
+
--font-size-xl: 1.25rem;
|
|
4355
|
+
/* 20px */
|
|
4356
|
+
--font-size-2xl: 1.5rem;
|
|
4357
|
+
/* 24px */
|
|
4358
|
+
--font-size-3xl: 1.875rem;
|
|
4359
|
+
/* 30px */
|
|
4360
|
+
--font-size-4xl: 2.25rem;
|
|
4361
|
+
/* 36px */
|
|
4362
|
+
--font-size-5xl: 3rem;
|
|
4363
|
+
/* 48px */
|
|
4364
|
+
--font-size-6xl: 3.75em;
|
|
4365
|
+
/* 60px */
|
|
4366
|
+
--font-size-7xl: 4.5rem;
|
|
4367
|
+
/* 72px */
|
|
4368
|
+
--font-size-8xl: 6rem;
|
|
4369
|
+
/* 96px */
|
|
4370
|
+
--awell-font-size-xs: var(--font-size-xs);
|
|
4371
|
+
--awell-font-size-sm: var(--font-size-sm);
|
|
4372
|
+
--awell-font-size-base: var(--font-size-base);
|
|
4373
|
+
--awell-font-size-lg: var(--font-size-lg);
|
|
4374
|
+
--awell-font-size-xl: var(--font-size-xl);
|
|
4375
|
+
--awell-font-size-2xl: var(--font-size-2xl);
|
|
4376
|
+
--awell-font-size-3xl: var(--font-size-3xl);
|
|
4377
|
+
--awell-font-size-4xl: var(--font-size-4xl);
|
|
4378
|
+
--awell-font-size-5xl: var(--font-size-5xl);
|
|
4379
|
+
--awell-font-size-6xl: var(--font-size-6xl);
|
|
4380
|
+
--awell-font-size-7xl: var(--font-size-7xl);
|
|
4381
|
+
--awell-font-size-8xl: var(--font-size-8xl);
|
|
4382
|
+
/*
|
|
4383
|
+
SPACING
|
|
4384
|
+
Based on https://tailwindcss.com/docs/padding
|
|
4385
|
+
*/
|
|
4386
|
+
--spacing-none: 0rem;
|
|
4387
|
+
--spacing-O\.5: 0.125rem;
|
|
4388
|
+
/* 2px */
|
|
4389
|
+
--spacing-1: 0.25rem;
|
|
4390
|
+
/* 4px */
|
|
4391
|
+
--spacing-1\.5: 0.375rem;
|
|
4392
|
+
/* 6px */
|
|
4393
|
+
--spacing-2: 0.5rem;
|
|
4394
|
+
/* 8px */
|
|
4395
|
+
--spacing-2\.5: 0.625rem;
|
|
4396
|
+
/* 10px */
|
|
4397
|
+
--spacing-3: 0.65rem;
|
|
4398
|
+
/* 12px */
|
|
4399
|
+
--spacing-3\.5: 0.875rem;
|
|
4400
|
+
/* 14px */
|
|
4401
|
+
--spacing-4: 1rem;
|
|
4402
|
+
/* 16px */
|
|
4403
|
+
--spacing-5: 1.25rem;
|
|
4404
|
+
/* 20px */
|
|
4405
|
+
--spacing-6: 1.5rem;
|
|
4406
|
+
/* 24px */
|
|
4407
|
+
--spacing-7: 1.75rem;
|
|
4408
|
+
/* 28px */
|
|
4409
|
+
--spacing-8: 2rem;
|
|
4410
|
+
/* 32px */
|
|
4411
|
+
--spacing-9: 2.25rem;
|
|
4412
|
+
/* 36px */
|
|
4413
|
+
--spacing-10: 2.5rem;
|
|
4414
|
+
/* 40px */
|
|
4415
|
+
--spacing-11: 2.75rem;
|
|
4416
|
+
/* 44px */
|
|
4417
|
+
--spacing-12: 3rem;
|
|
4418
|
+
/* 48px */
|
|
4419
|
+
--spacing-14: 3.5rem;
|
|
4420
|
+
/* 56px */
|
|
4421
|
+
--spacing-16: 4rem;
|
|
4422
|
+
/* 64px */
|
|
4423
|
+
--spacing-20: 5rem;
|
|
4424
|
+
/* 80px */
|
|
4425
|
+
--spacing-24: 6rem;
|
|
4426
|
+
/* 96px */
|
|
4427
|
+
--spacing-28: 7rem;
|
|
4428
|
+
/* 112px */
|
|
4429
|
+
--spacing-32: 8rem;
|
|
4430
|
+
/* 128px */
|
|
4431
|
+
--spacing-36: 9rem;
|
|
4432
|
+
/* 144px */
|
|
4433
|
+
--spacing-40: 10rem;
|
|
4434
|
+
/* 160px */
|
|
4435
|
+
--spacing-44: 11rem;
|
|
4436
|
+
/* 176px */
|
|
4437
|
+
--spacing-48: 12rem;
|
|
4438
|
+
/* 192px */
|
|
4439
|
+
--spacing-52: 13rem;
|
|
4440
|
+
/* 208px */
|
|
4441
|
+
--spacing-56: 14rem;
|
|
4442
|
+
/* 224px */
|
|
4443
|
+
--spacing-60: 15rem;
|
|
4444
|
+
/* 240px */
|
|
4445
|
+
--awell-spacing-none: var(--spacing-none);
|
|
4446
|
+
--awell-spacing-0\.5: var(--spacing-O\.5);
|
|
4447
|
+
--awell-spacing-1: var(--spacing-1);
|
|
4448
|
+
--awell-spacing-1\.5: var(--spacing-1\.5);
|
|
4449
|
+
--awell-spacing-2: var(--spacing-2);
|
|
4450
|
+
--awell-spacing-2\.5: var(--spacing-2\.5);
|
|
4451
|
+
--awell-spacing-3: var(--spacing-3);
|
|
4452
|
+
--awell-spacing-3\.5: var(--spacing-3\.5);
|
|
4453
|
+
--awell-spacing-4: var(--spacing-4);
|
|
4454
|
+
--awell-spacing-5: var(--spacing-5);
|
|
4455
|
+
--awell-spacing-6: var(--spacing-6);
|
|
4456
|
+
--awell-spacing-7: var(--spacing-7);
|
|
4457
|
+
--awell-spacing-8: var(--spacing-8);
|
|
4458
|
+
--awell-spacing-9: var(--spacing-9);
|
|
4459
|
+
--awell-spacing-10: var(--spacing-10);
|
|
4460
|
+
--awell-spacing-11: var(--spacing-11);
|
|
4461
|
+
--awell-spacing-12: var(--spacing-12);
|
|
4462
|
+
--awell-spacing-14: var(--spacing-14);
|
|
4463
|
+
--awell-spacing-16: var(--spacing-16);
|
|
4464
|
+
--awell-spacing-20: var(--spacing-20);
|
|
4465
|
+
--awell-spacing-24: var(--spacing-24);
|
|
4466
|
+
--awell-spacing-28: var(--spacing-28);
|
|
4467
|
+
--awell-spacing-32: var(--spacing-32);
|
|
4468
|
+
--awell-spacing-36: var(--spacing-36);
|
|
4469
|
+
--awell-spacing-40: var(--spacing-40);
|
|
4470
|
+
--awell-spacing-44: var(--spacing-44);
|
|
4471
|
+
--awell-spacing-48: var(--spacing-48);
|
|
4472
|
+
--awell-spacing-52: var(--spacing-52);
|
|
4473
|
+
--awell-spacing-56: var(--spacing-56);
|
|
4474
|
+
--awell-spacing-60: var(--spacing-60);
|
|
4475
|
+
/*
|
|
4476
|
+
BORDER RADIUS
|
|
4477
|
+
Based on https://tailwindcss.com/docs/border-radius#rounding-corners-separately
|
|
4478
|
+
*/
|
|
4479
|
+
--awell-border-radius-none: 0px;
|
|
4480
|
+
--awell-border-radius-sm: 0.125rem;
|
|
4481
|
+
/* 4px */
|
|
4482
|
+
--awell-border-radius-rounded: 0.25rem;
|
|
4483
|
+
/* 6px */
|
|
4484
|
+
--awell-border-radius-md: 0.375rem;
|
|
4485
|
+
/* 8px */
|
|
4486
|
+
--awell-border-radius-lg: 0.5rem;
|
|
4487
|
+
/* 12px */
|
|
4488
|
+
--awell-border-radius-xl: 0.75rem;
|
|
4489
|
+
/* 16px */
|
|
4490
|
+
--awell-border-radius-2xl: 1rem;
|
|
4491
|
+
/* 18px */
|
|
4492
|
+
--awell-border-radius-3xl: 1.5rem;
|
|
4493
|
+
/* 24px */
|
|
4494
|
+
--awell-border-radius-full: 9999px;
|
|
4495
|
+
/* cirlce */
|
|
4496
|
+
/*
|
|
4497
|
+
SHADOW
|
|
4498
|
+
Based on https://tailwindcss.com/docs/box-shadow
|
|
4499
|
+
*/
|
|
4500
|
+
--awell-shadow-none: 0 0 #0000;
|
|
4501
|
+
--awell-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
|
4502
|
+
--awell-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1),
|
|
4503
|
+
0 2px 4px -2px rgb(0 0 0 / 0.1);
|
|
4504
|
+
--awell-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1),
|
|
4505
|
+
0 4px 6px -4px rgb(0 0 0 / 0.1);
|
|
4506
|
+
--awell-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1),
|
|
4507
|
+
0 8px 10px -6px rgb(0 0 0 / 0.1);
|
|
4508
|
+
--awell-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
|
|
4509
|
+
/*
|
|
4510
|
+
FONT WEIGHT
|
|
4511
|
+
Based on https://tailwindcss.com/docs/font-weight
|
|
4512
|
+
*/
|
|
4513
|
+
--awell-font-thin: 100;
|
|
4514
|
+
--awell-font-extralight: 200;
|
|
4515
|
+
--awell-font-light: 300;
|
|
4516
|
+
--awell-font-normal: 400;
|
|
4517
|
+
--awell-font-medium: 500;
|
|
4518
|
+
--awell-font-semibold: 600;
|
|
4519
|
+
--awell-font-bold: 700;
|
|
4520
|
+
--awell-font-extrabold: 800;
|
|
4521
|
+
--awell-font-black: 900;
|
|
4522
|
+
/*
|
|
4523
|
+
LINE-HEIGHT
|
|
4524
|
+
Based on https://tailwindcss.com/docs/line-height#relative-line-heights
|
|
4525
|
+
*/
|
|
4526
|
+
--awell-leading-3: 0.75rem;
|
|
4527
|
+
/* 12px */
|
|
4528
|
+
--awell-leading-4: 1rem;
|
|
4529
|
+
/* 16px */
|
|
4530
|
+
--awell-leading-5: 1.25rem;
|
|
4531
|
+
/* 20px */
|
|
4532
|
+
--awell-leading-6: 1.5rem;
|
|
4533
|
+
/* 24px */
|
|
4534
|
+
--awell-leading-7: 1.75rem;
|
|
4535
|
+
/* 28px */
|
|
4536
|
+
--awell-leading-8: 2rem;
|
|
4537
|
+
/* 32px */
|
|
4538
|
+
--awell-leading-9: 2.25rem;
|
|
4539
|
+
/* 36px */
|
|
4540
|
+
--awell-leading-10: 2.5rem;
|
|
4541
|
+
/* 40px */
|
|
4542
|
+
--awell-leading-none: 1;
|
|
4543
|
+
--awell-leading-tight: 1.25;
|
|
4544
|
+
--awell-leading-snug: 1.375;
|
|
4545
|
+
--awell-leading-normal: 1.5;
|
|
4546
|
+
--awell-leading-relaxed: 1.625;
|
|
4547
|
+
--awell-leading-loose: 2;
|
|
4548
|
+
/**
|
|
4549
|
+
RADIOS & CHECKBOXES
|
|
4550
|
+
**/
|
|
4551
|
+
--awell-radio-checkbox-height-mobile: 1.5rem;
|
|
4552
|
+
--awell-radio-checkbox-width-mobile: 1.5rem;
|
|
4553
|
+
--awell-radio-checkbox-height-above-mobile: 1.4rem;
|
|
4554
|
+
--awell-radio-checkbox-width-above-mobile: 1.4rem;
|
|
4555
|
+
--awell-radio-checkbox-border-color: var(--awell-slate400);
|
|
4556
|
+
--awell-radio-checkbox-label-color: var(--awell-slate700);
|
|
4557
|
+
--awell-checkbox-border-radius: var(--awell-border-radius-rounded);
|
|
4558
|
+
/**
|
|
4559
|
+
ACTIVITY CONTENT
|
|
4560
|
+
**/
|
|
4561
|
+
--awell-activity-max-width: 65ch;
|
|
4562
|
+
--awell-activity-padding: 0 var(--awell-spacing-4);
|
|
4563
|
+
}
|
|
4564
|
+
|
|
4565
|
+
.awell__rangeInput_input_container {
|
|
4238
4566
|
position: relative;
|
|
4239
|
-
|
|
4240
|
-
|
|
4241
|
-
|
|
4242
|
-
|
|
4567
|
+
}
|
|
4568
|
+
.awell__rangeInput_input_container .awell__rangeInput_touch_tooltip_wrapper {
|
|
4569
|
+
display: flex;
|
|
4570
|
+
align-items: center;
|
|
4571
|
+
justify-content: center;
|
|
4572
|
+
margin-bottom: var(--awell-spacing-1);
|
|
4573
|
+
}
|
|
4574
|
+
.awell__rangeInput_input_container .awell__rangeInput_touch_tooltip_wrapper.awell__rangeInput_with_value_tooltip {
|
|
4575
|
+
height: 22px;
|
|
4243
4576
|
}
|
|
4244
4577
|
@media (min-width: 640px) {
|
|
4245
|
-
.
|
|
4246
|
-
|
|
4578
|
+
.awell__rangeInput_input_container .awell__rangeInput_touch_tooltip_wrapper.awell__rangeInput_with_value_tooltip {
|
|
4579
|
+
height: 27px;
|
|
4247
4580
|
}
|
|
4248
4581
|
}
|
|
4249
|
-
.
|
|
4250
|
-
display: block;
|
|
4251
|
-
position: absolute;
|
|
4582
|
+
.awell__rangeInput_input_container .awell__rangeInput_touch_tooltip_wrapper .awell__rangeInput_tooltip_touched {
|
|
4583
|
+
display: inline-block;
|
|
4252
4584
|
text-align: center;
|
|
4253
4585
|
background-color: var(--awell-secondary-color);
|
|
4254
4586
|
color: var(--awell-secondary-text-color);
|
|
4255
4587
|
padding: var(--awell-spacing-1) var(--awell-spacing-2);
|
|
4256
4588
|
font-size: var(--awell-font-size-xs);
|
|
4257
4589
|
border-radius: var(--awell-spacing-2);
|
|
4258
|
-
top: -28px;
|
|
4259
|
-
left: 50%;
|
|
4260
|
-
transform: translateX(-50%);
|
|
4261
4590
|
}
|
|
4262
4591
|
@media (min-width: 640px) {
|
|
4263
|
-
.
|
|
4264
|
-
top: -32px;
|
|
4592
|
+
.awell__rangeInput_input_container .awell__rangeInput_touch_tooltip_wrapper .awell__rangeInput_tooltip_touched {
|
|
4265
4593
|
font-size: var(--awell-font-size-base);
|
|
4266
4594
|
}
|
|
4267
4595
|
}
|
|
4268
|
-
.awell__rangeInput_awell_range_input_wrapper
|
|
4596
|
+
.awell__rangeInput_input_container .awell__rangeInput_awell_range_input_wrapper {
|
|
4597
|
+
--awell-range-slider-background-color: var(
|
|
4598
|
+
--awell-accent-ring-color-buttons
|
|
4599
|
+
);
|
|
4600
|
+
--ticksHeight: 12px;
|
|
4601
|
+
position: relative;
|
|
4602
|
+
transition: all 0.25s ease-in;
|
|
4603
|
+
}
|
|
4604
|
+
@media (min-width: 640px) {
|
|
4605
|
+
.awell__rangeInput_input_container .awell__rangeInput_awell_range_input_wrapper {
|
|
4606
|
+
--awell-thick-width: 2px;
|
|
4607
|
+
}
|
|
4608
|
+
}
|
|
4609
|
+
.awell__rangeInput_input_container .awell__rangeInput_awell_range_input_wrapper.awell__rangeInput_with_marks {
|
|
4269
4610
|
--awell-thick-width: 1px;
|
|
4270
|
-
--awell-ticks: linear-gradient(
|
|
4611
|
+
--awell-ticks: linear-gradient(
|
|
4612
|
+
to right,
|
|
4613
|
+
var(--awell-thick-color) var(--awell-thick-width),
|
|
4614
|
+
transparent 1px
|
|
4615
|
+
)
|
|
4271
4616
|
repeat-x;
|
|
4272
4617
|
background: silver;
|
|
4273
4618
|
background: var(--awell-ticks);
|
|
@@ -4275,65 +4620,9 @@ html {
|
|
|
4275
4620
|
background-position: 0 calc(var(--ticksHeight) * 1.7);
|
|
4276
4621
|
display: flex;
|
|
4277
4622
|
flex-direction: column;
|
|
4623
|
+
padding-bottom: calc(var(--ticksHeight) * 1.7);
|
|
4278
4624
|
}
|
|
4279
|
-
.
|
|
4280
|
-
top: 40px;
|
|
4281
|
-
}
|
|
4282
|
-
.awell__rangeInput_awell_range_input_wrapper.awell__rangeInput_with_marks .awell__rangeInput_awell_range_input_datalist {
|
|
4283
|
-
margin-top: 16px;
|
|
4284
|
-
}
|
|
4285
|
-
.awell__rangeInput_awell_range_input_wrapper.awell__rangeInput_with_marks .awell__rangeInput_awell_range_input_datalist.awell__rangeInput_with_min_max_labels {
|
|
4286
|
-
margin-top: 36px;
|
|
4287
|
-
}
|
|
4288
|
-
.awell__rangeInput_awell_range_input_wrapper::before, .awell__rangeInput_awell_range_input_wrapper::after {
|
|
4289
|
-
font-size: var(--awell-font-size-sm);
|
|
4290
|
-
content: var(--awell-min-max-value);
|
|
4291
|
-
position: absolute;
|
|
4292
|
-
top: calc(40px - var(--ticksHeight));
|
|
4293
|
-
}
|
|
4294
|
-
@media (min-width: 640px) {
|
|
4295
|
-
.awell__rangeInput_awell_range_input_wrapper::before, .awell__rangeInput_awell_range_input_wrapper::after {
|
|
4296
|
-
font-size: var(--awell-font-size-base);
|
|
4297
|
-
}
|
|
4298
|
-
}
|
|
4299
|
-
.awell__rangeInput_awell_range_input_wrapper::before {
|
|
4300
|
-
counter-reset: x var(--awell-min);
|
|
4301
|
-
}
|
|
4302
|
-
.awell__rangeInput_awell_range_input_wrapper::after {
|
|
4303
|
-
counter-reset: x var(--awell-max);
|
|
4304
|
-
right: 0;
|
|
4305
|
-
}
|
|
4306
|
-
.awell__rangeInput_awell_range_input_wrapper .awell__rangeInput_awell_range_input_datalist {
|
|
4307
|
-
font-size: var(--awell-font-size-sm);
|
|
4308
|
-
display: flex;
|
|
4309
|
-
justify-content: space-between;
|
|
4310
|
-
position: relative;
|
|
4311
|
-
}
|
|
4312
|
-
.awell__rangeInput_awell_range_input_wrapper .awell__rangeInput_awell_range_input_datalist.awell__rangeInput_with_min_max_labels {
|
|
4313
|
-
margin-top: 20px;
|
|
4314
|
-
}
|
|
4315
|
-
.awell__rangeInput_awell_range_input_wrapper .awell__rangeInput_awell_range_input_datalist .awell__rangeInput_minLabel {
|
|
4316
|
-
position: absolute;
|
|
4317
|
-
left: 0;
|
|
4318
|
-
bottom: -40px;
|
|
4319
|
-
width: 47.5%;
|
|
4320
|
-
max-width: 250px;
|
|
4321
|
-
text-align: left;
|
|
4322
|
-
}
|
|
4323
|
-
.awell__rangeInput_awell_range_input_wrapper .awell__rangeInput_awell_range_input_datalist .awell__rangeInput_maxLabel {
|
|
4324
|
-
position: absolute;
|
|
4325
|
-
right: 0;
|
|
4326
|
-
bottom: -40px;
|
|
4327
|
-
width: 47.5%;
|
|
4328
|
-
max-width: 250px;
|
|
4329
|
-
text-align: right;
|
|
4330
|
-
}
|
|
4331
|
-
@media (min-width: 640px) {
|
|
4332
|
-
.awell__rangeInput_awell_range_input_wrapper .awell__rangeInput_awell_range_input_datalist {
|
|
4333
|
-
font-size: var(--awell-font-size-base);
|
|
4334
|
-
}
|
|
4335
|
-
}
|
|
4336
|
-
.awell__rangeInput_awell_range_input_wrapper .awell__rangeInput_awell_range_input {
|
|
4625
|
+
.awell__rangeInput_input_container .awell__rangeInput_awell_range_input_wrapper .awell__rangeInput_awell_range_input {
|
|
4337
4626
|
--awell-radio-awell-border-radius: var(--border-radius-default, 4px);
|
|
4338
4627
|
--awell-radio-neutral: var(--neutral, var(--awell-neutralMid400));
|
|
4339
4628
|
font-size: var(--awell-font-size-md);
|
|
@@ -4345,10 +4634,10 @@ html {
|
|
|
4345
4634
|
/* TODO: Use one of the selectors from https://stackoverflow.com/a/20541859/7077589 and figure out
|
|
4346
4635
|
how to remove the virtical space around the range input in IE */
|
|
4347
4636
|
}
|
|
4348
|
-
.awell__rangeInput_awell_range_input_wrapper .awell__rangeInput_awell_range_input:focus {
|
|
4637
|
+
.awell__rangeInput_input_container .awell__rangeInput_awell_range_input_wrapper .awell__rangeInput_awell_range_input:focus {
|
|
4349
4638
|
outline: none;
|
|
4350
4639
|
}
|
|
4351
|
-
.awell__rangeInput_awell_range_input_wrapper .awell__rangeInput_awell_range_input::-webkit-slider-runnable-track {
|
|
4640
|
+
.awell__rangeInput_input_container .awell__rangeInput_awell_range_input_wrapper .awell__rangeInput_awell_range_input::-webkit-slider-runnable-track {
|
|
4352
4641
|
position: relative;
|
|
4353
4642
|
background: var(--awell-range-slider-background-color);
|
|
4354
4643
|
border: 0;
|
|
@@ -4357,7 +4646,7 @@ html {
|
|
|
4357
4646
|
height: 11.4px;
|
|
4358
4647
|
cursor: pointer;
|
|
4359
4648
|
}
|
|
4360
|
-
.awell__rangeInput_awell_range_input_wrapper .awell__rangeInput_awell_range_input::-webkit-slider-thumb {
|
|
4649
|
+
.awell__rangeInput_input_container .awell__rangeInput_awell_range_input_wrapper .awell__rangeInput_awell_range_input::-webkit-slider-thumb {
|
|
4361
4650
|
margin-top: -1.3px;
|
|
4362
4651
|
width: 14px;
|
|
4363
4652
|
height: 14px;
|
|
@@ -4367,7 +4656,7 @@ html {
|
|
|
4367
4656
|
cursor: pointer;
|
|
4368
4657
|
appearance: none;
|
|
4369
4658
|
}
|
|
4370
|
-
.awell__rangeInput_awell_range_input_wrapper .awell__rangeInput_awell_range_input::-moz-range-track {
|
|
4659
|
+
.awell__rangeInput_input_container .awell__rangeInput_awell_range_input_wrapper .awell__rangeInput_awell_range_input::-moz-range-track {
|
|
4371
4660
|
background: var(--awell-range-slider-background-color);
|
|
4372
4661
|
border: 0;
|
|
4373
4662
|
border-radius: 25px;
|
|
@@ -4375,7 +4664,7 @@ html {
|
|
|
4375
4664
|
height: 11.4px;
|
|
4376
4665
|
cursor: pointer;
|
|
4377
4666
|
}
|
|
4378
|
-
.awell__rangeInput_awell_range_input_wrapper .awell__rangeInput_awell_range_input::-moz-range-thumb {
|
|
4667
|
+
.awell__rangeInput_input_container .awell__rangeInput_awell_range_input_wrapper .awell__rangeInput_awell_range_input::-moz-range-thumb {
|
|
4379
4668
|
width: 14px;
|
|
4380
4669
|
height: 14px;
|
|
4381
4670
|
background: var(--awell-accent-color);
|
|
@@ -4383,7 +4672,7 @@ html {
|
|
|
4383
4672
|
border-radius: 15px;
|
|
4384
4673
|
cursor: pointer;
|
|
4385
4674
|
}
|
|
4386
|
-
.awell__rangeInput_awell_range_input_wrapper .awell__rangeInput_awell_range_input::-ms-track {
|
|
4675
|
+
.awell__rangeInput_input_container .awell__rangeInput_awell_range_input_wrapper .awell__rangeInput_awell_range_input::-ms-track {
|
|
4387
4676
|
position: relative;
|
|
4388
4677
|
background: transparent;
|
|
4389
4678
|
border-color: transparent;
|
|
@@ -4393,17 +4682,17 @@ html {
|
|
|
4393
4682
|
height: 11.4px;
|
|
4394
4683
|
cursor: pointer;
|
|
4395
4684
|
}
|
|
4396
|
-
.awell__rangeInput_awell_range_input_wrapper .awell__rangeInput_awell_range_input::-ms-fill-lower {
|
|
4685
|
+
.awell__rangeInput_input_container .awell__rangeInput_awell_range_input_wrapper .awell__rangeInput_awell_range_input::-ms-fill-lower {
|
|
4397
4686
|
background: var(--awell-accent-color);
|
|
4398
4687
|
border: 0;
|
|
4399
4688
|
border-radius: 50px;
|
|
4400
4689
|
}
|
|
4401
|
-
.awell__rangeInput_awell_range_input_wrapper .awell__rangeInput_awell_range_input::-ms-fill-upper {
|
|
4690
|
+
.awell__rangeInput_input_container .awell__rangeInput_awell_range_input_wrapper .awell__rangeInput_awell_range_input::-ms-fill-upper {
|
|
4402
4691
|
background: var(--awell-range-slider-background-color);
|
|
4403
4692
|
border: 0;
|
|
4404
4693
|
border-radius: 50px;
|
|
4405
4694
|
}
|
|
4406
|
-
.awell__rangeInput_awell_range_input_wrapper .awell__rangeInput_awell_range_input::-ms-thumb {
|
|
4695
|
+
.awell__rangeInput_input_container .awell__rangeInput_awell_range_input_wrapper .awell__rangeInput_awell_range_input::-ms-thumb {
|
|
4407
4696
|
width: 14px;
|
|
4408
4697
|
height: 14px;
|
|
4409
4698
|
background: var(--awell-accent-color);
|
|
@@ -4413,26 +4702,22 @@ html {
|
|
|
4413
4702
|
margin-top: 0;
|
|
4414
4703
|
/* Needed to keep the Edge thumb centred */
|
|
4415
4704
|
}
|
|
4416
|
-
.awell__rangeInput_awell_range_input_wrapper .awell__rangeInput_awell_range_input:focus::-ms-fill-lower {
|
|
4705
|
+
.awell__rangeInput_input_container .awell__rangeInput_awell_range_input_wrapper .awell__rangeInput_awell_range_input:focus::-ms-fill-lower {
|
|
4417
4706
|
background: var(--awell-range-slider-background-color);
|
|
4418
4707
|
}
|
|
4419
|
-
.awell__rangeInput_awell_range_input_wrapper .awell__rangeInput_awell_range_input:focus::-ms-fill-upper {
|
|
4708
|
+
.awell__rangeInput_input_container .awell__rangeInput_awell_range_input_wrapper .awell__rangeInput_awell_range_input:focus::-ms-fill-upper {
|
|
4420
4709
|
background: var(--awell-range-slider-background-color);
|
|
4421
4710
|
}
|
|
4422
4711
|
@supports (-ms-ime-align: auto) {
|
|
4423
|
-
.awell__rangeInput_awell_range_input_wrapper .awell__rangeInput_awell_range_input {
|
|
4712
|
+
.awell__rangeInput_input_container .awell__rangeInput_awell_range_input_wrapper .awell__rangeInput_awell_range_input {
|
|
4424
4713
|
/* Pre-Chromium Edge only styles, selector taken from hhttps://stackoverflow.com/a/32202953/7077589 */
|
|
4425
4714
|
}
|
|
4426
|
-
.awell__rangeInput_awell_range_input_wrapper .awell__rangeInput_awell_range_input {
|
|
4715
|
+
.awell__rangeInput_input_container .awell__rangeInput_awell_range_input_wrapper .awell__rangeInput_awell_range_input {
|
|
4427
4716
|
margin: 0;
|
|
4428
4717
|
/* Edge starts the margin from the thumb, not the track as other browsers do */
|
|
4429
4718
|
}
|
|
4430
4719
|
}
|
|
4431
|
-
.awell__rangeInput_awell_range_input_wrapper .
|
|
4432
|
-
display: flex;
|
|
4433
|
-
justify-content: space-between;
|
|
4434
|
-
}
|
|
4435
|
-
.awell__rangeInput_awell_range_input_wrapper .awell__rangeInput_tooltip {
|
|
4720
|
+
.awell__rangeInput_input_container .awell__rangeInput_awell_range_input_wrapper .awell__rangeInput_tooltip {
|
|
4436
4721
|
position: absolute;
|
|
4437
4722
|
background-color: var(--awell-secondary-color);
|
|
4438
4723
|
color: var(--awell-secondary-text-color);
|
|
@@ -4442,10 +4727,38 @@ html {
|
|
|
4442
4727
|
transform: translateX(-50%);
|
|
4443
4728
|
}
|
|
4444
4729
|
@media (min-width: 640px) {
|
|
4445
|
-
.awell__rangeInput_awell_range_input_wrapper .awell__rangeInput_tooltip {
|
|
4730
|
+
.awell__rangeInput_input_container .awell__rangeInput_awell_range_input_wrapper .awell__rangeInput_tooltip {
|
|
4446
4731
|
font-size: var(--awell-font-size-base);
|
|
4447
4732
|
}
|
|
4448
4733
|
}
|
|
4734
|
+
.awell__rangeInput_input_container .awell__rangeInput_min_max_wrapper {
|
|
4735
|
+
display: flex;
|
|
4736
|
+
gap: var(--awell-spacing-2);
|
|
4737
|
+
flex-direction: column;
|
|
4738
|
+
}
|
|
4739
|
+
.awell__rangeInput_input_container .awell__rangeInput_min_max_wrapper .awell__rangeInput_min_max_data_list {
|
|
4740
|
+
display: flex;
|
|
4741
|
+
justify-content: space-between;
|
|
4742
|
+
gap: var(--awell-spacing-2);
|
|
4743
|
+
font-size: var(--awell-font-size-sm);
|
|
4744
|
+
}
|
|
4745
|
+
@media (min-width: 640px) {
|
|
4746
|
+
.awell__rangeInput_input_container .awell__rangeInput_min_max_wrapper .awell__rangeInput_min_max_data_list {
|
|
4747
|
+
font-size: var(--awell-font-size-base);
|
|
4748
|
+
}
|
|
4749
|
+
}
|
|
4750
|
+
.awell__rangeInput_input_container .awell__rangeInput_min_max_wrapper .awell__rangeInput_min_max_data_list > div {
|
|
4751
|
+
width: 50%;
|
|
4752
|
+
}
|
|
4753
|
+
.awell__rangeInput_input_container .awell__rangeInput_min_max_wrapper .awell__rangeInput_min_max_data_list:first-child {
|
|
4754
|
+
margin-top: var(--awell-spacing-1);
|
|
4755
|
+
}
|
|
4756
|
+
.awell__rangeInput_input_container .awell__rangeInput_min_max_wrapper .awell__rangeInput_min_max_data_list .awell__rangeInput_min {
|
|
4757
|
+
text-align: left;
|
|
4758
|
+
}
|
|
4759
|
+
.awell__rangeInput_input_container .awell__rangeInput_min_max_wrapper .awell__rangeInput_min_max_data_list .awell__rangeInput_max {
|
|
4760
|
+
text-align: right;
|
|
4761
|
+
}
|
|
4449
4762
|
|
|
4450
4763
|
.awell__rangeInput_awell_range_input.awell__rangeInput_hideThumb::-webkit-slider-thumb {
|
|
4451
4764
|
visibility: hidden;
|
|
@@ -5520,9 +5833,6 @@ html {
|
|
|
5520
5833
|
height: var(--awell-font-size-base);
|
|
5521
5834
|
margin-top: var(--awell-spacing-4);
|
|
5522
5835
|
}
|
|
5523
|
-
.awell__question_awell_question .awell__question_error.awell__question_slider_error {
|
|
5524
|
-
margin-top: var(--awell-spacing-12);
|
|
5525
|
-
}
|
|
5526
5836
|
.awell__phoneInputField_awell_input_field_wrapper {
|
|
5527
5837
|
--awell-focus-ring-color: var(--awell-accent-ring-color-inputs);
|
|
5528
5838
|
--awell-focus-ring-offset-width: 0px;
|
|
@@ -7862,10 +8172,6 @@ html {
|
|
|
7862
8172
|
margin-bottom: var(--awell-spacing-8);
|
|
7863
8173
|
}
|
|
7864
8174
|
|
|
7865
|
-
.awell__form_traditional_form_question_slider {
|
|
7866
|
-
margin-bottom: var(--awell-spacing-12);
|
|
7867
|
-
}
|
|
7868
|
-
|
|
7869
8175
|
.awell__form_trademark {
|
|
7870
8176
|
font-size: var(--font-size-xs);
|
|
7871
8177
|
color: var(--awell-slate500);
|
package/dist/index.js
CHANGED
|
@@ -16596,7 +16596,7 @@ Check the top-level render call using <` + t + ">.");
|
|
|
16596
16596
|
return jsxRuntime.exports.jsxs("div", __assign({ className: "".concat(classes$i.input_wrapper, " ").concat(customWrapperClass) }, { children: [jsxRuntime.exports.jsx("div", __assign({ className: classes$i.radio_wrapper }, { children: jsxRuntime.exports.jsx("input", __assign({}, props, { name: name, type: "radio", onChange: onChange })) })), jsxRuntime.exports.jsx("div", __assign({ className: classes$i.label_wrapper }, { children: jsxRuntime.exports.jsx("label", __assign({ htmlFor: props.id }, { children: label })) }))] }));
|
|
16597
16597
|
};
|
|
16598
16598
|
|
|
16599
|
-
var classes$h = {"
|
|
16599
|
+
var classes$h = {"input_container":"awell__rangeInput_input_container","touch_tooltip_wrapper":"awell__rangeInput_touch_tooltip_wrapper","with_value_tooltip":"awell__rangeInput_with_value_tooltip","tooltip_touched":"awell__rangeInput_tooltip_touched","awell_range_input_wrapper":"awell__rangeInput_awell_range_input_wrapper","with_marks":"awell__rangeInput_with_marks","awell_range_input":"awell__rangeInput_awell_range_input","tooltip":"awell__rangeInput_tooltip","min_max_wrapper":"awell__rangeInput_min_max_wrapper","min_max_data_list":"awell__rangeInput_min_max_data_list","min":"awell__rangeInput_min","max":"awell__rangeInput_max","hideThumb":"awell__rangeInput_hideThumb","showThumb":"awell__rangeInput_showThumb"};
|
|
16600
16600
|
|
|
16601
16601
|
var lodash = {exports: {}};
|
|
16602
16602
|
|
|
@@ -33839,7 +33839,7 @@ Check the top-level render call using <` + t + ">.");
|
|
|
33839
33839
|
React__default["default"].useEffect(function () {
|
|
33840
33840
|
var MIDPOINT_PERCENTAGE = 0.5;
|
|
33841
33841
|
var THUMB_WIDTH = 16;
|
|
33842
|
-
var TOP_POSITION_ADJUSTMENT = -
|
|
33842
|
+
var TOP_POSITION_ADJUSTMENT = -30;
|
|
33843
33843
|
if (touched === true && is_value_tooltip_on && tooltipRef.current) {
|
|
33844
33844
|
var input = tooltipRef.current.closest(".".concat(classes$h.awell_range_input_wrapper));
|
|
33845
33845
|
if (input) {
|
|
@@ -33857,11 +33857,11 @@ Check the top-level render call using <` + t + ">.");
|
|
|
33857
33857
|
}
|
|
33858
33858
|
}
|
|
33859
33859
|
}, [internalValue, is_value_tooltip_on, max, min, touched]);
|
|
33860
|
-
return jsxRuntime.exports.jsxs("div", { children: [jsxRuntime.exports.jsx(QuestionLabel, { htmlFor: id, label: label, mandatory: mandatory, id: "".concat(id, "-label") }), jsxRuntime.exports.jsxs("div", __assign({ className: "".concat(classes$h.
|
|
33861
|
-
|
|
33862
|
-
|
|
33863
|
-
|
|
33864
|
-
|
|
33860
|
+
return jsxRuntime.exports.jsxs("div", { children: [jsxRuntime.exports.jsx(QuestionLabel, { htmlFor: id, label: label, mandatory: mandatory, id: "".concat(id, "-label") }), jsxRuntime.exports.jsxs("div", __assign({ className: classes$h.input_container }, { children: [jsxRuntime.exports.jsx("div", __assign({ className: "".concat(classes$h.touch_tooltip_wrapper, " ").concat(is_value_tooltip_on ? classes$h.with_value_tooltip : '') }, { children: renderTouchTooltip() })), jsxRuntime.exports.jsxs("div", __assign({ className: "".concat(classes$h.awell_range_input_wrapper, " ").concat(display_marks ? classes$h.with_marks : ''), style: style }, { children: [is_value_tooltip_on &&
|
|
33861
|
+
renderValueTooltip(internalValue, tooltipPosition.left, tooltipPosition.top, touched), jsxRuntime.exports.jsx("input", __assign({}, props, { "data-testid": id, type: "range", id: "awell__slider_input", min: min, max: max, step: step_value, className: "".concat(classes$h.awell_range_input, " ").concat(touched ? classes$h.showThumb : classes$h.hideThumb), onChange: handleValueChange, onFocus: function () {
|
|
33862
|
+
setTouched(true);
|
|
33863
|
+
onTouched(true);
|
|
33864
|
+
}, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": props.value || min, "aria-labelledby": "".concat(id, "-label") }))] })), jsxRuntime.exports.jsxs("div", __assign({ className: classes$h.min_max_wrapper }, { children: [show_min_max_values && jsxRuntime.exports.jsxs("div", __assign({ className: classes$h.min_max_data_list, "data-testid": "".concat(id, "-datalist-values") }, { children: [jsxRuntime.exports.jsx("div", __assign({ className: classes$h.min, "aria-label": "Minimum value" }, { children: min })), jsxRuntime.exports.jsx("div", __assign({ className: classes$h.max, "aria-label": "Maximum value" }, { children: max }))] })), (!lodash.exports.isEmpty(min_label) || !lodash.exports.isEmpty(max_label)) && jsxRuntime.exports.jsxs("div", __assign({ className: classes$h.min_max_data_list, "data-testid": "".concat(id, "-datalist-labels") }, { children: [jsxRuntime.exports.jsx("div", __assign({ className: classes$h.min, "aria-label": "Minimum label" }, { children: min_label })), jsxRuntime.exports.jsx("div", __assign({ className: classes$h.max, "aria-label": "Maximum label" }, { children: max_label }))] }))] }))] }))] });
|
|
33865
33865
|
};
|
|
33866
33866
|
|
|
33867
33867
|
var classes$g = {"scroll_indicator_container":"awell__ScrollIndicator_scroll_indicator_container","scroll_indicator_svg":"awell__ScrollIndicator_scroll_indicator_svg"};
|
|
@@ -36977,7 +36977,7 @@ Check the top-level render call using <` + t + ">.");
|
|
|
36977
36977
|
'' }, option.id);}) }))] });
|
|
36978
36978
|
};
|
|
36979
36979
|
|
|
36980
|
-
var classes$9 = {"awell_question":"awell__question_awell_question","error":"awell__question_error"
|
|
36980
|
+
var classes$9 = {"awell_question":"awell__question_awell_question","error":"awell__question_error"};
|
|
36981
36981
|
|
|
36982
36982
|
var classes$8 = {"awell_input_field_wrapper":"awell__phoneInputField_awell_input_field_wrapper","awell_phone_input_field_container":"awell__phoneInputField_awell_phone_input_field_container","input_wrapper_with_error":"awell__phoneInputField_input_wrapper_with_error","has_error":"awell__phoneInputField_has_error","error_message":"awell__phoneInputField_error_message","error_icon":"awell__phoneInputField_error_icon","awell_input_field":"awell__phoneInputField_awell_input_field"};
|
|
36983
36983
|
|
|
@@ -37423,9 +37423,7 @@ Check the top-level render call using <` + t + ">.");
|
|
|
37423
37423
|
var id = _a.id;
|
|
37424
37424
|
return id === question.id;
|
|
37425
37425
|
});
|
|
37426
|
-
return jsxRuntime.exports.jsxs("div", __assign({ style: style, className: classes$9.awell_question }, { children: [jsxRuntime.exports.jsx(QuestionData, { question: question, control: control, getValues: getValues, labels: labels, inputAutoFocus: inputAutoFocus, submitAndMoveToNextQuestion: submitAndMoveToNextQuestion, onAnswerChange: onAnswerChange, shouldAutoProgress: shouldAutoProgress }), currentError && jsxRuntime.exports.jsx("div", __assign({ className:
|
|
37427
|
-
classes$9.slider_error :
|
|
37428
|
-
'') }, { children: jsxRuntime.exports.jsx(Text, __assign({ variant: "textSmall", color: "var(--awell-signalError100)" }, { children: currentError.error })) }))] }));
|
|
37426
|
+
return jsxRuntime.exports.jsxs("div", __assign({ style: style, className: classes$9.awell_question }, { children: [jsxRuntime.exports.jsx(QuestionData, { question: question, control: control, getValues: getValues, labels: labels, inputAutoFocus: inputAutoFocus, submitAndMoveToNextQuestion: submitAndMoveToNextQuestion, onAnswerChange: onAnswerChange, shouldAutoProgress: shouldAutoProgress }), currentError && jsxRuntime.exports.jsx("div", __assign({ className: classes$9.error }, { children: jsxRuntime.exports.jsx(Text, __assign({ variant: "textSmall", color: "var(--awell-signalError100)" }, { children: currentError.error })) }))] }));
|
|
37429
37427
|
};
|
|
37430
37428
|
|
|
37431
37429
|
var classes$7 = {"awell_attachment_list":"awell__attachmentList_awell_attachment_list"};
|
|
@@ -37518,7 +37516,7 @@ Check the top-level render call using <` + t + ">.");
|
|
|
37518
37516
|
return jsxRuntime.exports.jsxs(jsxRuntime.exports.Fragment, { children: [jsxRuntime.exports.jsx("main", __assign({ id: "ahp_main_content_with_scroll_hint", className: layoutClasses.main_content }, { children: jsxRuntime.exports.jsxs("article", __assign({ className: "".concat(classes$4.awell_message, " ").concat(classes$4.container) }, { children: [jsxRuntime.exports.jsx("div", __assign({ className: classes$4.message_title }, { children: subject })), jsxRuntime.exports.jsx("div", __assign({ className: classes$4.content }, { children: jsxRuntime.exports.jsx(RichTextViewer, { content: cleanContent }) })), jsxRuntime.exports.jsxs("div", __assign({ className: classes$4.attachmentList }, { children: [jsxRuntime.exports.jsx(AttachmentList, { attachments: attachments, icon: attachmentIcon, labels: attachmentLabels }), children] }))] })) })), jsxRuntime.exports.jsx(HostedPageFooter, __assign({ showScrollHint: showScrollHint }, { children: jsxRuntime.exports.jsx("div", __assign({ className: "".concat(classes$4.button_wrapper, " ").concat(classes$4.container) }, { children: jsxRuntime.exports.jsx(Button, __assign({ "data-cy": "markMessageAsReadButton", variant: "secondary", onClick: onMessageRead }, { children: buttonLabels.readMessage })) })) }))] });
|
|
37519
37517
|
};
|
|
37520
37518
|
|
|
37521
|
-
var classes$3 = {"container":"awell__form_container","traditional_container":"awell__form_traditional_container","awell_wizard_form":"awell__form_awell_wizard_form","form_progress":"awell__form_form_progress","loadingContainer":"awell__form_loadingContainer","title":"awell__form_title","wizard_form":"awell__form_wizard_form","conversational_button_wrapper":"awell__form_conversational_button_wrapper","traditional_button_wrapper":"awell__form_traditional_button_wrapper","traditional_form":"awell__form_traditional_form","traditional_form_question":"awell__form_traditional_form_question","
|
|
37519
|
+
var classes$3 = {"container":"awell__form_container","traditional_container":"awell__form_traditional_container","awell_wizard_form":"awell__form_awell_wizard_form","form_progress":"awell__form_form_progress","loadingContainer":"awell__form_loadingContainer","title":"awell__form_title","wizard_form":"awell__form_wizard_form","conversational_button_wrapper":"awell__form_conversational_button_wrapper","traditional_button_wrapper":"awell__form_traditional_button_wrapper","traditional_form":"awell__form_traditional_form","traditional_form_question":"awell__form_traditional_form_question","trademark":"awell__form_trademark","traditional":"awell__form_traditional","conversational":"awell__form_conversational"};
|
|
37522
37520
|
|
|
37523
37521
|
var useClickOutsideNotifier = function (_a) {
|
|
37524
37522
|
var ref = _a.ref,clickOutsideHandler = _a.clickOutsideHandler;
|
|
@@ -38004,8 +38002,8 @@ Check the top-level render call using <` + t + ">.");
|
|
|
38004
38002
|
};
|
|
38005
38003
|
|
|
38006
38004
|
var ConversationalForm = function (_a) {
|
|
38007
|
-
var form = _a.form,onSubmit = _a.onSubmit,buttonLabels = _a.buttonLabels,evaluateDisplayConditions = _a.evaluateDisplayConditions,errorLabels = _a.errorLabels,questionLabels = _a.questionLabels,storedAnswers = _a.storedAnswers,onAnswersChange = _a.onAnswersChange,_b = _a.autoProgress,autoProgress = _b === void 0 ? false : _b,_c = _a.autosaveAnswers,autosaveAnswers = _c === void 0 ? true : _c;
|
|
38008
|
-
var
|
|
38005
|
+
var form = _a.form,onSubmit = _a.onSubmit,buttonLabels = _a.buttonLabels,evaluateDisplayConditions = _a.evaluateDisplayConditions,errorLabels = _a.errorLabels,questionLabels = _a.questionLabels,storedAnswers = _a.storedAnswers,onAnswersChange = _a.onAnswersChange,_b = _a.autoProgress,autoProgress = _b === void 0 ? false : _b,_c = _a.autosaveAnswers,autosaveAnswers = _c === void 0 ? true : _c,_d = _a.showProgressBar,showProgressBar = _d === void 0 ? true : _d;
|
|
38006
|
+
var _e = useConversationalForm({
|
|
38009
38007
|
questions: form.questions,
|
|
38010
38008
|
onSubmit: onSubmit,
|
|
38011
38009
|
evaluateDisplayConditions: evaluateDisplayConditions,
|
|
@@ -38013,8 +38011,8 @@ Check the top-level render call using <` + t + ">.");
|
|
|
38013
38011
|
storedAnswers: storedAnswers,
|
|
38014
38012
|
autosaveAnswers: autosaveAnswers,
|
|
38015
38013
|
onAnswersChange: onAnswersChange }),
|
|
38016
|
-
submitForm =
|
|
38017
|
-
var
|
|
38014
|
+
submitForm = _e.submitForm,isSubmittingForm = _e.isSubmittingForm,handleGoToNextQuestion = _e.handleGoToNextQuestion,handleGoToPrevQuestion = _e.handleGoToPrevQuestion,_f = _e.formMethods,control = _f.control,getValues = _f.getValues,currentQuestion = _e.currentQuestion,percentageCompleted = _e.percentageCompleted,errors = _e.errors,isFirstQuestion = _e.isFirstQuestion,isLastQuestion = _e.isLastQuestion,isEvaluatingQuestionVisibility = _e.isEvaluatingQuestionVisibility;
|
|
38015
|
+
var _g = useScrollHint(),showScrollHint = _g.showScrollHint,determineShowScrollHint = _g.determineShowScrollHint;
|
|
38018
38016
|
var submitAndMoveToNextQuestion = function () {
|
|
38019
38017
|
if (!isLastQuestion) {
|
|
38020
38018
|
handleGoToNextQuestion();
|
|
@@ -38033,7 +38031,8 @@ Check the top-level render call using <` + t + ">.");
|
|
|
38033
38031
|
return false;
|
|
38034
38032
|
};
|
|
38035
38033
|
var hideProgressIndicator = isEvaluatingQuestionVisibility && percentageCompleted === 100 ||
|
|
38036
|
-
form.questions.length === 1
|
|
38034
|
+
form.questions.length === 1 ||
|
|
38035
|
+
showProgressBar === false;
|
|
38037
38036
|
return jsxRuntime.exports.jsxs(jsxRuntime.exports.Fragment, { children: [jsxRuntime.exports.jsx("main", __assign({ id: "ahp_main_content_with_scroll_hint", className: layoutClasses.main_content }, { children: jsxRuntime.exports.jsxs("div", __assign({ className: "".concat(classes$3.awell_wizard_form, " ").concat(classes$3.container) }, { children: [!hideProgressIndicator && jsxRuntime.exports.jsx("div", __assign({ className: classes$3.form_progress }, { children: jsxRuntime.exports.jsx(ProgressIndicator, { percentageCompleted: percentageCompleted }) })), isEvaluatingQuestionVisibility ||
|
|
38038
38037
|
(currentQuestion === null || currentQuestion === void 0 ? void 0 : currentQuestion.id) === undefined ? jsxRuntime.exports.jsx("div", __assign({ className: classes$3.loadingContainer }, { children: jsxRuntime.exports.jsx(LoadActivityPlaceholder, {}) })) : jsxRuntime.exports.jsx(jsxRuntime.exports.Fragment, { children: jsxRuntime.exports.jsxs("div", __assign({ className: classes$3.wizard_form }, { children: [jsxRuntime.exports.jsx(Question, { question: currentQuestion, control: control, getValues: getValues, errors: errors, labels: questionLabels, submitAndMoveToNextQuestion: submitAndMoveToNextQuestion, inputAutoFocus: true, shouldAutoProgress: shouldAutoProgress }, currentQuestion.id), (form === null || form === void 0 ? void 0 : form.trademark) && jsxRuntime.exports.jsx("div", __assign({ className: "".concat(classes$3.trademark, " ").concat(classes$3.conversational) }, { children: form.trademark }))] })) })] })) })), jsxRuntime.exports.jsx(HostedPageFooter, __assign({ showScrollHint: showScrollHint }, { children: !isEvaluatingQuestionVisibility && jsxRuntime.exports.jsxs("div", __assign({ className: "".concat(classes$3.conversational_button_wrapper, " ").concat(classes$3.container) }, { children: [jsxRuntime.exports.jsx("div", { children: !isFirstQuestion && jsxRuntime.exports.jsx(Button, __assign({ variant: "tertiary", onClick: handleGoToPrevQuestion, "data-cy": "navigateToPrevQuestionButton" }, { children: buttonLabels.prev })) }), isLastQuestion ? jsxRuntime.exports.jsx(Button, __assign({ onClick: submitForm, type: "submit", "data-cy": "submitFormButton", disabled: isSubmittingForm }, { children: buttonLabels.submit })) : jsxRuntime.exports.jsx(Button, __assign({ variant: "secondary", onClick: handleGoToNextQuestion, "data-cy": "navigateToNextQuestionButton" }, { children: buttonLabels.next }))] })) }))] });
|
|
38039
38038
|
};
|
|
@@ -38058,10 +38057,7 @@ Check the top-level render call using <` + t + ">.");
|
|
|
38058
38057
|
}, []);
|
|
38059
38058
|
return jsxRuntime.exports.jsxs(jsxRuntime.exports.Fragment, { children: [jsxRuntime.exports.jsx("main", __assign({ id: "ahp_main_content_with_scroll_hint", className: "".concat(layoutClasses.main_content, " ").concat(classes$3.traditional_form) }, { children: jsxRuntime.exports.jsxs("div", __assign({ className: "".concat(classes$3.container, " ").concat(classes$3.traditional_container) }, { children: [!questionWithVisiblity ? jsxRuntime.exports.jsx("div", __assign({ className: classes$3.loadingContainer }, { children: jsxRuntime.exports.jsx(LoadActivityPlaceholder, {}) })) : jsxRuntime.exports.jsx("div", { children: jsxRuntime.exports.jsx("div", { children: questionWithVisiblity.
|
|
38060
38059
|
filter(function (vb) {return vb.visible;}).
|
|
38061
|
-
map(function (visibleQuestion) {return jsxRuntime.exports.jsx("div", __assign({ className: "".concat(classes$3.
|
|
38062
|
-
exports.UserQuestionType.Slider ?
|
|
38063
|
-
classes$3.traditional_form_question_slider :
|
|
38064
|
-
'') }, { children: jsxRuntime.exports.jsx(Question, { question: visibleQuestion, control: control, getValues: getValues, errors: errors, inputAutoFocus: false, onAnswerChange: updateQuestionVisibility }, visibleQuestion.id) }), visibleQuestion.id);}) }) }), (form === null || form === void 0 ? void 0 : form.trademark) && jsxRuntime.exports.jsx("div", __assign({ className: "".concat(classes$3.trademark, " ").concat(classes$3.conversational) }, { children: form.trademark }))] })) })), jsxRuntime.exports.jsx(HostedPageFooter, __assign({ showScrollHint: false }, { children: jsxRuntime.exports.jsxs("div", __assign({ className: "".concat(classes$3.traditional_button_wrapper) }, { children: [formHasErrors && jsxRuntime.exports.jsx("div", { children: jsxRuntime.exports.jsx(Text, __assign({ variant: "textSmall", color: "var(--awell-signalError100)" }, { children: errorLabels.formHasErrors })) }), jsxRuntime.exports.jsx("div", {}), jsxRuntime.exports.jsx(Button, __assign({ onClick: submitForm, type: "submit", "data-cy": "submitFormButton", disabled: isSubmittingForm }, { children: buttonLabels.submit }))] })) }))] });
|
|
38060
|
+
map(function (visibleQuestion) {return jsxRuntime.exports.jsx("div", __assign({ className: classes$3.traditional_form_question }, { children: jsxRuntime.exports.jsx(Question, { question: visibleQuestion, control: control, getValues: getValues, errors: errors, inputAutoFocus: false, onAnswerChange: updateQuestionVisibility }, visibleQuestion.id) }), visibleQuestion.id);}) }) }), (form === null || form === void 0 ? void 0 : form.trademark) && jsxRuntime.exports.jsx("div", __assign({ className: "".concat(classes$3.trademark, " ").concat(classes$3.conversational) }, { children: form.trademark }))] })) })), jsxRuntime.exports.jsx(HostedPageFooter, __assign({ showScrollHint: false }, { children: jsxRuntime.exports.jsxs("div", __assign({ className: "".concat(classes$3.traditional_button_wrapper) }, { children: [formHasErrors && jsxRuntime.exports.jsx("div", { children: jsxRuntime.exports.jsx(Text, __assign({ variant: "textSmall", color: "var(--awell-signalError100)" }, { children: errorLabels.formHasErrors })) }), jsxRuntime.exports.jsx("div", {}), jsxRuntime.exports.jsx(Button, __assign({ onClick: submitForm, type: "submit", "data-cy": "submitFormButton", disabled: isSubmittingForm }, { children: buttonLabels.submit }))] })) }))] });
|
|
38065
38061
|
};
|
|
38066
38062
|
|
|
38067
38063
|
var WizardForm = ConversationalForm;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { FormProps } from '../../../types/form';
|
|
3
|
-
export declare const ConversationalForm: ({ form, onSubmit, buttonLabels, evaluateDisplayConditions, errorLabels, questionLabels, storedAnswers, onAnswersChange, autoProgress, autosaveAnswers, }: FormProps) => JSX.Element;
|
|
3
|
+
export declare const ConversationalForm: ({ form, onSubmit, buttonLabels, evaluateDisplayConditions, errorLabels, questionLabels, storedAnswers, onAnswersChange, autoProgress, autosaveAnswers, showProgressBar, }: FormProps) => JSX.Element;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
export declare const WizardForm: ({ form, onSubmit, buttonLabels, evaluateDisplayConditions, errorLabels, questionLabels, storedAnswers, onAnswersChange, autoProgress, autosaveAnswers, }: import("../../..").FormProps) => JSX.Element;
|
|
2
|
+
export declare const WizardForm: ({ form, onSubmit, buttonLabels, evaluateDisplayConditions, errorLabels, questionLabels, storedAnswers, onAnswersChange, autoProgress, autosaveAnswers, showProgressBar, }: import("../../..").FormProps) => JSX.Element;
|