npmpackage.info

@cardboard-box/windows

0.0.10

TypeScript

2.69 kB

Installations

npm install @cardboard-box/windows

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

14.8.0

NPM Version

6.14.7 Score

70.6

Supply Chain

Quality

75.5

Maintenance

100

Vulnerability

98.6

License

Pull Requests

Open

0

Total

0

Closed

0

Issues

Open

0

Total

0

Closed

0

Releases

Unable to fetch releases

Contributors

Unable to fetch Contributors

View all 1 contributors

Languages

TypeScript

SCSS

HTML

JavaScript

TypeScript (62.83%)

SCSS (25.67%)

HTML (6.66%)

JavaScript (4.84%)

Love this project? Help keep it running — sponsor us today! 🚀

Developer

calico-crusade

Download Statistics

Total Downloads

2,535

Last Day

Last Week

Last Month

Last Year

495

GitHub Statistics

5 Commits

2 Watching

1 Branches

1 Contributors

Bundle Size

10.35 kB

Minified

2.69 kB

Minified + Gzipped

Bundlephobia

Maintainers

Package Meta Information

Latest Version

0.0.10

Package Id

@cardboard-box/windows@0.0.10

Unpacked Size

245.38 kB

Size

51.45 kB

File Count

NPM Version

6.14.7

Node Version

14.8.0

Total Downloads

Cumulative downloads

Total Downloads

2,535

Last day

-50%

Compared to previous day

Last week

133.3%

Compared to previous week

Last month

-46.5%

Compared to previous month

Last year

-16.4%

495

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

tslib

Peer Dependencies

@angular/common @angular/core

Versions

@cardboard-box/windows

Brings windows-application like layout and design to angular applications!

Features:

Resizable & Movable windows
Task bar for fixing the position and size of windows
Custom title-bars and body content for windows
Customizable icons, window layouts and more!

Usage

Install the library from npm: npm install @cardboard-box/windows

Include the module in your AppModule:

1...
2import { CardboardBoxWindowsModule } from '@cardboard-box/windows';
3...
4
5@NgModule({
6  declarations: [
7    AppComponent
8  ],
9  imports: [
10    BrowserModule,
11    AppRoutingModule,
12    CardboardBoxWindowsModule, //<--- This
13  ],
14  providers: [],
15  bootstrap: [AppComponent]
16})
17export class AppModule { }

Setup your windows in your component

1<div class="some-container"> <!-- This container tells the box-container how big your desktop space should be-->
2    <box-container>
3        <box-window>
4            <div *title>Hello World</div> <!--This the title of the window-->
5            <div *body> <!-- This is the body content of the window -->
6                <h1>How are you?</h1>
7            </div>
8        </box-window>
9        <box-window>
10            <div *title>Other window!</div>
11            <div *body>
12                <h1>This is cool!</h1>
13            </div>
14        </box-window>
15    </box-container>
16</div>

Ensure the container has the correct sizing with a little bit of css!:

1.some-container {
2    position: fixed; /*Needs to be relative, fixed, or absolute for the styling to work correctly*/
3    top: 0;
4    left: 0;
5    width: 100%;
6    height: 100%;
7    max-width: 100%;
8    max-height: 100%;
9    overflow: hidden;
10}

Theme your windows however you want! Here are some default styles (these can go in your styles.scss file!):

1$window-border: rgb(41, 130, 204);
2
3//Everything is contained within this "window-container" class
4.window-container {
5    background-color: rgb(68, 68, 68);
6
7    //The actual windows are within the "window-background" class
8    .window-background {
9
10        //This represents a single resizable and dragable window
11        .window-container {
12            border: 2px solid #{$window-border};
13            background: #fff;
14            box-shadow: 0 0 4px 4px rgba(0, 0, 0, 0.15);
15            
16            //This is the title bar for each window
17            .window-title {
18                background-color: $window-border;
19                color: #fff;
20                padding-left: 5px;
21                padding-bottom: 2px;
22
23                //This represents just the customizable title text
24                .title-text {
25                    
26                }
27
28                //This is the container for the buttons in the title bar
29                .title-buttons {
30                    //Each of these represents a single button within the title bar
31                    button {
32                        color: #fff;
33                        border: none;
34                        outline: none;
35                        background-color: unset;
36                        font-family: 'Font Awesome 5 Free';
37
38                        //This is how you cange the window-icons (I'm using font-awesome)
39                        &.minimize::before {
40                            content: '\f2d1'; 
41                        }
42        
43                        &.maximize::before {
44                            content: '\f2d0';
45                        }
46
47                        &.close::before {
48                            content: '\f410'
49                        }
50
51                        &.restore::before {
52                            content: '\f2d2';
53                        }
54
55                        //This can be used to hide the close button
56                        /*&.close {
57                            display: none;
58                        }*/
59                    }
60                }
61            }
62        }
63    }
64
65    //These are the window titles at the bottom of the page
66    .task-bar {
67        background-color: rgba(0, 0, 0, 0.75);
68        color: #fff;
69
70        //This represents a single windows title
71        .window-item {
72            background-color: unset;
73            color: #fff;
74            outline: none;
75            border: #ddd;
76            margin-left: 10px;
77
78            //This is whether or not the window is active
79            &.active {
80                border-top: 1px solid #fff;
81            }
82        }
83    }
84}

Run your application and see the magic!

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

0

Maintained

Determines if the project is "actively maintained".

0

SAST

Determines if the project uses static code analysis.

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

License

Determines if the project has defined a license.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

108 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-c75v-2vq8-878f
Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9
Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
Warn: Project is vulnerable to: GHSA-257v-vj4p-3w2h
Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
Warn: Project is vulnerable to: GHSA-3wcq-x3mq-6r9p
Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w
Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
Warn: Project is vulnerable to: GHSA-j4f2-536g-r55m
Warn: Project is vulnerable to: GHSA-r7qp-cfhv-p84w
Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h
Warn: Project is vulnerable to: GHSA-6h5x-7c5m-7cr7
Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q
Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c
Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6
Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j
Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37
Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
Warn: Project is vulnerable to: GHSA-7r28-3m3f-r2pr
Warn: Project is vulnerable to: GHSA-r8j5-h5cx-65gg
Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
Warn: Project is vulnerable to: GHSA-jg8v-48h5-wgxg
Warn: Project is vulnerable to: GHSA-36fh-84j7-cv5h
Warn: Project is vulnerable to: GHSA-7x7c-qm48-pq9c
Warn: Project is vulnerable to: GHSA-rc3x-jf5g-xvc5
Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
Warn: Project is vulnerable to: GHSA-82v2-mx6x-wq7q
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5
Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp
Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq
Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr
Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765
Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g
Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
Warn: Project is vulnerable to: GHSA-cwx2-736x-mf6w
Warn: Project is vulnerable to: GHSA-v39p-96qg-c8rf
Warn: Project is vulnerable to: GHSA-8v63-cqqc-6r2c
Warn: Project is vulnerable to: GHSA-6fx8-h7jm-663j
Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3
Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
Warn: Project is vulnerable to: GHSA-25hc-qcg6-38wj
Warn: Project is vulnerable to: GHSA-xfhh-g9f5-x4m4
Warn: Project is vulnerable to: GHSA-qm95-pgcg-qqfq
Warn: Project is vulnerable to: GHSA-cqmj-92xf-r6r9
Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq
Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw
Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc
Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p
Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
Warn: Project is vulnerable to: GHSA-662x-fhqg-9p8v
Warn: Project is vulnerable to: GHSA-394c-5j6w-4xmx
Warn: Project is vulnerable to: GHSA-78cj-fxph-m83p
Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3
Warn: Project is vulnerable to: GHSA-9m6j-fcg5-2442
Warn: Project is vulnerable to: GHSA-hh27-ffr2-f2jc
Warn: Project is vulnerable to: GHSA-rqff-837h-mm52
Warn: Project is vulnerable to: GHSA-8v38-pw62-9cw2
Warn: Project is vulnerable to: GHSA-hgjh-723h-mx2j
Warn: Project is vulnerable to: GHSA-jf5r-8hm2-f872
Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
Warn: Project is vulnerable to: GHSA-4fc4-chg7-h8gh
Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693
Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Warn: Project is vulnerable to: GHSA-776f-qx25-q3cc
Warn: Project is vulnerable to: GHSA-72mh-269x-7mh5
Warn: Project is vulnerable to: GHSA-h4j5-c7cj-74xg

Score

1.3

/10

Last Scanned on 2025-02-03

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More