('');
16 | }
17 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/icons/icons.component.scss:
--------------------------------------------------------------------------------
1 | @use '../../../../../ship-ui/styles/helpers.scss' as *;
2 |
3 | :host {
4 | display: flex;
5 | flex-direction: column;
6 | gap: p2r(20);
7 | padding: p2r(40);
8 | width: calc(100% - var(--sh-sidenav));
9 | }
10 |
11 | h1 {
12 | font: var(--title-20B);
13 | }
14 |
15 | h3 {
16 | font: var(--paragraph-10);
17 | }
18 |
19 | app-property-viewer {
20 | section {
21 | display: flex;
22 | flex-direction: column;
23 | align-items: flex-start;
24 | gap: p2r(8);
25 | }
26 | }
27 |
28 | .example {
29 | display: flex;
30 | flex-direction: column;
31 | gap: p2r(8);
32 | }
33 |
34 | .content {
35 | display: flex;
36 | flex-direction: column;
37 | width: 100%;
38 | gap: p2r(20);
39 | }
40 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/input-mask/examples/base-input-mask/base-input-mask.component.scss:
--------------------------------------------------------------------------------
1 | :host {
2 | display: block;
3 | }
4 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/input-mask/input-mask.component.html:
--------------------------------------------------------------------------------
1 | Input Mask
2 |
3 |
4 |
5 | [shInputMask]
6 | You can pass a string or a function to the directive to set the input mask.
7 |
8 |
9 |
10 |
11 |
13 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/input-mask/input-mask.component.scss:
--------------------------------------------------------------------------------
1 | @use 'helpers' as *;
2 |
3 | :host {
4 | display: flex;
5 | flex-direction: column;
6 | gap: p2r(40);
7 | padding: p2r(40);
8 | }
9 |
10 | h3 {
11 | margin: 0;
12 | font: var(--title-30);
13 | }
14 |
15 | .example {
16 | display: flex;
17 | flex-direction: column;
18 | gap: p2r(32);
19 | padding: p2r(60 20);
20 | width: 100%;
21 | max-width: p2r(640);
22 | align-self: center;
23 | }
24 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/input-mask/input-mask.component.ts:
--------------------------------------------------------------------------------
1 | import { ChangeDetectionStrategy, Component } from '@angular/core';
2 | import { PreviewerComponent } from '../../previewer/previewer.component';
3 | import { PropertyViewerComponent } from '../../property-viewer/property-viewer.component';
4 | import { BaseInputMaskComponent } from './examples/base-input-mask/base-input-mask.component';
5 |
6 | @Component({
7 | selector: 'app-input-mask',
8 | imports: [BaseInputMaskComponent, PropertyViewerComponent, PreviewerComponent],
9 | templateUrl: './input-mask.component.html',
10 | styleUrl: './input-mask.component.scss',
11 | changeDetection: ChangeDetectionStrategy.OnPush,
12 | })
13 | export default class InputMaskComponent {}
14 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/lists/examples/base-list-example/base-list-example.component.scss:
--------------------------------------------------------------------------------
1 | sh-list {
2 | width: 400px;
3 | }
4 |
5 | :host {
6 | display: block;
7 | padding: 24px;
8 | }
9 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/lists/lists.component.scss:
--------------------------------------------------------------------------------
1 | @use '../../../../../ship-ui/styles/helpers.scss' as *;
2 |
3 | :host {
4 | @include wrapper();
5 | }
6 |
7 | sh-list {
8 | width: 500px;
9 | }
10 |
11 | .example {
12 | padding: 40px;
13 | }
14 |
15 | .l20-example {
16 | padding: 40px;
17 | background-color: var(--base-2);
18 | }
19 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/menus/examples/base-menu-example/base-menu-example.component.html:
--------------------------------------------------------------------------------
1 |
2 | Open menu
3 |
4 | @for (item of menuItems; track item.value) {
5 |
6 | {{ item.label }}
7 |
8 | }
9 |
10 |
11 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/menus/examples/base-menu-example/base-menu-example.component.scss:
--------------------------------------------------------------------------------
1 | .menu {
2 | display: flex;
3 | gap: 8px;
4 | }
5 |
6 | button.selected {
7 | font-weight: bold;
8 | color: #1976d2;
9 | }
10 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/menus/examples/base-menu-example/base-menu-example.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { ShipButtonComponent, ShipMenuComponent } from 'ship-ui';
3 |
4 | @Component({
5 | selector: 'base-menu-example',
6 | templateUrl: './base-menu-example.component.html',
7 | styleUrls: ['./base-menu-example.component.scss'],
8 | imports: [ShipMenuComponent, ShipButtonComponent],
9 | })
10 | export class BaseMenuExampleComponent {
11 | menuItems = [
12 | { label: 'Home', value: 'home' },
13 | { label: 'Profile', value: 'profile' },
14 | { label: 'Settings', value: 'settings' },
15 | ];
16 |
17 | someFunction(item: any) {
18 | alert(item.label);
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/menus/examples/icon-suffix-menu/icon-suffix-menu.component.html:
--------------------------------------------------------------------------------
1 |
2 | Open menu
3 |
4 | @for (item of menuItems; track item.value) {
5 |
6 | circle
7 | {{ item.label }}
8 | {{ item.hotkey }}
9 |
10 | }
11 |
12 |
13 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/menus/examples/icon-suffix-menu/icon-suffix-menu.component.scss:
--------------------------------------------------------------------------------
1 | .menu {
2 | display: flex;
3 | gap: 8px;
4 | }
5 |
6 | button.selected {
7 | font-weight: bold;
8 | color: #1976d2;
9 | }
10 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/menus/examples/multi-layer-menu-example/multi-layer-menu-example.component.scss:
--------------------------------------------------------------------------------
1 | .menu {
2 | display: flex;
3 | gap: 8px;
4 | position: relative;
5 | }
6 |
7 | button.selected {
8 | font-weight: bold;
9 | color: #1976d2;
10 | }
11 |
12 | .submenu {
13 | display: flex;
14 | flex-direction: column;
15 | position: absolute;
16 | background: #fff;
17 | border: 1px solid #eee;
18 | margin-top: 4px;
19 | z-index: 1;
20 | }
21 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/menus/examples/search-menu-example/search-menu-example.component.html:
--------------------------------------------------------------------------------
1 |
2 | Open searchable menu
3 |
4 | @for (item of filteredItems; track item.value) {
5 |
6 | {{ item.label }}
7 |
8 | }
9 |
10 |
11 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/menus/examples/search-menu-example/search-menu-example.component.scss:
--------------------------------------------------------------------------------
1 | .menu-search {
2 | display: flex;
3 | flex-direction: column;
4 | gap: 8px;
5 | width: 220px;
6 | }
7 |
8 | .menu {
9 | display: flex;
10 | flex-direction: column;
11 | gap: 4px;
12 | }
13 |
14 | button.selected {
15 | font-weight: bold;
16 | color: #1976d2;
17 | }
18 |
19 | input[type='text'] {
20 | padding: 4px 8px;
21 | border: 1px solid #ccc;
22 | border-radius: 4px;
23 | }
24 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/menus/examples/toggle-select-menu-example/toggle-select-menu-example.component.html:
--------------------------------------------------------------------------------
1 |
2 | Open toggle select menu
3 |
4 | @for (item of menuItems; track item.value) {
5 |
6 |
7 | {{ item.label }}
8 |
9 |
10 | }
11 |
12 |
13 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/menus/examples/toggle-select-menu-example/toggle-select-menu-example.component.scss:
--------------------------------------------------------------------------------
1 | .menu {
2 | display: flex;
3 | flex-direction: column;
4 | gap: 8px;
5 | }
6 |
7 | button.selected {
8 | font-weight: bold;
9 | color: #1976d2;
10 | }
11 |
12 | .checkbox {
13 | margin-right: 8px;
14 | }
15 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/menus/menus.component.scss:
--------------------------------------------------------------------------------
1 | @use 'helpers' as *;
2 |
3 | :host {
4 | display: flex;
5 | flex-direction: column;
6 | gap: p2r(20);
7 | padding: p2r(40);
8 | width: calc(100% - var(--sh-sidenav));
9 | }
10 |
11 | h1 {
12 | font: var(--title-20B);
13 | }
14 |
15 | h3 {
16 | font: var(--paragraph-10);
17 | }
18 |
19 | .example {
20 | display: flex;
21 | flex-wrap: wrap;
22 | align-items: flex-start;
23 | justify-content: flex-start;
24 | gap: p2r(8);
25 | }
26 |
27 | .content {
28 | display: flex;
29 | flex-direction: column;
30 | width: 100%;
31 | gap: p2r(20);
32 | }
33 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/popovers/examples/button-popover/button-popover.component.html:
--------------------------------------------------------------------------------
1 |
2 | hello im a trigger plain button trigger
3 | hello im content
4 |
5 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/popovers/examples/button-popover/button-popover.component.scss:
--------------------------------------------------------------------------------
1 | :host {
2 | display: block;
3 | }
4 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/popovers/examples/button-popover/button-popover.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { ShipPopoverComponent } from 'ship-ui';
3 |
4 | @Component({
5 | selector: 'button-popover',
6 | standalone: true,
7 | imports: [ShipPopoverComponent],
8 | templateUrl: './button-popover.component.html',
9 | styleUrl: './button-popover.component.scss',
10 | })
11 | export class ButtonPopoverComponent {}
12 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/popovers/examples/sh-button-popover/sh-button-popover.component.html:
--------------------------------------------------------------------------------
1 |
2 | hello im a shButton trigger
3 | hello im content
4 |
5 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/popovers/examples/sh-button-popover/sh-button-popover.component.scss:
--------------------------------------------------------------------------------
1 | :host {
2 | display: block;
3 | }
4 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/popovers/examples/sh-button-popover/sh-button-popover.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { ShipButtonComponent, ShipPopoverComponent } from 'ship-ui';
3 |
4 | @Component({
5 | selector: 'sh-button-popover',
6 | standalone: true,
7 | imports: [ShipPopoverComponent, ShipButtonComponent],
8 | templateUrl: './sh-button-popover.component.html',
9 | styleUrl: './sh-button-popover.component.scss',
10 | })
11 | export class ShButtonPopoverComponent {}
12 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/popovers/examples/trigger-attribute-popover/trigger-attribute-popover.component.html:
--------------------------------------------------------------------------------
1 |
2 | hello im a div trigger
3 | hello im content
4 |
5 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/popovers/examples/trigger-attribute-popover/trigger-attribute-popover.component.scss:
--------------------------------------------------------------------------------
1 | :host {
2 | display: block;
3 | }
4 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/popovers/examples/trigger-attribute-popover/trigger-attribute-popover.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { ShipPopoverComponent } from 'ship-ui';
3 |
4 | @Component({
5 | selector: 'trigger-attribute-popover',
6 | standalone: true,
7 | imports: [ShipPopoverComponent],
8 | templateUrl: './trigger-attribute-popover.component.html',
9 | styleUrl: './trigger-attribute-popover.component.scss',
10 | })
11 | export class TriggerAttributePopoverComponent {}
12 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/popovers/popovers.component.scss:
--------------------------------------------------------------------------------
1 | @use '../../../../../ship-ui/styles/helpers.scss' as *;
2 |
3 | :host {
4 | display: flex;
5 | flex-direction: column;
6 | gap: p2r(20);
7 | padding: p2r(40);
8 | width: calc(100% - var(--sh-sidenav));
9 | }
10 |
11 | h1 {
12 | font: var(--title-20B);
13 | }
14 |
15 | h3 {
16 | font: var(--paragraph-10);
17 | }
18 |
19 | app-property-viewer {
20 | section {
21 | display: flex;
22 | flex-direction: column;
23 | align-items: flex-start;
24 | gap: p2r(8);
25 | }
26 | }
27 |
28 | .example {
29 | display: flex;
30 | flex-direction: column;
31 | gap: p2r(8);
32 | }
33 |
34 | .content {
35 | display: flex;
36 | flex-direction: column;
37 | width: 100%;
38 | gap: p2r(20);
39 | }
40 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/progress-bars/examples/base-progress-bar/base-progress-bar.component.html:
--------------------------------------------------------------------------------
1 |
2 | Always show indicator:
3 |
5 | Selected: {{ value() }}
6 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/range-sliders/examples/always-show-indicator-range-slider/always-show-indicator-range-slider.component.scss:
--------------------------------------------------------------------------------
1 | :host {
2 | display: block;
3 | }
4 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/range-sliders/examples/always-show-indicator-range-slider/always-show-indicator-range-slider.component.ts:
--------------------------------------------------------------------------------
1 | import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
2 | import { FormsModule } from '@angular/forms';
3 | import { ShipRangeSliderComponent } from 'ship-ui';
4 |
5 | @Component({
6 | selector: 'app-always-show-indicator-range-slider',
7 | standalone: true,
8 | imports: [FormsModule, ShipRangeSliderComponent],
9 | templateUrl: './always-show-indicator-range-slider.component.html',
10 | styleUrl: './always-show-indicator-range-slider.component.scss',
11 | changeDetection: ChangeDetectionStrategy.OnPush,
12 | })
13 | export class AlwaysShowIndicatorRangeSliderComponent {
14 | value = signal(33);
15 | }
16 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/range-sliders/examples/base-range-slider/base-range-slider.component.html:
--------------------------------------------------------------------------------
1 |
2 | Select a value:
3 |
5 | Selected: {{ value() }}
6 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/range-sliders/examples/base-range-slider/base-range-slider.component.scss:
--------------------------------------------------------------------------------
1 | :host {
2 | display: block;
3 | }
4 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/range-sliders/examples/base-range-slider/base-range-slider.component.ts:
--------------------------------------------------------------------------------
1 | import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
2 | import { FormsModule } from '@angular/forms';
3 | import { ShipRangeSliderComponent } from 'ship-ui';
4 |
5 | @Component({
6 | selector: 'app-base-range-slider',
7 | standalone: true,
8 | imports: [FormsModule, ShipRangeSliderComponent],
9 | templateUrl: './base-range-slider.component.html',
10 | styleUrl: './base-range-slider.component.scss',
11 | changeDetection: ChangeDetectionStrategy.OnPush,
12 | })
13 | export class BaseRangeSliderComponent {
14 | value = signal(50);
15 | }
16 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/range-sliders/examples/disabled-range-slider/disabled-range-slider.component.html:
--------------------------------------------------------------------------------
1 |
2 | Disabled value:
3 |
5 | Selected: {{ value() }}
6 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/range-sliders/examples/disabled-range-slider/disabled-range-slider.component.scss:
--------------------------------------------------------------------------------
1 | :host {
2 | display: block;
3 | }
4 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/range-sliders/examples/disabled-range-slider/disabled-range-slider.component.ts:
--------------------------------------------------------------------------------
1 | import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
2 | import { FormsModule } from '@angular/forms';
3 | import { ShipRangeSliderComponent } from 'ship-ui';
4 |
5 | @Component({
6 | selector: 'app-disabled-range-slider',
7 | standalone: true,
8 | imports: [FormsModule, ShipRangeSliderComponent],
9 | templateUrl: './disabled-range-slider.component.html',
10 | styleUrl: './disabled-range-slider.component.scss',
11 | changeDetection: ChangeDetectionStrategy.OnPush,
12 | })
13 | export class DisabledRangeSliderComponent {
14 | value = signal(10);
15 | }
16 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/range-sliders/examples/float-range-slider/float-range-slider.component.html:
--------------------------------------------------------------------------------
1 |
2 | Decimal value:
3 |
5 | Selected: {{ value() | number: '1.2-2' }}
6 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/range-sliders/examples/float-range-slider/float-range-slider.component.scss:
--------------------------------------------------------------------------------
1 | :host {
2 | display: block;
3 | }
4 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/range-sliders/examples/float-range-slider/float-range-slider.component.ts:
--------------------------------------------------------------------------------
1 | import { DecimalPipe } from '@angular/common';
2 | import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
3 | import { FormsModule } from '@angular/forms';
4 | import { ShipRangeSliderComponent } from 'ship-ui';
5 |
6 | @Component({
7 | selector: 'app-float-range-slider',
8 | standalone: true,
9 | imports: [FormsModule, ShipRangeSliderComponent, DecimalPipe],
10 | templateUrl: './float-range-slider.component.html',
11 | styleUrl: './float-range-slider.component.scss',
12 | changeDetection: ChangeDetectionStrategy.OnPush,
13 | })
14 | export class FloatRangeSliderComponent {
15 | value = signal(0.12);
16 | }
17 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/range-sliders/examples/range-slider-sandbox/range-slider-sandbox.component.scss:
--------------------------------------------------------------------------------
1 | @use 'helpers' as *;
2 |
3 | :host {
4 | display: block;
5 | }
6 |
7 | .controls {
8 | display: flex;
9 | flex-direction: column;
10 | gap: p2r(8);
11 | border-bottom: 1px solid var(--base-4);
12 | padding: p2r(20);
13 | background-color: var(--base-2);
14 | }
15 |
16 | div {
17 | padding: p2r(20);
18 | }
19 |
20 | .row {
21 | display: flex;
22 | padding: 0;
23 | gap: p2r(8);
24 | }
25 |
26 | .fields {
27 | display: grid;
28 | grid-template-columns: 1fr 1fr 1fr 1fr;
29 | padding: 0;
30 | gap: p2r(8);
31 | }
32 |
33 | .sandbox-example {
34 | display: flex;
35 | flex-direction: column;
36 | gap: p2r(8);
37 | padding: p2r(60 20);
38 | width: 100%;
39 | max-width: p2r(640);
40 | align-self: center;
41 | }
42 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/range-sliders/examples/reactive-range-slider/reactive-range-slider.component.html:
--------------------------------------------------------------------------------
1 |
2 | Select a value (Reactive Form):
3 |
5 | Selected: {{ control.value }}
6 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/range-sliders/examples/reactive-range-slider/reactive-range-slider.component.scss:
--------------------------------------------------------------------------------
1 | :host {
2 | display: block;
3 | }
4 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/range-sliders/examples/reactive-range-slider/reactive-range-slider.component.ts:
--------------------------------------------------------------------------------
1 | import { ChangeDetectionStrategy, Component } from '@angular/core';
2 | import { FormControl, ReactiveFormsModule } from '@angular/forms';
3 | import { ShipRangeSliderComponent } from 'ship-ui';
4 |
5 | @Component({
6 | selector: 'app-reactive-range-slider',
7 | standalone: true,
8 | imports: [ReactiveFormsModule, ShipRangeSliderComponent],
9 | templateUrl: './reactive-range-slider.component.html',
10 | styleUrl: './reactive-range-slider.component.scss',
11 | changeDetection: ChangeDetectionStrategy.OnPush,
12 | })
13 | export class ReactiveRangeSliderComponent {
14 | control = new FormControl(25);
15 | }
16 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/range-sliders/examples/readonly-range-slider/readonly-range-slider.component.html:
--------------------------------------------------------------------------------
1 |
2 | Readonly value:
3 |
5 | Selected: {{ value() }}
6 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/range-sliders/examples/readonly-range-slider/readonly-range-slider.component.scss:
--------------------------------------------------------------------------------
1 | :host {
2 | display: block;
3 | }
4 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/range-sliders/examples/readonly-range-slider/readonly-range-slider.component.ts:
--------------------------------------------------------------------------------
1 | import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
2 | import { FormsModule } from '@angular/forms';
3 | import { ShipRangeSliderComponent } from 'ship-ui';
4 |
5 | @Component({
6 | selector: 'app-readonly-range-slider',
7 | standalone: true,
8 | imports: [FormsModule, ShipRangeSliderComponent],
9 | templateUrl: './readonly-range-slider.component.html',
10 | styleUrl: './readonly-range-slider.component.scss',
11 | changeDetection: ChangeDetectionStrategy.OnPush,
12 | })
13 | export class ReadonlyRangeSliderComponent {
14 | value = signal(42);
15 | }
16 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/range-sliders/examples/unit-range-slider/unit-range-slider.component.html:
--------------------------------------------------------------------------------
1 |
2 | Value with unit:
3 |
5 | Selected: {{ value() }}%
6 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/range-sliders/examples/unit-range-slider/unit-range-slider.component.scss:
--------------------------------------------------------------------------------
1 | :host {
2 | display: block;
3 | }
4 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/range-sliders/examples/unit-range-slider/unit-range-slider.component.ts:
--------------------------------------------------------------------------------
1 | import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
2 | import { FormsModule } from '@angular/forms';
3 | import { ShipRangeSliderComponent } from 'ship-ui';
4 |
5 | @Component({
6 | selector: 'app-unit-range-slider',
7 | standalone: true,
8 | imports: [FormsModule, ShipRangeSliderComponent],
9 | templateUrl: './unit-range-slider.component.html',
10 | styleUrl: './unit-range-slider.component.scss',
11 | changeDetection: ChangeDetectionStrategy.OnPush,
12 | })
13 | export class UnitRangeSliderComponent {
14 | value = signal(75);
15 | }
16 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/range-sliders/range-sliders.component.scss:
--------------------------------------------------------------------------------
1 | @use '../../../../../ship-ui/styles/helpers.scss' as *;
2 |
3 | :host {
4 | display: flex;
5 | flex-direction: column;
6 | gap: p2r(20);
7 | padding: p2r(40);
8 | width: calc(100% - var(--sh-sidenav));
9 | }
10 |
11 | h1 {
12 | font: var(--title-20B);
13 | }
14 |
15 | h3 {
16 | font: var(--paragraph-10);
17 | }
18 |
19 | .example {
20 | width: 100%;
21 | max-width: p2r(600);
22 | display: flex;
23 | flex-direction: column;
24 | gap: p2r(8);
25 | }
26 |
27 | .sandbox-example {
28 | .example {
29 | max-width: initial;
30 | }
31 | }
32 |
33 | .content {
34 | display: flex;
35 | flex-direction: column;
36 | width: 100%;
37 | gap: p2r(20);
38 | }
39 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/selects/examples/base-select/base-select.component.html:
--------------------------------------------------------------------------------
1 |
2 | Favorite food
3 | desktop-tower
4 |
5 |
7 |
8 | Selected: {{ selected() }}
9 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/selects/examples/base-select/base-select.component.scss:
--------------------------------------------------------------------------------
1 | :host {
2 | display: block;
3 | }
4 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/selects/examples/disabled-select/disabled-select.component.html:
--------------------------------------------------------------------------------
1 |
2 | Favorite food (disabled)
3 |
5 |
6 | Selected: {{ selected() }}
7 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/selects/examples/disabled-select/disabled-select.component.scss:
--------------------------------------------------------------------------------
1 | .example {
2 | margin-bottom: 16px;
3 | }
4 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/selects/examples/disabled-select/disabled-select.component.ts:
--------------------------------------------------------------------------------
1 | import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
2 | import { FormsModule } from '@angular/forms';
3 | import { ShipSelectComponent } from 'ship-ui';
4 |
5 | @Component({
6 | selector: 'app-disabled-select',
7 | standalone: true,
8 | imports: [FormsModule, ShipSelectComponent],
9 | templateUrl: './disabled-select.component.html',
10 | styleUrl: './disabled-select.component.scss',
11 | changeDetection: ChangeDetectionStrategy.OnPush,
12 | })
13 | export class DisabledSelectComponent {
14 | options = signal([
15 | { value: 'pizza', label: 'Pizza' },
16 | { value: 'burger', label: 'Burger' },
17 | { value: 'sushi', label: 'Sushi' },
18 | ]);
19 | selected = signal('pizza');
20 | }
21 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/selects/examples/inline-search-multiple-select/inline-search-multiple-select.component.html:
--------------------------------------------------------------------------------
1 |
2 | Favorite foods (inline search, multiple)
3 |
5 |
6 | Selected: {{ selected() | json }}
7 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/selects/examples/inline-search-multiple-select/inline-search-multiple-select.component.scss:
--------------------------------------------------------------------------------
1 | .example {
2 | margin-bottom: 16px;
3 | }
4 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/selects/examples/inline-search-select/inline-search-select.component.html:
--------------------------------------------------------------------------------
1 |
2 | Favorite food (inline search)
3 |
5 |
6 | Selected: {{ selected() }}
7 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/selects/examples/inline-search-select/inline-search-select.component.scss:
--------------------------------------------------------------------------------
1 | .example {
2 | margin-bottom: 16px;
3 | }
4 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/selects/examples/lazy-search-multiple-select/lazy-search-multiple-select.component.html:
--------------------------------------------------------------------------------
1 |
8 | Favorite foods (lazy search, multiple)
9 |
11 |
12 | @if (resource.isLoading()) {
13 | Searching: {{ lazySearchOption() }}
14 | } @else {
15 | Selected: {{ lazySearchOption() | json }}
16 | }
17 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/selects/examples/lazy-search-multiple-select/lazy-search-multiple-select.component.scss:
--------------------------------------------------------------------------------
1 | .example {
2 | margin-bottom: 16px;
3 | }
4 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/selects/examples/lazy-search-select/lazy-search-select.component.html:
--------------------------------------------------------------------------------
1 |
2 | Favorite food (lazy search)
3 |
5 |
6 | @if (resource.isLoading()) {
7 | Searching: {{ lazySearchOption() }}
8 | } @else {
9 | Selected: {{ lazySearchOption() }}
10 | }
11 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/selects/examples/lazy-search-select/lazy-search-select.component.scss:
--------------------------------------------------------------------------------
1 | .example {
2 | margin-bottom: 16px;
3 | }
4 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/selects/examples/multiple-select-as-text/multiple-select-as-text.component.html:
--------------------------------------------------------------------------------
1 |
11 | Favorite foods (multiple)
12 |
13 |
15 |
16 | Selected: {{ selected() | json }}
17 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/selects/examples/multiple-select-as-text/multiple-select-as-text.component.scss:
--------------------------------------------------------------------------------
1 | .example {
2 | margin-bottom: 16px;
3 | }
4 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/selects/examples/multiple-select/multiple-select.component.html:
--------------------------------------------------------------------------------
1 |
2 | Favorite foods (multiple)
3 |
4 |
6 |
7 | Selected: {{ selected() | json }}
8 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/selects/examples/multiple-select/multiple-select.component.scss:
--------------------------------------------------------------------------------
1 | .example {
2 | margin-bottom: 16px;
3 | }
4 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/selects/examples/object-select/object-select.component.html:
--------------------------------------------------------------------------------
1 |
7 | Favorite food (object options, not clearable)
8 |
10 |
11 | Selected: {{ selected() }}
12 | {{ selectedObject() | json }}
13 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/selects/examples/object-select/object-select.component.scss:
--------------------------------------------------------------------------------
1 | .example {
2 | margin-bottom: 16px;
3 | }
4 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/selects/examples/option-template-select/option-template-select.component.html:
--------------------------------------------------------------------------------
1 |
2 | Favorite food (custom option template)
3 |
5 | {{ option.emoji }} {{ option.label }}
6 |
7 |
8 |
9 | Selected: {{ selected() }}
10 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/selects/examples/option-template-select/option-template-select.component.scss:
--------------------------------------------------------------------------------
1 | .example {
2 | margin-bottom: 16px;
3 | }
4 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/selects/examples/placeholder-template-select/placeholder-template-select.component.html:
--------------------------------------------------------------------------------
1 |
7 | Favorite food (custom option template)
8 |
10 |
11 |
12 | {{ option.emoji }} {{ option.label }}
13 |
14 |
15 |
16 | Hell im a custom placeholder template 🙂↔️🙂↔️
17 |
18 |
19 | Selected: {{ selected() }}
20 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/selects/examples/placeholder-template-select/placeholder-template-select.component.scss:
--------------------------------------------------------------------------------
1 | .example {
2 | margin-bottom: 16px;
3 | }
4 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/selects/examples/reactive-select-disabled/reactive-select-disabled.component.html:
--------------------------------------------------------------------------------
1 |
2 | Favorite food (reactive form)
3 |
4 |
6 |
7 | Selected: {{ control.value }}
8 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/selects/examples/reactive-select-disabled/reactive-select-disabled.component.scss:
--------------------------------------------------------------------------------
1 | .example {
2 | margin-bottom: 16px;
3 | }
4 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/selects/examples/reactive-select/reactive-select-example.component.html:
--------------------------------------------------------------------------------
1 |
2 | Favorite food (reactive form)
3 |
4 |
6 |
7 | Selected: {{ control.value }}
8 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/selects/examples/reactive-select/reactive-select-example.component.scss:
--------------------------------------------------------------------------------
1 | .example {
2 | margin-bottom: 16px;
3 | }
4 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/selects/examples/readonly-select/readonly-select.component.html:
--------------------------------------------------------------------------------
1 |
2 | Favorite food (readonly)
3 |
5 |
6 | Selected: {{ selected() }}
7 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/selects/examples/readonly-select/readonly-select.component.scss:
--------------------------------------------------------------------------------
1 | .example {
2 | margin-bottom: 16px;
3 | }
4 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/selects/examples/readonly-select/readonly-select.component.ts:
--------------------------------------------------------------------------------
1 | import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
2 | import { FormsModule } from '@angular/forms';
3 | import { ShipSelectComponent } from 'ship-ui';
4 |
5 | @Component({
6 | selector: 'app-readonly-select',
7 | standalone: true,
8 | imports: [FormsModule, ShipSelectComponent],
9 | templateUrl: './readonly-select.component.html',
10 | styleUrl: './readonly-select.component.scss',
11 | changeDetection: ChangeDetectionStrategy.OnPush,
12 | })
13 | export class ReadonlySelectComponent {
14 | options = signal([
15 | { value: 'pizza', label: 'Pizza' },
16 | { value: 'burger', label: 'Burger' },
17 | { value: 'sushi', label: 'Sushi' },
18 | ]);
19 | selected = signal('pizza');
20 | }
21 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/selects/selects.component.scss:
--------------------------------------------------------------------------------
1 | @use 'helpers' as *;
2 |
3 | :host {
4 | display: flex;
5 | flex-direction: column;
6 | gap: p2r(40);
7 | padding: p2r(40);
8 | }
9 |
10 | h3 {
11 | margin: 0;
12 | font: var(--title-30);
13 | }
14 |
15 | .example {
16 | display: flex;
17 | flex-direction: column;
18 | gap: p2r(20);
19 | }
20 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/sheets/sheets.component.html:
--------------------------------------------------------------------------------
1 | @for (variant of variants; track $index) {
2 |
3 | {{ variant.length > 0 ? variant : 'Base' }}
4 |
5 | @for (color of colors; track $index) {
6 |
7 | circle
8 | hello im some content on a sheet
9 |
10 | }
11 |
12 | }
13 |
14 |
22 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/sheets/sheets.component.scss:
--------------------------------------------------------------------------------
1 | @use 'helpers' as *;
2 |
3 | :host {
4 | display: flex;
5 | flex-direction: column;
6 | gap: p2r(16);
7 | padding: p2r(40);
8 | }
9 |
10 | section {
11 | display: flex;
12 | flex-direction: column;
13 | gap: p2r(8);
14 | }
15 |
16 | div {
17 | padding: p2r(16);
18 | display: flex;
19 | align-items: center;
20 | gap: p2r(8);
21 | }
22 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/sheets/sheets.component.ts:
--------------------------------------------------------------------------------
1 | import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
2 | import { FormsModule } from '@angular/forms';
3 | import { ShipIconComponent } from 'ship-ui';
4 |
5 | @Component({
6 | selector: 'app-sheets',
7 | imports: [FormsModule, ShipIconComponent],
8 | templateUrl: './sheets.component.html',
9 | styleUrl: './sheets.component.scss',
10 | changeDetection: ChangeDetectionStrategy.OnPush,
11 | })
12 | export default class SheetsComponent {
13 | colors = ['', 'primary', 'accent', 'warn', 'error', 'success'];
14 | variants = ['', 'simple', 'outlined', 'flat', 'raised'];
15 |
16 | dynamicColor = signal('#2f54eb');
17 | }
18 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/sidenavs/examples/sandbox-sidenav/sandbox-sidenav.component.ts:
--------------------------------------------------------------------------------
1 | import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
2 | import { FormsModule } from '@angular/forms';
3 | import { ShipButtonGroupComponent, ShipSidenavComponent, ShipSidenavType, ShipToggleComponent } from 'ship-ui';
4 |
5 | @Component({
6 | selector: 'app-sandbox-sidenav',
7 | imports: [FormsModule, ShipSidenavComponent, ShipButtonGroupComponent, ShipToggleComponent],
8 | templateUrl: './sandbox-sidenav.component.html',
9 | styleUrl: './sandbox-sidenav.component.scss',
10 | changeDetection: ChangeDetectionStrategy.OnPush,
11 | })
12 | export class SandboxSidenavComponent {
13 | sidenavType = signal('simple');
14 | isNavOpen = signal(false);
15 | disableDrag = signal(false);
16 | }
17 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/sidenavs/sidenavs.component.scss:
--------------------------------------------------------------------------------
1 | @use '../../../../../ship-ui/styles/helpers.scss' as *;
2 |
3 | :host {
4 | display: flex;
5 | flex-direction: column;
6 | gap: p2r(20);
7 | padding: p2r(40);
8 | width: calc(100% - var(--sh-sidenav));
9 | }
10 |
11 | h1 {
12 | font: var(--title-20B);
13 | }
14 |
15 | h3 {
16 | font: var(--paragraph-10);
17 | }
18 |
19 | .example {
20 | display: flex;
21 | flex-direction: column;
22 | gap: p2r(8);
23 | width: p2r(500);
24 | }
25 |
26 | .content {
27 | display: flex;
28 | flex-direction: column;
29 | width: 100%;
30 | gap: p2r(20);
31 | }
32 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/sidenavs/sidenavs.component.ts:
--------------------------------------------------------------------------------
1 | import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
2 | import { PreviewerComponent } from '../../previewer/previewer.component';
3 | import { PropertyViewerComponent } from '../../property-viewer/property-viewer.component';
4 | import { SandboxSidenavComponent } from './examples/sandbox-sidenav/sandbox-sidenav.component';
5 |
6 | @Component({
7 | selector: 'app-sidenavs',
8 | imports: [SandboxSidenavComponent, PreviewerComponent, PropertyViewerComponent],
9 | templateUrl: './sidenavs.component.html',
10 | styleUrl: './sidenavs.component.scss',
11 | changeDetection: ChangeDetectionStrategy.OnPush,
12 | })
13 | export default class SidenavsComponent {
14 | sidenavType = signal('overlay');
15 | }
16 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/sortables/examples/base-sortable/base-sortable.component.html:
--------------------------------------------------------------------------------
1 |
2 | @for (todo of todos(); track $index) {
3 |
4 | {{ todo.title }}
8 | } @else {
9 | {{ todo.title }}
10 | }
11 |
12 | }
13 |
14 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/sortables/examples/base-sortable/base-sortable.component.scss:
--------------------------------------------------------------------------------
1 | .example {
2 | margin: 1rem 0;
3 | }
4 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/sortables/sortables.component.scss:
--------------------------------------------------------------------------------
1 | @use 'helpers' as *;
2 |
3 | :host {
4 | display: flex;
5 | flex-direction: column;
6 | gap: p2r(40);
7 | padding: p2r(40);
8 | }
9 |
10 | h3 {
11 | margin: 0;
12 | font: var(--title-30);
13 | }
14 |
15 | .example {
16 | display: flex;
17 | flex-direction: column;
18 | gap: p2r(20);
19 | }
20 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/spinners/examples/sandbox-spinner/sandbox-spinner.component.scss:
--------------------------------------------------------------------------------
1 | @use 'helpers' as *;
2 |
3 | :host {
4 | display: block;
5 | }
6 |
7 | .controls {
8 | display: flex;
9 | align-items: center;
10 | gap: p2r(16);
11 | padding: p2r(60 20);
12 | width: 100%;
13 | max-width: p2r(640);
14 | align-self: center;
15 | }
16 |
17 | sh-range-slider {
18 | width: p2r(320);
19 | }
20 |
21 | .content {
22 | display: flex;
23 | flex-direction: column;
24 | align-items: center;
25 | gap: p2r(16);
26 | }
27 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/spinners/examples/sandbox-spinner/sandbox-spinner.component.ts:
--------------------------------------------------------------------------------
1 | import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
2 | import { FormsModule } from '@angular/forms';
3 | import { ShipRangeSliderComponent, ShipSpinnerComponent } from 'ship-ui';
4 |
5 | @Component({
6 | selector: 'app-sandbox-spinner',
7 | imports: [FormsModule, ShipSpinnerComponent, ShipRangeSliderComponent],
8 | templateUrl: './sandbox-spinner.component.html',
9 | styleUrl: './sandbox-spinner.component.scss',
10 | changeDetection: ChangeDetectionStrategy.OnPush,
11 | })
12 | export class SandboxSpinnerComponent {
13 | value = signal(40);
14 | valueAsPixels = computed(() => `${this.value()}px`);
15 |
16 | thickness = signal(5);
17 | thicknessAsPixels = computed(() => `${this.thickness()}px`);
18 | }
19 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/spinners/spinners.component.scss:
--------------------------------------------------------------------------------
1 | @use 'helpers' as *;
2 |
3 | :host {
4 | display: flex;
5 | flex-direction: column;
6 | gap: p2r(40);
7 | padding: p2r(40);
8 | }
9 |
10 | h3 {
11 | margin: 0;
12 | font: var(--title-30);
13 | }
14 |
15 | .example {
16 | display: flex;
17 | flex-direction: column;
18 | gap: p2r(20);
19 | }
20 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/spinners/spinners.component.ts:
--------------------------------------------------------------------------------
1 | import { ChangeDetectionStrategy, Component } from '@angular/core';
2 | import { PreviewerComponent } from '../../previewer/previewer.component';
3 | import { PropertyViewerComponent } from '../../property-viewer/property-viewer.component';
4 | import { SandboxSpinnerComponent } from './examples/sandbox-spinner/sandbox-spinner.component';
5 |
6 | @Component({
7 | selector: 'app-spinners',
8 | imports: [SandboxSpinnerComponent, PropertyViewerComponent, PreviewerComponent],
9 | templateUrl: './spinners.component.html',
10 | styleUrl: './spinners.component.scss',
11 | changeDetection: ChangeDetectionStrategy.OnPush,
12 | })
13 | export default class SpinnerComponent {}
14 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/steppers/examples/custom-stepper/custom-steppers.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
6 |
7 |
10 |
11 |
14 |
15 |
16 | @let _activeStep = activeStep();
17 |
18 |
19 | @if (_activeStep === 0) {
20 |
Step 1 Content
21 | } @else if (_activeStep === 1) {
22 |
Step 2 Content
23 | } @else if (_activeStep === 2) {
24 |
Step 3 Content
25 | }
26 |
2 |
3 |
6 |
7 |
10 |
11 |
14 |
15 |
16 | @let _activeStep = activeStep();
17 |
18 |
19 | @if (_activeStep === 0) {
20 |
Step 1 Content
21 | } @else if (_activeStep === 1) {
22 |
Step 2 Content
23 | } @else if (_activeStep === 2) {
24 |
Step 3 Content
25 | }
26 |
2 |
3 |
6 |
7 |
10 |
11 |
14 |
15 |
18 |
19 |
22 |
23 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/steppers/examples/router-stepper/router-steppers.component.scss:
--------------------------------------------------------------------------------
1 | :host {
2 | display: flex;
3 | flex-direction: column;
4 | flex: 1 0;
5 | width: 100%;
6 | }
7 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/steppers/examples/router-stepper/router-steppers.component.ts:
--------------------------------------------------------------------------------
1 | import { ChangeDetectionStrategy, Component } from '@angular/core';
2 | import { RouterLink, RouterLinkActive } from '@angular/router';
3 | import { ShipRadioComponent, ShipStepperComponent } from 'ship-ui';
4 |
5 | @Component({
6 | selector: 'app-router-steppers',
7 | standalone: true,
8 | imports: [ShipStepperComponent, ShipRadioComponent, RouterLink, RouterLinkActive],
9 | templateUrl: './router-steppers.component.html',
10 | styleUrl: './router-steppers.component.scss',
11 | changeDetection: ChangeDetectionStrategy.OnPush,
12 | })
13 | export class SteppersComponent {}
14 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/steppers/examples/stepper-sandbox/stepper-sandbox.component.scss:
--------------------------------------------------------------------------------
1 | @use '../../../../../../../ship-ui/styles/helpers.scss' as *;
2 |
3 | :host {
4 | display: flex;
5 | flex-direction: column;
6 | gap: p2r(20);
7 | padding: 0;
8 | }
9 |
10 | .controls {
11 | display: flex;
12 | flex-direction: column;
13 | gap: p2r(8);
14 | border-bottom: 1px solid var(--base-4);
15 | padding: p2r(20);
16 | background-color: var(--base-2);
17 | }
18 |
19 | header {
20 | display: flex;
21 | flex-direction: column;
22 | gap: p2r(12);
23 |
24 | .row {
25 | display: flex;
26 | flex-wrap: wrap;
27 | gap: p2r(8);
28 | }
29 | }
30 |
31 | .sandbox {
32 | display: flex;
33 | flex-direction: column;
34 | padding: p2r(20);
35 | }
36 |
37 | .step-content {
38 | padding: p2r(20);
39 | }
40 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/steppers/step-1.component.ts:
--------------------------------------------------------------------------------
1 | import { ChangeDetectionStrategy, Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-step-1',
5 | imports: [],
6 | template: `
7 | step-1 works!
8 | `,
9 | changeDetection: ChangeDetectionStrategy.OnPush,
10 | })
11 | export default class Step1Component {}
12 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/steppers/step-2.component.ts:
--------------------------------------------------------------------------------
1 | import { ChangeDetectionStrategy, Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-step-2',
5 | imports: [],
6 | template: `
7 | step-2 works!
8 | `,
9 | changeDetection: ChangeDetectionStrategy.OnPush,
10 | })
11 | export default class Step2Component {}
12 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/steppers/step-3.component.ts:
--------------------------------------------------------------------------------
1 | import { ChangeDetectionStrategy, Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-step-3',
5 | imports: [],
6 | template: `
7 | step-3 works!
8 | `,
9 | changeDetection: ChangeDetectionStrategy.OnPush,
10 | })
11 | export default class Step3Component {}
12 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/steppers/step-4.component.ts:
--------------------------------------------------------------------------------
1 | import { ChangeDetectionStrategy, Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-step-4',
5 | imports: [],
6 | template: `
7 | step-4 works!
8 | `,
9 | changeDetection: ChangeDetectionStrategy.OnPush,
10 | })
11 | export default class Step4Component {}
12 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/steppers/step-5.component.ts:
--------------------------------------------------------------------------------
1 | import { ChangeDetectionStrategy, Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-step-5',
5 | imports: [],
6 | template: `
7 | step-5 works!
8 | `,
9 | changeDetection: ChangeDetectionStrategy.OnPush,
10 | })
11 | export default class Step5Component {}
12 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/steppers/steppers.component.scss:
--------------------------------------------------------------------------------
1 | @use 'helpers' as *;
2 |
3 | :host {
4 | display: flex;
5 | flex-direction: column;
6 | gap: p2r(20);
7 | padding: p2r(40);
8 | width: calc(100% - var(--sh-sidenav));
9 | }
10 |
11 | h1 {
12 | font: var(--title-20B);
13 | }
14 |
15 | h3 {
16 | font: var(--paragraph-10);
17 | }
18 |
19 | .example {
20 | display: flex;
21 | flex-wrap: wrap;
22 | align-items: flex-start;
23 | justify-content: flex-start;
24 | gap: p2r(8);
25 | }
26 |
27 | .content {
28 | display: flex;
29 | flex-direction: column;
30 | width: 100%;
31 | gap: p2r(20);
32 | }
33 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/tables/examples/base-table/base-table.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | @for (col of displayedColumns(); track col) {
4 | {{ col }}
5 | }
6 |
7 |
8 | @for (row of dataSource(); track $index) {
9 |
10 | @for (col of displayedColumns(); track col) {
11 | {{ row[col] }}
12 | }
13 |
14 | }
15 |
16 | No data available
17 |
18 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/tables/examples/multi-sticky-table/multi-sticky-table.component.scss:
--------------------------------------------------------------------------------
1 | @use 'helpers' as *;
2 |
3 | :host {
4 | display: block;
5 | }
6 |
7 | sh-table {
8 | // P2R is a helper function that converts pixels to rems
9 | max-height: p2r(500);
10 | max-width: p2r(640);
11 | }
12 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/tables/examples/multi-table-header/multi-table-header.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | @for (col of displayedColumns(); track col) {
4 | {{ col }}
5 | }
6 |
7 |
8 |
9 | @for (col of displayedColumns(); track col) {
10 | {{ col }}
11 | }
12 |
13 |
14 | @for (row of dataSource(); track $index) {
15 |
16 | @for (col of displayedColumns(); track col) {
17 | {{ row[col] }}
18 | }
19 |
20 | }
21 |
22 | No data available
23 |
24 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/tables/examples/multi-table-header/multi-table-header.component.scss:
--------------------------------------------------------------------------------
1 | @use 'helpers' as *;
2 |
3 | :host {
4 | display: block;
5 | }
6 |
7 | sh-table {
8 | // P2R is a helper function that converts pixels to rems
9 | max-height: p2r(500);
10 | max-width: p2r(680);
11 | }
12 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/tables/examples/resizing-table/resizing-table.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | @for (col of displayedColumns(); track col) {
4 | {{ col }}
5 | }
6 |
7 |
8 | @for (row of dataSource(); track $index) {
9 |
10 | @for (col of displayedColumns(); track col) {
11 | {{ row[col] }}
12 | }
13 |
14 | }
15 |
16 | No data available
17 |
18 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/tables/examples/resizing-table/resizing-table.component.scss:
--------------------------------------------------------------------------------
1 | @use 'helpers' as *;
2 |
3 | :host {
4 | display: block;
5 | }
6 |
7 | sh-table {
8 | // P2R is a helper function that converts pixels to rems
9 | max-height: p2r(500);
10 | max-width: p2r(680);
11 | }
12 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/tables/tables.component.scss:
--------------------------------------------------------------------------------
1 | @use 'helpers' as *;
2 |
3 | :host {
4 | display: flex;
5 | flex-direction: column;
6 | gap: p2r(20);
7 | padding: p2r(40);
8 | width: calc(100% - var(--sh-sidenav));
9 | }
10 |
11 | h1 {
12 | font: var(--title-20B);
13 | }
14 |
15 | h3 {
16 | font: var(--paragraph-10);
17 | }
18 |
19 | .example {
20 | display: flex;
21 | flex-wrap: wrap;
22 | align-items: flex-start;
23 | justify-content: flex-start;
24 | gap: p2r(8);
25 | }
26 |
27 | .content {
28 | display: flex;
29 | flex-direction: column;
30 | width: 100%;
31 | gap: p2r(20);
32 | }
33 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/tabs/examples/custom-tabs/custom-tabs.component.scss:
--------------------------------------------------------------------------------
1 | @use 'helpers' as *;
2 |
3 | :host {
4 | display: flex;
5 | flex-direction: column;
6 | flex: 1 0;
7 | width: 100%;
8 | }
9 |
10 | .tab-content {
11 | padding: p2r(20);
12 | }
13 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/tabs/examples/custom-tabs/custom-tabs.component.ts:
--------------------------------------------------------------------------------
1 | import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
2 | import { ShipIconComponent, ShipTabsComponent } from 'ship-ui';
3 | import TabComponent from '../../tab/tab.component';
4 |
5 | @Component({
6 | selector: 'app-custom-tabs',
7 | standalone: true,
8 | imports: [ShipTabsComponent, ShipIconComponent, TabComponent],
9 | templateUrl: './custom-tabs.component.html',
10 | styleUrls: ['./custom-tabs.component.scss'],
11 | changeDetection: ChangeDetectionStrategy.OnPush,
12 | })
13 | export class CustomTabsComponent {
14 | activeTab = signal('tab1');
15 | }
16 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/tabs/examples/default-tabs/default-tabs.component.scss:
--------------------------------------------------------------------------------
1 | @use 'helpers' as *;
2 |
3 | :host {
4 | display: flex;
5 | flex-direction: column;
6 | flex: 1 0;
7 | width: 100%;
8 | }
9 |
10 | .tab-content {
11 | padding: p2r(20);
12 | }
13 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/tabs/examples/default-tabs/default-tabs.component.ts:
--------------------------------------------------------------------------------
1 | import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
2 | import { ShipIconComponent, ShipTabsComponent } from 'ship-ui';
3 | import TabComponent from '../../tab/tab.component';
4 |
5 | @Component({
6 | selector: 'app-default-tabs',
7 | standalone: true,
8 | imports: [ShipTabsComponent, ShipIconComponent, TabComponent],
9 | templateUrl: './default-tabs.component.html',
10 | styleUrls: ['./default-tabs.component.scss'],
11 | changeDetection: ChangeDetectionStrategy.OnPush,
12 | })
13 | export class DefaultTabsComponent {
14 | activeTab = signal('tab1');
15 | }
16 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/tabs/examples/router-tabs/router-tabs.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | spinner
4 | Tab 1
5 |
6 |
7 |
8 | hand-palm
9 | Tab 2
10 |
11 |
12 |
13 | check
14 | Tab 3
15 |
16 |
17 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/tabs/examples/router-tabs/router-tabs.component.scss:
--------------------------------------------------------------------------------
1 | @use 'helpers' as *;
2 |
3 | :host {
4 | display: flex;
5 | flex-direction: column;
6 | flex: 1 0;
7 | width: 100%;
8 | }
9 |
10 | .tab-content {
11 | padding: p2r(20);
12 | }
13 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/tabs/examples/router-tabs/router-tabs.component.ts:
--------------------------------------------------------------------------------
1 | import { ChangeDetectionStrategy, Component } from '@angular/core';
2 | import { RouterLink, RouterLinkActive } from '@angular/router';
3 | import { ShipIconComponent, ShipTabsComponent } from 'ship-ui';
4 |
5 | @Component({
6 | selector: 'app-router-tabs',
7 | imports: [ShipTabsComponent, ShipIconComponent, RouterLinkActive, RouterLink],
8 | templateUrl: './router-tabs.component.html',
9 | styleUrl: './router-tabs.component.scss',
10 | changeDetection: ChangeDetectionStrategy.OnPush,
11 | })
12 | export class RouterTabsComponent {}
13 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/tabs/examples/tabs-sandbox/tabs-sandbox.component.scss:
--------------------------------------------------------------------------------
1 | @use '../../../../../../../ship-ui/styles/helpers.scss' as *;
2 |
3 | :host {
4 | display: flex;
5 | flex-direction: column;
6 | gap: p2r(20);
7 | padding: 0;
8 | }
9 |
10 | .controls {
11 | display: flex;
12 | flex-direction: column;
13 | gap: p2r(8);
14 | border-bottom: 1px solid var(--base-4);
15 | padding: p2r(20);
16 | background-color: var(--base-2);
17 | }
18 |
19 | header {
20 | display: flex;
21 | flex-direction: column;
22 | gap: p2r(12);
23 |
24 | .row {
25 | display: flex;
26 | flex-wrap: wrap;
27 | gap: p2r(8);
28 | }
29 | }
30 |
31 | .sandbox {
32 | display: flex;
33 | flex-direction: column;
34 | padding: p2r(20);
35 | }
36 |
37 | .tab-content {
38 | padding: p2r(20);
39 | }
40 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/tabs/tab/tab.component.html:
--------------------------------------------------------------------------------
1 | Tab with ID: {{ id() }}
2 |
3 | Open dialog
4 |
5 |
6 | Im a dialog
7 |
8 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/tabs/tab/tab.component.scss:
--------------------------------------------------------------------------------
1 | :host {
2 | display: block;
3 | }
4 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/tabs/tab/tab.component.ts:
--------------------------------------------------------------------------------
1 | import { ChangeDetectionStrategy, Component, input, TemplateRef, viewChild } from '@angular/core';
2 | import { ShipButtonComponent } from 'ship-ui';
3 |
4 | @Component({
5 | selector: 'app-tab',
6 | imports: [ShipButtonComponent],
7 | templateUrl: './tab.component.html',
8 | styleUrl: './tab.component.scss',
9 | changeDetection: ChangeDetectionStrategy.OnPush,
10 | })
11 | export default class TabComponent {
12 | id = input.required();
13 |
14 | myDialog = viewChild.required>('myDialog');
15 |
16 | openDialog() {}
17 | }
18 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/tabs/tabs.component.scss:
--------------------------------------------------------------------------------
1 | @use 'helpers' as *;
2 |
3 | :host {
4 | display: flex;
5 | flex-direction: column;
6 | gap: 40px;
7 | padding: 40px;
8 | }
9 |
10 | h3 {
11 | margin: 0;
12 | font: var(--title-30);
13 | }
14 |
15 | .example {
16 | display: flex;
17 | flex-direction: column;
18 | gap: 20px;
19 | max-width: 500px;
20 | width: 100%;
21 | }
22 |
23 | .content {
24 | display: flex;
25 | flex-direction: column;
26 | gap: p2r(20);
27 | }
28 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/toggles/examples/base-toggle/base-toggle.component.html:
--------------------------------------------------------------------------------
1 | circle
3 |
4 |
5 | info
6 | Basic Button
7 |
8 |
9 |
12 | download
13 | Download
14 |
15 |
16 | Hover this basic div
17 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/tooltips/examples/basic-tooltip/basic-tooltip.component.scss:
--------------------------------------------------------------------------------
1 | :host {
2 | display: flex;
3 | gap: 1rem;
4 | align-items: center;
5 | flex-wrap: wrap;
6 | }
7 |
8 | div {
9 | padding: 0.5rem 1rem;
10 | border: 1px solid var(--sh-border-color);
11 | border-radius: var(--sh-border-radius);
12 | cursor: pointer;
13 | background: var(--sh-surface-color);
14 | }
15 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/tooltips/examples/basic-tooltip/basic-tooltip.component.ts:
--------------------------------------------------------------------------------
1 | import { ChangeDetectionStrategy, Component } from '@angular/core';
2 | import { ShipButtonComponent, ShipIconComponent, ShipTooltipDirective } from 'ship-ui';
3 |
4 | @Component({
5 | selector: 'app-basic-tooltip',
6 | imports: [ShipIconComponent, ShipButtonComponent, ShipTooltipDirective],
7 | templateUrl: './basic-tooltip.component.html',
8 | styleUrl: './basic-tooltip.component.scss',
9 | changeDetection: ChangeDetectionStrategy.OnPush,
10 | })
11 | export class BasicTooltipComponent {}
12 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/tooltips/examples/long-tooltip/long-tooltip.component.scss:
--------------------------------------------------------------------------------
1 | :host {
2 | display: flex;
3 | gap: 1rem;
4 | align-items: center;
5 | flex-wrap: wrap;
6 | }
7 |
8 | .long-tooltip-content {
9 | max-width: 300px;
10 |
11 | h4 {
12 | margin: 0 0 0.5rem 0;
13 | color: var(--sh-on-surface-color);
14 | }
15 |
16 | p {
17 | margin: 0 0 0.5rem 0;
18 | color: var(--sh-on-surface-color);
19 | line-height: 1.4;
20 | }
21 |
22 | ul {
23 | margin: 0;
24 | padding-left: 1rem;
25 | color: var(--sh-on-surface-color);
26 |
27 | li {
28 | margin-bottom: 0.25rem;
29 | }
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/tooltips/examples/long-tooltip/long-tooltip.component.ts:
--------------------------------------------------------------------------------
1 | import { ChangeDetectionStrategy, Component } from '@angular/core';
2 | import { ShipButtonComponent, ShipIconComponent, ShipTooltipDirective } from 'ship-ui';
3 |
4 | @Component({
5 | selector: 'app-long-tooltip',
6 | imports: [ShipIconComponent, ShipButtonComponent, ShipTooltipDirective],
7 | templateUrl: './long-tooltip.component.html',
8 | styleUrl: './long-tooltip.component.scss',
9 | changeDetection: ChangeDetectionStrategy.OnPush,
10 | })
11 | export class LongTooltipComponent {}
12 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/tooltips/examples/scrolled-tooltip/basic-tooltip.component.ts:
--------------------------------------------------------------------------------
1 | import { ChangeDetectionStrategy, Component } from '@angular/core';
2 | import { ShipButtonComponent, ShipIconComponent, ShipTooltipDirective } from 'ship-ui';
3 |
4 | @Component({
5 | selector: 'app-basic-tooltip',
6 | imports: [ShipIconComponent, ShipButtonComponent, ShipTooltipDirective],
7 | templateUrl: './basic-tooltip.component.html',
8 | styleUrl: './basic-tooltip.component.scss',
9 | changeDetection: ChangeDetectionStrategy.OnPush,
10 | })
11 | export class BasicTooltipComponent {}
12 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/tooltips/examples/scrolled-tooltip/scrolled-tooltip.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
circle
4 |
5 |
6 | info
7 | Basic Button
8 |
9 |
10 |
13 | download
14 | Download
15 |
16 |
17 |
18 |
Hover this basic div
19 |
2 | @for (item of items(); track item.id) {
3 |
4 |
{{ item.name }} (ID: {{ item.id }})
5 | @if (item.showContent) {
6 |
7 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, excepturi deserunt dignissimos corrupti
8 | repellendus obcaecati.
9 |
10 | }
11 |
14 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/ship/virtual-scrolls/virtual-scrolls.component.scss:
--------------------------------------------------------------------------------
1 | :host {
2 | display: block;
3 | }
4 |
5 | .my-item {
6 | padding: 10px;
7 | border-bottom: 1px solid #ccc;
8 | }
9 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/typography/typography.component.scss:
--------------------------------------------------------------------------------
1 | @use '../../../../ship-ui/styles/helpers.scss' as *;
2 |
3 | :host {
4 | display: flex;
5 | flex-direction: column;
6 | gap: p2r(32);
7 | padding: p2r(40);
8 | }
9 |
10 | code {
11 | background: darken(var(--base-8), 70%);
12 | color: #fff;
13 | padding: p2r(40 40 40 24);
14 | border-radius: var(--shape-3);
15 | overflow: auto;
16 | white-space: pre;
17 | display: block;
18 | }
19 |
20 | .align {
21 | display: flex;
22 | flex-direction: column;
23 | gap: p2r(8);
24 |
25 | p {
26 | display: flex;
27 | align-items: center;
28 | gap: p2r(4);
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/projects/design-system/src/app/typography/typography.component.ts:
--------------------------------------------------------------------------------
1 | import { JsonPipe } from '@angular/common';
2 | import { ChangeDetectionStrategy, Component } from '@angular/core';
3 | import { ShipIconComponent } from 'ship-ui';
4 |
5 | @Component({
6 | selector: 'app-typography',
7 | imports: [JsonPipe, ShipIconComponent],
8 | templateUrl: './typography.component.html',
9 | styleUrl: './typography.component.scss',
10 | changeDetection: ChangeDetectionStrategy.OnPush,
11 | })
12 | export default class TypographyComponent {
13 | someJson = {
14 | foo: 'bar',
15 | baz: 'qux',
16 | quux: 'quuux',
17 | corge: {
18 | grault: 1,
19 | garply: true,
20 | waldo: 'fred',
21 | },
22 | };
23 | }
24 |
--------------------------------------------------------------------------------
/projects/design-system/src/environments/environment-token.ts:
--------------------------------------------------------------------------------
1 | import { InjectionToken } from '@angular/core';
2 | import { environment } from './environment';
3 |
4 | export const ENVIRONMENT_TOKEN = new InjectionToken('ENVIRONMENT');
5 |
--------------------------------------------------------------------------------
/projects/design-system/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 | production: true,
3 | };
4 |
--------------------------------------------------------------------------------
/projects/design-system/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 | production: false,
3 | };
4 |
--------------------------------------------------------------------------------
/projects/design-system/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Ship
6 | (this.#shConfig?.cardType ?? 'type-a');
18 | }
19 |
--------------------------------------------------------------------------------
/projects/ship-ui/src/lib/ship-chip/ship-chip.component.ts:
--------------------------------------------------------------------------------
1 | import { ChangeDetectionStrategy, Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'sh-chip',
5 | imports: [],
6 | template: '
',
7 | changeDetection: ChangeDetectionStrategy.OnPush,
8 | host: {
9 | class: 'sh-sheet',
10 | },
11 | })
12 | export class ShipChipComponent {}
13 |
--------------------------------------------------------------------------------
/projects/ship-ui/src/lib/ship-divider/ship-divider.component.ts:
--------------------------------------------------------------------------------
1 | import { ChangeDetectionStrategy, Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'sh-divider',
5 | imports: [],
6 | template: `
7 |
8 |
10 |
11 |
12 |
15 | `,
16 | changeDetection: ChangeDetectionStrategy.OnPush,
17 | host: {
18 | class: 'sh-sheet',
19 | },
20 | })
21 | export class ShipEventCardComponent {}
22 |
--------------------------------------------------------------------------------
/projects/ship-ui/src/lib/ship-list/ship-list.component.ts:
--------------------------------------------------------------------------------
1 | import { ChangeDetectionStrategy, Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'sh-list',
5 | imports: [],
6 | template: `
7 |
10 | `,
11 | changeDetection: ChangeDetectionStrategy.OnPush,
12 | })
13 | export class ShipProgressBarComponent {
14 | value = input(undefined);
15 | }
16 |
--------------------------------------------------------------------------------
/projects/ship-ui/src/lib/ship-radio/ship-radio.component.ts:
--------------------------------------------------------------------------------
1 | import { ChangeDetectionStrategy, Component } from '@angular/core';
2 | import { classMutationSignal } from '../utilities/class-mutation-signal';
3 |
4 | @Component({
5 | selector: 'sh-radio',
6 | imports: [],
7 | template: `
8 |
9 |
10 | ('Ship UI Config');
4 |
5 | interface ShipConfig {
6 | alertVariant?: '' | 'simple' | 'outlined' | 'flat' | 'raised';
7 | cardType?: 'type-b';
8 | dialogType?: 'type-b';
9 | tableType?: 'type-b';
10 | sidenavType?: 'overlay' | 'simple';
11 | }
12 |
--------------------------------------------------------------------------------
/projects/ship-ui/styles/components/ship-divider.component.scss:
--------------------------------------------------------------------------------
1 | @use '../helpers.scss' as *;
2 |
3 | $shipDivider: true !default;
4 |
5 | @if $shipDivider == true {
6 | sh-divider {
7 | --divider-c: var(--base-4);
8 | --divider-h: #{p2r(1)};
9 |
10 | display: flex;
11 | gap: p2r(8);
12 | align-items: center;
13 | text-align: center;
14 |
15 | &:empty {
16 | gap: 0;
17 | }
18 |
19 | &::before,
20 | &::after {
21 | content: '';
22 | background: var(--divider-c);
23 | height: var(--divider-h);
24 | flex: 1 0;
25 | }
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/projects/ship-ui/styles/components/ship-virtual-scroll.component.scss:
--------------------------------------------------------------------------------
1 | @use '../helpers.scss' as *;
2 |
3 | $shipVirtualScroll: false !default;
4 |
5 | @if $shipVirtualScroll == true {
6 | sh-virtual-scroll {
7 | overflow-y: auto;
8 | position: relative;
9 | display: block;
10 | height: 600px;
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/projects/ship-ui/styles/core/core.scss:
--------------------------------------------------------------------------------
1 | @forward './core/variables';
2 | @forward './core/layout';
3 | @forward './core/loader';
4 | @forward './core/typography';
5 |
--------------------------------------------------------------------------------
/projects/ship-ui/styles/core/core/loader.scss:
--------------------------------------------------------------------------------
1 | @use '../../helpers.scss' as *;
2 |
3 | .loader {
4 | width: p2r(48);
5 | height: p2r(48);
6 | display: grid;
7 | place-content: center;
8 | color: var(--base-8);
9 | }
10 |
11 | .loader,
12 | .loading {
13 | position: relative;
14 |
15 | &:after {
16 | content: '';
17 | width: p2r(16);
18 | height: p2r(16);
19 | border: 2px solid var(--loader-c);
20 | border-bottom-color: transparent;
21 | border-radius: 50%;
22 | display: flex;
23 | box-sizing: border-box;
24 | animation: rotation 1s linear infinite;
25 | margin: auto;
26 | inset: 0;
27 | position: absolute;
28 | }
29 | }
30 |
31 | @keyframes rotation {
32 | 0% {
33 | transform: rotate(0deg);
34 | }
35 | 100% {
36 | transform: rotate(360deg);
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/projects/ship-ui/styles/core/fonts/_inter-tight.scss:
--------------------------------------------------------------------------------
1 | $useInterTight: true !default;
2 |
3 | @if ($useInterTight == true) {
4 | @font-face {
5 | font-family: 'Inter Tight';
6 | src: url('/ship-ui-assets/fonts/InterTight-VariableFont_wght.woff2') format('woff2-variations');
7 | font-weight: 100 900;
8 | font-stretch: 75% 125%;
9 | font-style: normal;
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/projects/ship-ui/styles/core/helpers/fn/color-mix.scss:
--------------------------------------------------------------------------------
1 | @function lighten($color, $percentage) {
2 | @return color-mix(in srgb, $color, #fff $percentage);
3 | }
4 |
5 | @function darken($color, $percentage) {
6 | @return color-mix(in srgb, $color, #000 $percentage);
7 | }
8 |
--------------------------------------------------------------------------------
/projects/ship-ui/styles/core/helpers/fn/dp.scss:
--------------------------------------------------------------------------------
1 | @use 'sass:list';
2 |
3 | // Gutter
4 | $base-dp: 4px;
5 |
6 | @function dp($listTimes) {
7 | $new-dp-list: ();
8 |
9 | @each $times in $listTimes {
10 | $new-dp-list: list.append($new-dp-list, $times * $base-dp, 'space');
11 | }
12 |
13 | @return $new-dp-list;
14 | }
15 |
--------------------------------------------------------------------------------
/projects/ship-ui/styles/core/helpers/fn/p2r.scss:
--------------------------------------------------------------------------------
1 | @use 'sass:list' as list;
2 | @use 'sass:meta' as meta;
3 | @use 'sass:math' as math; // Include math module for division
4 |
5 | $base-font-size-in-px: 16 !default;
6 |
7 | @function p2r($pxValues) {
8 | $remValues: ();
9 |
10 | @each $pxValue in $pxValues {
11 | @if $pxValue == auto {
12 | $remValues: list.append($remValues, auto);
13 | } @else if meta.type-of($pxValue) != number {
14 | $pxValue: math.div($pxValue, 1px);
15 | } @else if $pxValue == 0 {
16 | $remValues: list.append($remValues, 0);
17 | } @else {
18 | $remValues: list.append($remValues, (math.div($pxValue, $base-font-size-in-px) * 1rem));
19 | }
20 | }
21 |
22 | @return $remValues;
23 | }
24 |
--------------------------------------------------------------------------------
/projects/ship-ui/styles/core/helpers/mixins/ellipsis.scss:
--------------------------------------------------------------------------------
1 | @mixin ellipsis() {
2 | overflow: hidden;
3 | white-space: nowrap;
4 | text-overflow: ellipsis;
5 | word-break: break-all;
6 | word-wrap: break-word;
7 | }
8 |
--------------------------------------------------------------------------------
/projects/ship-ui/styles/core/helpers/mixins/overflow-scrolling.scss:
--------------------------------------------------------------------------------
1 | @mixin overflowScrolling($dir: y) {
2 | @if $dir == y {
3 | overflow-x: hidden;
4 | overflow-y: auto;
5 | -webkit-overflow-scrolling: auto;
6 | }
7 |
8 | @if $dir == x {
9 | overflow-x: auto;
10 | overflow-y: hidden;
11 | -webkit-overflow-scrolling: auto;
12 | }
13 |
14 | @if $dir == xy or $dir == yx {
15 | overflow: auto;
16 | -webkit-overflow-scrolling: auto;
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/projects/ship-ui/styles/core/helpers/mixins/wrapper.scss:
--------------------------------------------------------------------------------
1 | @use '../mixins/breakpoint.scss' as *;
2 | @use '../fn/p2r.scss' as *;
3 | @use 'sass:math' as mat;
4 |
5 | @mixin wrapper($gap: p2r(32), $padding: p2r(32)) {
6 | display: flex;
7 | flex-direction: column;
8 | width: 100%;
9 | gap: $gap;
10 | padding: $padding;
11 |
12 | @include breakpoint(-milli) {
13 | gap: calc(#{$gap} / 2);
14 | padding: calc(#{$padding} / 2);
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/projects/ship-ui/styles/core/polyfill/light-dark.scss:
--------------------------------------------------------------------------------
1 | @function light-dark($light, $dark) {
2 | @return var(--ship-light, $light) var(--ship-dark, $dark);
3 | }
4 |
--------------------------------------------------------------------------------
/projects/ship-ui/styles/helpers.scss:
--------------------------------------------------------------------------------
1 | // Functions
2 | @forward './core/helpers/fn/p2r';
3 | @forward './core/helpers/fn/color-mix';
4 |
5 | // light-dark polyfill
6 | @forward './core/polyfill/light-dark.scss';
7 |
8 | // Mixins
9 | @forward './core/helpers/mixins/breakpoint';
10 | @forward './core/helpers/mixins/wrapper';
11 | @forward './core/helpers/mixins/ellipsis';
12 | @forward './core/helpers/mixins/overflow-scrolling';
13 | @forward './core/helpers/mixins/scroll-shadows';
14 | // @forward './core/helpers/mixins/border-gradient';
15 |
--------------------------------------------------------------------------------
/projects/ship-ui/tsconfig.lib.json:
--------------------------------------------------------------------------------
1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
3 | {
4 | "extends": "../../tsconfig.json",
5 | "compilerOptions": {
6 | "outDir": "../../out-tsc/lib",
7 | "declaration": true,
8 | "declarationMap": true,
9 | "inlineSources": true,
10 | "types": []
11 | },
12 | "exclude": ["**/*.spec.ts", "node_modules/@types/bun"]
13 | }
14 |
--------------------------------------------------------------------------------
/projects/ship-ui/tsconfig.lib.prod.json:
--------------------------------------------------------------------------------
1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
3 | {
4 | "extends": "./tsconfig.lib.json",
5 | "compilerOptions": {
6 | "declarationMap": false
7 | },
8 | "angularCompilerOptions": {
9 | "compilationMode": "partial"
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/projects/ship-ui/tsconfig.spec.json:
--------------------------------------------------------------------------------
1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
3 | {
4 | "extends": "../../tsconfig.json",
5 | "compilerOptions": {
6 | "outDir": "../../out-tsc/spec",
7 | "types": []
8 | },
9 | "include": ["**/*.spec.ts", "**/*.d.ts"],
10 | "exclude": ["node_modules/@types/bun"]
11 | }
12 |
--------------------------------------------------------------------------------